标签：

使用Vue开发的项目在用Webpack打包之后vender和app这两个js文件可能很大，而且有很多的map文件，，其体积也不小，那么如何优化打包后体积呢？

引入CDN

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

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

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

<link href="http://www.mamicode.com/https:/cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css"> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/vue/2.6.10/vue.min.js"></script> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/vuex/3.1.1/vuex.min.js"></script> <script src="http://www.mamicode.com/https:/cdn.bootcss.com/echarts/4.4.0-rc.1/echarts.min.js"></script> <script src="http://www.mamicode.com/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项目使用Webpack打包体积优化