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。