拍案驚奇—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版 完美解決問題
產品: 棒棒噠!