解決js動態加載、緩存、更新

mikyou 發布于2019-08-21 14:43 / 1723人閱讀

摘要：即在內添加版本號的解決方案這樣的做法的確可以達到清緩存的目的。重新渲染而代理又緩存了的，如果在更新的話就只能繼續改版本號。

最近項目中出現修改js，線上并沒有實時更新而是使用的緩存中的js。

當然如果你的頁面是單頁面應用的話，解決方案就很簡單了，修改index.js后面的版本號就好了。

mudel.export = {
    //html文件名 不能重名-。-
    "a":{
        //主js文件
        js : ["a.js","b.js"] //兼容修改多個JS
        css : []
    }
}

如果html放在前端的話，也會簡單很多，可以使用gulp在打包的時候配置一下--src a ，讓gulp去自動完成替換版本號操作。

這里解決的是當html放在后端使用VM或者其他模板引擎渲染出來的。

究其原因是因為后端的路由通過get請求返回html。而get請求通過配置被緩存，所以導致html被緩存。

而js請求也屬于get請求，所以也會被緩存。

1、按需添加版本號

根據以上分析，一個很大眾的解決方案出現了。即在

這樣的做法的確可以達到清緩存的目的。這里客戶端會先去和代理中的緩存進行對比，發現請求參數發生了變更，所以重新從服務器中獲取js。重新渲染而代理又緩存了v=2的js，如果在更新的話就只能繼續改版本號。

2、自動生成版本號(以時間戳，或者生成UUID)

既然方案一可以解決緩存問題那么“懶蟲”們就想到可以動態的設置版本號，思想就是每次生成不重復的ID就可以了。但是這樣子又引發了其他問題。

導致只要訪問這個JS無論是不是修改過這個js都會從服務器重新取得js，導致沒有緩存的存在浪費了很多的流量和很差的體驗。類似的方案也可以在meta Tag中做配置也可以實現無緩存設置。

類似的方案很多，也可以添加script Tag，動態添加需要引入的JS。在使用webpack打包的時候在末尾的文件中添加一段JS

VM或者jsp等...在后端模板渲染的html中寫入以下JS

額~~好吧，其實沒啥用。

既然html是放在后端的那么修改的操作最好是由后端來處理更迅速更快捷。

3、通過請求修改版本號

可以通過本地開啟已個服務寫一個簡單的HTML，有input 和button就可以了。每次局部上線的時候將文件名寫入input框，同時前后端要有一個共同的約定模板由前端書寫

mudel.export = {
    //js文件名 key 這里可以使用不能重名-。-
    //可以使用symbol
    "a":"具體的路徑a.js"
}

發送請求后，后端解析文件名找到對應文件，對模板引擎中的?v=xxx 進行替換。

4、寫一個node放在服務器上跑，用來修改線上的js版本用來清除緩存

這個只是個想法！！一般不能這么用，太危險了~~ -。-被中間人攻擊服務器就直接爆炸了。

以上純屬個人想法，如果有疑問歡迎提出。如果有什么更好的意見和想法喜歡您不要吝嗇~ 謝謝您！

GPU云服務器云服務器更新緩存數據 js 動態加載js js 動態加載視頻 js 動態加載數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88007.html

前端模塊化

摘要：如果想讓模塊再次執行，必須清楚緩存同步加載模塊只有加載完成之后，才能執行后面的操作運行時加載中的實現對象中提供了一個構造函數，每個模塊都是構造函數的實例。什么是模塊化 1、模塊化模塊化是自頂向下逐層將系統劃分成若干更好的可管理模塊的方式，用來分割、組織和打包軟件,達到高度解耦 2、模塊模塊是可組合、分解、更換的單元；每個模塊完成一個特定子功能，模塊間通過某種方式組裝起來，成為...

liukai90 2019-08-23 11:45 評論0 收藏0
騰訊祭出大招VasSonic，讓你的H5頁面首屏秒開

摘要：經過一系列優化后，在平臺上，點擊到頁面首屏展示的耗時從平均多降低為，優化以上。而現在頁面為了更好地為用戶推薦喜歡的內容，我們后臺引入機器學習和隨機算法來做智能個性化推薦。另外還有部分的內容是隨機算法推薦的。 VasSonic成長歷程前言 2017.8.8 14時，SNG增值產品部Vas團隊研發的輕量級高性能Hybrid框架VasSonic通過了公司最終審核，作為騰訊開源組件分享給大...

xzavier 2019-08-01 17:25 評論0 收藏0