解决vue打包后vendor.js文件过大问题
第一步、cdn引入各种包
index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包,如下图:
第二步、在使用vue等包的地方,注释掉import引入
在所有使用vue的地方注释掉引入的vue等包,但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用,除了Vue.use(ElementUI), 如果加上这句话,还是会打包element-ui到vendor.js文件中
在main.js
在store文件加中的index.js
在api/request.js文件中
在router/index.js文件中
第三步、打包忽视掉vue等包
在webpack.base.conf.js
第四步、如果打包后的文件还是比较大,就采用路由懒加载的方式加载路由
最终打包结果
vendor.js的大小由原来的988k, 降到235k
总结
以上所述是小编给大家介绍的解决vue打包后vendor.js文件过大问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章
vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决
这篇文章主要介绍了vite+vue3+tsx项目打包后动态路由无法加载页面的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03Vue+elementui 实现复杂表头和动态增加列的二维表格功能
这篇文章主要介绍了Vue+elementui 实现复杂表头和动态增加列的二维表格功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下2019-09-09vue2.5.2使用http请求获取静态json数据的实例代码
这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下2018-02-02
最新评论