溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vendor.js過大過大的解決方法

發(fā)布時間：2021-03-04 15:50:24 來源：億速云 閱讀：6004 作者：小新 欄目：開發(fā)技術(shù)

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

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

　　vendor.js過大原因

　　1.如果你使用了webpack來打包你的vue項目，如發(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)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手