vue打包文件太大,vuecli3打包后文件过大
本文主要介绍了如何解决vue项目打包后文件过大的问题，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
为什么打包后文件太大？如何快速解决：1。路由懒加载【使用es6提案的import()方法】2。2简介。加拿大
为什么打包后文件过大？
手机app项目采用vue-cli脚手架搭建，UI以Muse-UI为主。为了满足需求，开发过程中混合了Element-UI的一些组件，除了团队开发，前端也不止一个人参与。在没有统一规范约束的情况下，编码风格和方式千差万别……混乱不堪，导致依赖性太强。打包的时候，webpack把所有的库打包在一起，所以vendor.js文件和app.js文件。
如何快速解决
在优化复杂项目时，只增不减可以大大降低风险，bug可控，既保证了项目的正常运行又减少了不必要的工作量。
1.路由懒加载【使用es6提案的import()方式】
这里推荐使用es proposal的import()方法，因为在不修改原始路由定义的情况下，也会用到import方法。如果vue路由懒加载组件，修改多，不够快。
修改后的参考方法如图所示，即：
将导入登录从“@/views/login/login”修改为
const log in=()=import( @/views/log in/log in )
其他路由配置不需要更改。
2.CDN引入
使用cdn加载index.html页面中的依赖项
link rel= style sheet href= https://un pkg . com/muse-ui/dist/muse-ui . CSS rel= external no follow
script src= https://cdn . bootcss . com/vue-router/3 . 0 . 1/vue-router . min . js /script
script src= https://cdn . bootcss . com/vue/2 . 5 . 15/vue . min . js /script
link rel= style sheet href= https://cdn . bootcss . com/material-design-icons/3 . 0 . 1/icon font/material-icons . CSS rel= external no follow
link href= https://cdn . bootcss . com/element-ui/2 . 0 . 7/theme-chalk/index . CSS rel= external no follow rel= style sheet
script src= https://cdn . bootcss . com/jquery/3 . 1 . 0/jquery . js /script
script src= https://cdn . bootcss . com/echarts/4 . 2 . 1-rc1/echarts . js /script
script src= https://cdn . bootcss . com/QS/6 . 5 . 2/QS . min . js /script
script src= https://cdn . bootcss . com/element-ui/2 . 0 . 7/index . js /script
script src= https://UNP kg . com/axios/dist/axios . min . js /script
script src= https://UNP kg . com/muse-ui/dist/muse-ui . js /script
script src= https://cdn . bootcss . com/EXIF-js/2 . 3 . 0/EXIF . js /script
添加webpack.base.conf.js配置
外部：{
元素-ui :元素，
vue: Vue ，
querystring:Qs ，
“vue路由器”:“vue路由器”，
“博物馆”:“博物馆”，
axios:axios ，
jquery: jQuery ，
EXIF:EXIF ，
“电子海图”:“电子海图”
},
尽可能用cdn参考index.html main . js中的参考文献。
大多数开源库的Cdn都可以在开源项目的CDN加速服务中找到。
这里不建议在优化成型项目时直接删除main.js中的依赖引用部分。如果删除，需要在公共JS中重新引入，或者在所需的依赖页面中导入。还需要注意的是，导入时定义的名称需要与项目中已有的依赖引用变量名一致，这样会增加你的工作量。搭建新项目或者想更深入学习让代码更纯粹的可以去度娘找资料研究。
这样优化就告一段落了，打包后文件大小如下：
供应商。***文件大小已从1.98M减小到342K
App。***文件大小从573K减少到53.3K
页面加载速度：
进入第一页的时间从平均13.6S降低到平均1.12S，接近秒。
最后，压缩项目中使用的图片素材，修改config/index . js production source map:false删除。打包过程中生成的地图文件，以加快打包速度。
以上是我对Vue项目打包后文件过大问题的解决方案。希望能帮到你，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。