首页 > 其他分享 >JeecgBoot Vue3前端项目性能优化&按需加载方案

JeecgBoot Vue3前端项目性能优化&按需加载方案

时间:2024-03-11 14:45:49浏览次数:30  
标签:JeecgBoot 3.5 Vue3 组件 优化 打包 加载

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

按需加载改造方法

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

大组件

  • 1、富文本 tinyme
  • 2、Markdown
  • 3、CodeMirror
  • 4、地图数据 src/components/Form/src/utils/Area.ts
  • 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提交

vite编译提速

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

标签:JeecgBoot,3.5,Vue3,组件,优化,打包,加载
From: https://www.cnblogs.com/jeecg158/p/18066036

相关文章

  • 【ChatGPT】JeecgBoot v3.6.3 AI版本发布,企业级低代码平台
    项目介绍JeecgBoot是一款企业级的低代码平台!前后端分离架构SpringBoot2.x,SpringCloud,AntDesign&Vue3,Mybatis-plus,Shiro,JWT支持微服务。强大的代码生成器让前后端代码一键生成!JeecgBoot引领低代码开发模式(OnlineCoding->代码生成->手工MERGE),帮助解决Java项目70%的重复......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • python加载2
    #testInstance.py#导入需要的模块importimportlib#导入模块以动态加载库中的类和函数importsys#导入系统模块,用于操作Python解释器的参数和变量importosimportpkgutil#定义TestInstance类classTestInstance:#初始化方法,当创建TestInstance对象时调......
  • python加载
    #testInstance.py#导入需要的模块importimportlib#导入模块以动态加载库中的类和函数importsys#导入系统模块,用于操作Python解释器的参数和变量importosimportpkgutil#定义TestInstance类classTestInstance:#初始化方法,当创建TestInstance对象时调......
  • MPU6050 memcmp(firmware+ii, cur, this_write)初始化问题|MPU6050固件库加载问题
    使用MPU6050dmp固件库时候报错:MPU6050固件库加载,最后运行到“memcmp(firmware+ii,cur,this_write)”无法通过!从网上查找了相同问题的解答,发现修改了IIcSDA与SCL端口但是头文件的中的宏定义没有修改未修改之前的端口:修改之后的端口:这里在修改宏定义的时候遇到了些问......
  • Vue3学习(二十三)- 保存文档内容正常显示
    写在前面情人节已经接近尾声了,虽然跟我没什么关系,但是我还是很渴望,能遇到一个良人相伴一生。现在时间:内心异常平静,相对吵闹我更喜欢安静的晚上,没人打扰,enjoy自己独处的时间!保存内容显示1、任务拆解读取已保存内容将读取内容在富文本里显示2、读取已保存内容这个很好......
  • 2_类加载子系统
    类加载子系统ClassLoaderJava架构图:2.1类加载器的作用类加载器负责从文件系统或网络中加载Class文件,class文件在文件开头有特定的文件标识。ClassLoader只负责class文件加载,至于它是否可以运行,则由执行引擎(ExecutionEngine)决定。加载的类信息放在一块称之为方法区的空间......
  • vue3开发文档
    技术要求TypeScriptVue31、用Vue+Vue-Router做一个展示网站。网站按页面划分模块,每个页面按section(部分)再划分模块。培养自己的模块化思想。2、用Vue+Vue-Router+Axios做一个带请求的网站。把请求结果放在页面上展示出来。锻炼请求接口的能力,了解前后端分离思想。3、用Vue+Vu......
  • 【vue3】学习对store中数据的使用
    src/store/modules/nav.jsimport{defineStore}from'pinia';import{handleTree}from'@/utils/ruoyi'import{list}from"@/api/nav/node";conststore=defineStore( 'nav', { state:()=>({ nodeList:[]......
  • Vue3 组合函数拖拽
    代码exportfunctionuseDragMouse(dom,container){letcontainerX=0;letcontainerY=0;letstartX=0;letstartY=0;functiondragPage(e){container.value.style.left=e.pageX-startX+containerX+"px";container.valu......