Vue3前端项目性能优化与按需加载方案:JeecgBoot实践

发表时间: 2024-03-05 17:04

JeecgBoot vue3 前端项目在 3.5.5 版本之前,的确存在很严重的性能问题,大家可以参考以下文档进行升级

按需加载改造方法

  • 1、全局注册地方去掉
  • 2、组件改成异步注册
  • 3、用不到的大组件可以删掉 【精简项目方案】

大组件

  • 1、富文本 tinyme
  • 2、Markdown
  • 3、CodeMirror
  • 5、JVxeTable 表格
  • 6、仪表盘
  • 7、地图数据 china-area-data
  • 8、antd 资源按需加载
  • 9、popup

组件分析: https://note.youdao.com/s/YKUzG66H

jeecgboot 3.5.5 性能优化方案

如何你是 jeecgboot 3.5.5 之前的 VUE3 版本,可以参考我们已做过的优化进行改造

  • 1、按需加载改造
  • 2、UnoCSS 替代 windicss
  • 3、升级 vite4
  • 4、build 打包拆分

PR 提交

  • 首屏缩短至 10 秒多 & 打包时间缩短至一半,升级 vite4 和 vue3.3
  • 打包优化默认 index 太大,自定义拆包策略
  • UnoCSS 替代 windicss,Windi CSS 导致 vite 变慢
  • 生产环境字典慢的问题

详细文档:
https://help.jeecg.com/optimizationPlan.html

vite 编译提速

  • 1、关闭 mock
  • 2、删除 online 单元测试
  • 3、删除甘特图
  • 4、tinymce code 组件,精简配置
  • 5、行编辑不全局注册
  • 6、处理::v-deep