關於Vue Loading chunk {n} failed的一些思考

關於Vue Loading chunk {n} failed的一些思考

更新時間：2020-06-02 14:52:43

0x1 問題

Loading chunk {n} failed

測試偶爾會出現這個問題，遂提出一個bug，從bug字面意思來看，有一個js的塊加載失敗了。丟失了一個${domain}/js/chunk-${hash}.js。

爲何會丟失？

爲何會偶發？

同類問題

Vue項目中出現Loading chunk {n} failed問題的解決方法

點擊切換路由的時候，有時候會報錯

本文大量引用了17khba在點擊切換路由的時候，有時候會報錯的回答。

0x2 偶發性緣由

前提：部署方式爲刪除上一次構建的資源文件，替換成新的打包文件。

1. 新版本部署前，有用戶正在你的網頁中
2. 而後你部署了新版本，並且是刪除原有資源，好比 hash 爲 bgt78d的資源不見了，但此時用戶的 index.html模板中仍是記錄的 bgt78d的資源地址
3. 這時用戶在他現有的頁面中進行路由切換，前端路由切換
4. 這不會觸發去重現獲取 index.html，因此老的 index.html中的 chunk 信息生效
5. 這個時候若是訪問已經訪問過的路由， 這些路由中的 chunk 已經被瀏覽器緩存，路由（頁面）能正常，雖然它可能使用的是過期的資源（就你上一個版本發佈的資源）
6. 可是當請求以前沒有請求過的路由， 由於懶加載的關係，這些路由對應的組件 chunk 沒有緩存，根據老的 chunk 對應信息，去請求老的靜態資源，而老的靜態資源又已經因爲你的部署頂替掉了，因而出現找不到的問題
7. 刷新就能夠，由於刷新重現獲取了一遍 html 文檔，chunk 對應信息也就刷新了

0x3 簡單解決思路

上面也提到了刷新頁面，可是僅僅捕獲到錯誤就刷新，極可能出現死循環，由於瀏覽器或者相似於Nginx緩存設置的緣由，瀏覽器不必定每次刷新去獲取新的index.html。 因此結合重試次數和重試間隔來重試會比較好

0x4 更好的解決思路

• 構建的時候靜態資源路徑帶上版本信息，這個有不少方法

  • 好比路徑中攜帶，好比原來請求 /static/js/balabal.[hash].js，如今 /[version]/static/balabal.[hash].js
• 部署的時候不用頂替部署，而是保留老版本，有不少方式，好比

  • 若是是裸機部署，能夠在 web 服務器根目錄下，新建 version 對應的目錄，而後部署到這個目錄
  • 若是是 docker 容器頂替部署，能夠在構建前端的時候將前端資源打成 tar 包上傳到某個地方，這樣在打包新版本的 docker 鏡像的時候，能夠拉取上一個版本的 tar 包，也打包到鏡像中，這樣 docker 中也能有兩個版本的資源，經過版本路徑區分下
• 這樣的狀況下，原有頁面的用戶仍是會訪問到老的資源，雖然可能版本落後，可是不會出錯，部署後新打開的頁面就會訪問新的資源

PS.若是不想暴露 version，能夠把 version 作一個 hash 或者混淆

0x5 實現

查看Vue-cli配置文檔，

assetsDir

• Type: string

• Default: ''

  放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。

  提示

  從生成的資源覆寫 filename 或 chunkFilename 時，assetsDir 會被忽略。

只須要給assetsDir設置一個版本號文件夾，每次發佈新版的時候，不刪除這個文件夾就行。能夠選擇性的保留最近幾回版本的靜態資源文件。

使用 npm 版本號管理進行配合。

${app}/vue.config.js

const { version } = require('./package.json')
 module.exports = {  // 放置生成的靜態資源 (js、css、img、fonts) 的 (相對於 outputDir 的) 目錄。  assetsDir: `./${version}`,  ... } 複製代碼

打包命令加上--no-clean。做用是不清除上次打包生成的dist目錄。

vue-cli-service build --no-clean
複製代碼

dist

0x6 結論❗

問題到這裏基本已經解決了，不過仍然出現了一些能夠優化的地方。好比我沒有清除上次打包的dist目錄，若是在${app}/public目錄下引入的一些靜態資源後期版本已經刪除了，因爲咱們沒有刪除dist目錄，不須要的資源仍然存在部署的服務器上。、

若是有很好的方案歡迎指出或者討論。謝謝你的閱讀~💗

關於我

SunSeekerX，前端開發、Nodejs開發、小程序、uni-app開發、等等

喜歡探討技術實現方案和細節，完美主義者，見不得bug。

Github：github.com/SunSeekerX

我的博客：yoouu.cn/

我的在線筆記：sunseekerx.yoouu.cn/