拍案驚奇—vue-cli5專案關於中的一個快取詭異bug分析

Runningfyy發表於2022-05-27
Vue快取

現象描述

新發了一版程式碼
產品：“火狐沒更新”
我：“多重新整理幾次”
產品：“沒用”
我：“強刷”
產品：“好棒棒，但是你之前不是寫了一個版本檢測，能自動更新嗎，為什麼這次不管用，還要手動強刷，普通重新整理不管用”
我內心："女人就是麻煩" 於是看了下復現的環境，發現了震驚的一幕
HTML程式碼長這樣
image.png
我內心：絕不可能，絕對不可能，啊，我的世界觀崩塌了。要麼全是webpakc打包的新版程式碼，要麼走快取全是老版程式碼。
為啥能出現一個html一半是新版一半是老版程式碼的情況？？？
下載 (1).jpeg

馬桶上的思考

思考過程

苦思良久，沒有頭緒
首先 有新版控制程式碼 Html一定是新的
但是為啥有老版程式碼呢 我仔細有看了下本地打包後的程式碼，終於發現了端倪
image.png
由於vue有按需載入 每個路由的css js 都是動態引入的，現在引入的是老版本的。所以這個檔案應該是老版的，
注意紅框的檔案，走的快取，但是打包出來的還是新版的，但是由於名字沒有Hash,所以獲取的是快取的檔案
image.png

驗證

那麼問題來了，vue-cli4為什麼沒問題呢

vue-cli-service inspect > output.js 一下

可以發現

 // vue-cli5
 output: {
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].js'
  }
//vue-cli4
 output: {
    filename: 'js/[name].[contenthash:8].js',
  }

所以vue-cli5預設打包不帶hash 就會造成快取問題。
而火狐的快取問題尤為嚴重。必須強行清快取。
所以解決方案
1.window.reload ==> window.reload(true)
2.vue.config.js裡面的添上

configureWebpack: {
    output: {
      filename: 'js/[name].[contenthash:8].js',
    }
}

後續

上完fix版 完美解決問題
產品： 棒棒噠！

相關文章