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

最近項目中出現修改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請求，因此也會被緩存。

---

一、按需添加版本號

根據以上分析，一個很大衆的解決方案出現了。即在<script>內添加版本號的解決方案：

<script src="a.js?v=1"></script>

這樣的作法的確能夠達到清緩存的目的。這裏客戶端會先去和代理中的緩存進行對比，發現請求參數發生了變動，因此從新從服務器中獲取js。從新渲染而代理又緩存了v=2的js，若是在更新的話就只能繼續改版本號。

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

既然方案一能夠解決緩存問題那麼「懶蟲」們就想到能夠動態的設置版本號，思想就是每次生成不重複的ID就能夠了。可是這樣子又引起了其餘問題。

<script src=`a.js?v=${date}`></script>

致使只要訪問這個JS不管是否是修改過這個js都會從服務器從新取得js，致使沒有緩存的存在浪費了不少的流量和不好的體驗。相似的方案也能夠在meta Tag中作配置也能夠實現無緩存設置。

<meta http-equiv="Pragma" content="no-cache">

相似的方案不少，也能夠添加script Tag，動態添加須要引入的JS。在使用webpack打包的時候在末尾的文件中添加一段JS

<script>
    window.load_page = function ( path ){
        var staticPath = "..." //動態設置的static path
        var $script = document.createElement("script");
        $script.src = static + path + '.js'; //這裏想怎麼改就怎麼改
        document.body.appendChild($script); //動態生成的js放到body最底部
    }
</script>

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

<script> 
    load_page("js/a") //線上js放置的位置 咱們項目是生成在dist目錄下 
</script>

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

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

三、經過請求修改版本號

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

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

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

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

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

以上純屬我的想法，若是有疑問歡迎提出。若是有什麼更好的意見和想法喜歡您不要吝嗇~ 謝謝您！