小編給大家分享一下vendor.js過大過大的解決方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

目前創(chuàng)新互聯(lián)公司已為上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、廣陽網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

我們利用CommonsChunkPlugin插件去抽取這些第三方的部分作為vendor.js獨(dú)立打包,因?yàn)樾枰玫骄彺妗Ｋ晕覀兲砑觝ash值不能在未改變的情況下更大。

vendor.js過大原因

1.如果你使用了webpack來打包你的vue項(xiàng)目，如發(fā)現(xiàn)你的vendor.js過大則可以參考本文的解決方案.

2.造成過大的原因是因?yàn)樵趍ain.js導(dǎo)入第三庫太多時,webpack合并js時生成了vendor.js(我們習(xí)慣把第三方庫放在vendor里面)造成的.如下圖在main.js引用element-ui等第三方庫。后果就是你的服務(wù)器端的js文件越大則用戶加載頁面的時間會越長(因?yàn)樗柘螺djs的時間越久)

3.解決方案:采用cdn加速去從別的服務(wù)器上加載第三方庫而非自己的服務(wù)器，這樣就會快很多.并且能節(jié)省自己服務(wù)器的帶寬。

vendor.js過大解決步驟:

1.選用unpkg來作為第三方提供.如我想要axios包則輸入網(wǎng)址為末尾加斜杠代表你要查詢該庫的所有版本列表).然后你可以選擇對應(yīng)的版本。其中@0.18.0為庫的版本號，若不寫則默認(rèn)新版本.

2.在index.html中將你所需的第三方庫的鏈接加載進(jìn)來,如下圖:

3.在webpack.base.conf中添加externals來告訴webpack我們這些第三方庫不需要打包如下圖

4.執(zhí)行npmrunbuild來驗(yàn)證是否減小了。效果圖如下(已經(jīng)由原來的900kb減小到了130kb):

看完了這篇文章，相信你對“vendor.js過大過大的解決方法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

文章題目：vendor.js過大過大的解決方法-創(chuàng)新互聯(lián)
網(wǎng)頁網(wǎng)址：http://weahome.cn/article/cssood.html