vue项目打包优化

2019年9月15日 224次阅读来源: Andy

问题：项目最初没有使用按需加载，直接引入了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。

    原文作者：Andy
    原文地址: https://segmentfault.com/a/1190000018217393
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。