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。