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

    clipboard.png

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

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

      clipboard.png

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

      clipboard.png

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

      clipboard.png

      clipboard.png

      clipboard.png

      clipboard.png

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

      clipboard.png

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

      clipboard.png

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

本文固定链接: http://www.js-code.com/vue-js/vue-js_25152.html