脚本宝典收集整理的这篇文章主要介绍了

vue项目打包优化

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

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

总结

以上是脚本宝典为你收集整理的

vue项目打包优化

全部内容,希望文章能够帮你解决

vue项目打包优化

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过