vue项目打包过大,vue 打包优化

　　本文主要介绍了vue项目打包的优化方法(使打包的js文件变小)，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

目录

　　我用的命令是vue ui的可视化打包操作需要配置。js文件通过vue.config.js进入可视面板，导致js文件过大。通常一个vue项目会用到很多插件，比如swiper，axios，vuerouter，vuex，…，那么使用很多插件必然会造成打包的js文件过大，影响加载速度，造成用户体验不好。

我使用的命令是 vue ui 可视化打包操作

进入可视化面板

　　默认情况下，vue-cli 3.0生成的项目会隐藏webpack配置项。如果我们需要配置网络包，

需要通过vue.config.js来配置

　　在项目的根目录下创建vue.config.js文件，

　　模块.导出={

　　chainWebpack:config={

　　//发布模式

　　config . when(process . ENV . node _ ENV===生产，config={

　　//entry查找默认包条目，调用clear删除默认包条目。

　　//add添加新的打包条目。

　　config . entry(“app”)。清除()。添加(。/src/main-prod.js )

　　})

　　//开发模式

　　config . when(process . ENV . node _ ENV=== development ，config={

　　config . entry(“app”)。清除()。添加(。/src/main-dev.js )

　　})

　　}

　　}

　　补充：

　　ChainWebpack可以通过链式编程修改Webpack的配置。

　　ConfigureWebpack可以通过操作对象来修改Webpack的配置。

　　**###7.加载外部CDN

　　默认情况下，所有第三方依赖包都将被打包到js/chunk-vendors中。

.js文件中，导致该js文件过大

　　然后我们可以通过外部来排除这些包，这样它们就不会被打包到js/chunk-vendors中。

　　模块.导出={

　　chainWebpack:config={

　　//发布模式

　　config . when(process . ENV . node _ ENV===生产，config={

　　//entry查找默认包条目，调用clear删除默认包条目。

　　//add添加新的打包条目。

　　config . entry(“app”)。清除()。添加(。/src/main-prod.js )

　　//使用外部设置排除

　　config.set(externals ，{

　　Vue:“Vue”，

　　“vue路由器”:“vue路由器”，

　　axios:“axios”，

　　瞬间：“瞬间”

　　})

　　})

　　//开发模式

　　config . when(process . ENV . node _ ENV=== development ，config={

　　config . entry(“app”)。清除()。添加(。/src/main-dev.js )

　　})

　　}

　　}

　　使用cdn在公共场合将外部js引入索引文件，使得打包的js文件更小。

　　让我们看看没有使用外部设置排除的js卷大小。

　　让我们看看使用externals后排除的大小。

　　明显变小了，在服务器上运行项目的加载速度明显提高了很多。

　　其他优化包括使用vuerouter路由延迟加载，这里不做描述。vuerouter懒惰装载解释。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。