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/axios@0.18.0/index.js 。其中 @0.18.0為庫的版本號,若不寫則默認最新版本.
? ?2.在index.html中 將你所需的第三方庫的鏈接加載進來,如下圖:
? ?
?3.在webpack.base.conf 中添加?externals來告訴webpack我們這些第三方庫不需要打包 如下圖
4. 執行npm run build 來驗證是否減小了。效果圖如下(已經由原來的900kb減小到了130kb):
?