如何在Vue项目中优化打包体积？其实要解决这个问题也不难，为此小编总结了这篇文章，下面我们一起来看看优化使用webpack打包体积的方法。

引入CDN

在webpack.base.conf.js文件中添加打包排除项：

externals: { 'vue': 'Vue', 'echarts': 'echarts', 'axios': 'axios', 'vuex': 'Vuex' },

然后去掉main.js中的导入，在index.html添加BootCDN的链接：

<link href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script> <script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script> <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>关闭SourceMap生成

在config/index.js中设置：

cssSourceMap: false,productionSourceMap: false,productionGzip: true,路由懒加载

component: (resolve) => require(['../components/Index.vue'], resolve)

看完这篇文章，你们学会在Vue项目中优化打包体积的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读。