使用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的链接:

 
  
  
  
  

关闭SourceMap生成

在config/index.js中设置:

cssSourceMap: false,
productionSourceMap: false,
productionGzip: true,

路由懒加载

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