起因:混合式app,調起攝像頭,手機相冊,通訊錄等需要IOS以及Android原生開發的支持
故:調用一個中間的JS(封裝了具體的方法),由中間的JS去告知IOS或Android調起具體的功能, 這個JS由IOS或Android開發人員維護,H5不需要改動
鑒於此:為了此JS在開發、維護、改bug;H5開發人員不用改代碼以及重新打包部署,故采用引用線上地址
在上述的背景下,若此線上JS發生修改,若JS地址以及版本號沒變的話,前端服務器並不會重新下載新的線上JS,是使用緩存的JS文件
熟悉webpack打包的同學,應該會發現webpack打包后的文件會自動追加hash值,來去除緩存(若文件無改動,則hash值不變)
上圖JS文件夾下的文件都追加了hash值,細心的同學會發現圓形紅色標注線里的文件並沒有追加hash值,這個我們在下一篇博客里說明,這里埋了一個大坑
言歸正傳:最簡潔的方案解決JS文件引用緩存
<html lang="en">
<!--追加隨機數去除緩存--> <script src="https://xxx/jsapi-2.0.js?<%=Math.random()%>"></script> </html>
需注意上述方案不管JS文件是否有改動,都不使用緩存,<%=%>是ejs模版語法,一旦文件編譯后,此時隨機數已生成
若此后第三方的JS改動的話,還是無法感知,還需要重新打包編譯部署
所以終極方案是使用document寫入的方式,但此方式對不同瀏覽器會有加載時機的區別
<script type="text/javascript"> document.write("<script src='https://xxx/jsapi-2.0.js?" + Math.random() + "></script>")
</script>