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):

?

總結

以上是生活随笔為你收集整理的webpack来打包你的vue项目，如发现你的vendor.js过大的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。