JS文件引用去除緩存處理


起因:混合式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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM