vue项目打包优化

• 问题：项目最初没有使用按需加载，直接引入了echarts和element-ui，打包项目会包含使用不到的模块，chunk包过大，如图：

  

• 解决方案：引入按需加载插件，babel-plugin-component、babel-plugin-equire，做项目优化

• 解决步骤：

  1. 查看不包含echarts，element-ui的项目代码，打包大小

     

  2. 查看不做按需加载，只引入echarts的打包大小

     

  3. 配置babel-plugin-equire，在@/lib/echarts.js中添加，需要引入的echarts组件，引入按需加载echarts后的打包大小

     

     

     

     

  4. 查看不做按需加载，只引入element-ui的打包大小

     

  5. 配置babel-plugin-component，按需加载，element-ui后的打包大小

     

  6. 如上，引入按需加载后，echart约缩小了424kb，element-ui约缩小了590kb。