vendor.js过大过大的解决方法-创新互联

小编给大家分享一下vendor.js过大过大的解决方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

我们利用CommonsChunkPlugin插件去抽取这些第三方的部分作为vendor.js独立打包,因为需要利用到缓存。所以我们添加hash值不能在未改变的情况下更大。

vendor.js过大原因

1.如果你使用了webpack来打包你的vue项目，如发现你的vendor.js过大则可以参考本文的解决方案.

2.造成过大的原因是因为在main.js导入第三库太多时,webpack合并js时生成了vendor.js(我们习惯把第三方库放在vendor里面)造成的.如下图在main.js引用element-ui等第三方库。后果就是你的服务器端的js文件越大则用户加载页面的时间会越长(因为所需下载js的时间越久)

3.解决方案:采用cdn加速去从别的服务器上加载第三方库而非自己的服务器，这样就会快很多.并且能节省自己服务器的带宽。

vendor.js过大解决步骤:

1.选用unpkg来作为第三方提供.如我想要axios包则输入网址为末尾加斜杠代表你要查询该库的所有版本列表).然后你可以选择对应的版本。其中@0.18.0为库的版本号，若不写则默认新版本.

2.在index.html中将你所需的第三方库的链接加载进来,如下图:

3.在webpack.base.conf中添加externals来告诉webpack我们这些第三方库不需要打包如下图

4.执行npmrunbuild来验证是否减小了。效果图如下(已经由原来的900kb减小到了130kb):

看完了这篇文章，相信你对“vendor.js过大过大的解决方法”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！