小编给大家分享一下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过大过大的解决方法”有了一定的了解，如果想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
