element vue vendor 首屏載入白屏 載入時間過長問題
阿新 • • 發佈：2019-01-08
1.如果你使用了webpack來打包你的vue專案，如發現你的vendor.js過大則可以參考本文的解決方案.
2.造成過大的原因是因為在main.js匯入第三庫太多時,webpack合併js時生成了vendor.js(我們習慣把第三方庫放在vendor裡面)造成的.如下圖在main.js引用element-ui等第三方庫。後果就是你的伺服器端的js檔案越大則使用者載入頁面的時間會越長(因為所需下載js的時間越久)
3.解決方案:採用cdn加速去從別的伺服器上載入第三方庫而非自己的伺服器，這樣就會快很多.並且能節省自己伺服器的頻寬。
4.解決步驟:
1.選用unpkg來作為第三方提供.如我想要axios包則輸入網址為 https://unpkg.com/axios/ (末尾加斜槓代表你要查詢該庫的所有版本列表).然後你可以選擇對應的版本如 https://unpkg.com/ [email protected]/index.js 。其中 @0.18.0為庫的版本號，若不寫則預設最新版本.
2.在index.html中 將你所需的第三方庫的連結載入進來,如下圖:
3.在webpack.base.conf 中新增 externals來告訴webpack我們這些第三方庫不需要打包 如下圖
4. 執行npm run build 來驗證是否減小了。效果圖如下(已經由原來的900kb減小到了130kb):
