【性能优化】大组件改成按需加载

src/components/Form/src/componentMap.ts

@@ -1,6 +1,14 @@
+/**
+ * 目前实现了异步加载的组件清单 ：
+ * JAreaLinkage
+ * JEditor
+ * JMarkdownEditor
+ * JCodeEditor
+ * JEasyCron
+ */
 import type { Component } from 'vue';
 import type { ComponentType } from './types/index';
-
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 /**
  * Component list, register here to setting it in the form
  */
@@ -29,7 +37,7 @@ import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
 import { CountdownInput } from '/@/components/CountDown';
 //自定义组件
-import JAreaLinkage from './jeecg/components/JAreaLinkage.vue';
+// import JAreaLinkage from './jeecg/components/JAreaLinkage.vue';
 import JSelectUser from './jeecg/components/JSelectUser.vue';
 import JSelectPosition from './jeecg/components/JSelectPosition.vue';
 import JSelectRole from './jeecg/components/JSelectRole.vue';
@@ -37,10 +45,10 @@ import JImageUpload from './jeecg/components/JImageUpload.vue';
 import JDictSelectTag from './jeecg/components/JDictSelectTag.vue';
 import JSelectDept from './jeecg/components/JSelectDept.vue';
 import JAreaSelect from './jeecg/components/JAreaSelect.vue';
-import JEditor from './jeecg/components/JEditor.vue';
+// import JEditor from './jeecg/components/JEditor.vue';
-import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue';
+// import JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue';
 import JSelectInput from './jeecg/components/JSelectInput.vue';
-import JCodeEditor from './jeecg/components/JCodeEditor.vue';
+// import JCodeEditor from './jeecg/components/JCodeEditor.vue';
 import JCategorySelect from './jeecg/components/JCategorySelect.vue';
 import JSelectMultiple from './jeecg/components/JSelectMultiple.vue';
 import JPopup from './jeecg/components/JPopup.vue';
@@ -50,7 +58,7 @@ import JPopupDict from './jeecg/components/JPopupDict.vue';
 import JSwitch from './jeecg/components/JSwitch.vue';
 import JTreeDict from './jeecg/components/JTreeDict.vue';
 import JInputPop from './jeecg/components/JInputPop.vue';
-import { JEasyCron } from './jeecg/components/JEasyCron';
+// import { JEasyCron } from './jeecg/components/JEasyCron';
 import JCheckbox from './jeecg/components/JCheckbox.vue';
 import JInput from './jeecg/components/JInput.vue';
 import JTreeSelect from './jeecg/components/JTreeSelect.vue';
@@ -104,7 +112,10 @@ componentMap.set('Upload', BasicUpload);
 componentMap.set('Divider', Divider);
 
 //注册自定义组件
-componentMap.set('JAreaLinkage', JAreaLinkage);
+componentMap.set(
+  'JAreaLinkage',
+  createAsyncComponent(() => import('./jeecg/components/JAreaLinkage.vue'))
+);
 componentMap.set('JSelectPosition', JSelectPosition);
 componentMap.set('JSelectUser', JSelectUser);
 componentMap.set('JSelectRole', JSelectRole);
@@ -112,10 +123,19 @@ componentMap.set('JImageUpload', JImageUpload);
 componentMap.set('JDictSelectTag', JDictSelectTag);
 componentMap.set('JSelectDept', JSelectDept);
 componentMap.set('JAreaSelect', JAreaSelect);
-componentMap.set('JEditor', JEditor);
+componentMap.set(
-componentMap.set('JMarkdownEditor', JMarkdownEditor);
+  'JEditor',
+  createAsyncComponent(() => import('./jeecg/components/JEditor.vue'))
+);
+componentMap.set(
+  'JMarkdownEditor',
+  createAsyncComponent(() => import('./jeecg/components/JMarkdownEditor.vue'))
+);
 componentMap.set('JSelectInput', JSelectInput);
-componentMap.set('JCodeEditor', JCodeEditor);
+componentMap.set(
+  'JCodeEditor',
+  createAsyncComponent(() => import('./jeecg/components/JCodeEditor.vue'))
+);
 componentMap.set('JCategorySelect', JCategorySelect);
 componentMap.set('JSelectMultiple', JSelectMultiple);
 componentMap.set('JPopup', JPopup);
@@ -125,7 +145,10 @@ componentMap.set('JPopupDict', JPopupDict);
 componentMap.set('JSwitch', JSwitch);
 componentMap.set('JTreeDict', JTreeDict);
 componentMap.set('JInputPop', JInputPop);
-componentMap.set('JEasyCron', JEasyCron);
+componentMap.set(
+  'JEasyCron',
+  createAsyncComponent(() => import('./jeecg/components/JEasyCron/EasyCronInput.vue'))
+);
 componentMap.set('JCheckbox', JCheckbox);
 componentMap.set('JInput', JInput);
 componentMap.set('JTreeSelect', JTreeSelect);

src/components/JVxeCustom/index.ts

@@ -1,6 +1,7 @@
-import { registerComponent, registerAsyncComponent } from '/@/components/jeecg/JVxeTable';
+import { registerComponent, registerAsyncComponent, registerASyncComponentReal } from '/@/components/jeecg/JVxeTable';
 import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
 import { DictSearchSpanCell, DictSearchInputCell } from './src/components/JVxeSelectDictSearchCell';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 export async function registerJVxeCustom() {
   // ----------------- ⚠ 注意事项 ⚠ -----------------
@@ -23,5 +24,8 @@ export async function registerJVxeCustom() {
   // 注册【部门选择】组件
   await registerAsyncComponent(JVxeTypes.departSelect, import('./src/components/JVxeDepartSelectCell.vue'));
   // 注册【省市区选择】组件
-  await registerAsyncComponent(JVxeTypes.pca, import('./src/components/JVxePcaCell.vue'));
+  registerASyncComponentReal(
+    JVxeTypes.pca,
+    createAsyncComponent(() => import('./src/components/JVxePcaCell.vue'))
+  );
 }

src/components/jeecg/JVxeTable/index.ts

@@ -1,4 +1,4 @@
 export { default as JVxeTable } from './src/JVxeTable';
 export { registerJVxeTable } from './src/install';
 export { deleteComponent } from './src/componentMap';
-export { registerComponent, registerAsyncComponent } from './src/utils/registerUtils';
+export { registerComponent, registerAsyncComponent, registerASyncComponentReal } from './src/utils/registerUtils';

src/components/jeecg/JVxeTable/src/utils/registerUtils.ts

@@ -17,6 +17,19 @@ export function isRegistered(type: JVxeTypes | string) {
   return componentMap.has(type);
 }
 
+/**
+ * 2024-03-08
+ * liaozhiyang
+ * 异步注册vxe自定义组件
+ * 【QQYUN-8241】
+ * @param type
+ * @param promise
+ */
+export function registerASyncComponentReal(type: JVxeTypes, component) {
+  addComponent(type, component);
+  registerOneComponent(type);
+}
+
 /**
  * 注册vxe自定义组件
  *

src/components/registerGlobComp.ts

@@ -1,8 +1,8 @@
 import type { App } from 'vue';
 import { Icon } from './Icon';
 import AIcon from '/@/components/jeecg/AIcon.vue';
-//Tinymce富文本
+// //Tinymce富文本
-import Editor from '/@/components/Tinymce/src/Editor.vue'
+// import Editor from '/@/components/Tinymce/src/Editor.vue'
 
 import { Button, JUploadButton } from './Button';
 
@@ -61,6 +61,7 @@ import {
 } from 'ant-design-vue';
 const compList = [AntButton.Group, Icon, AIcon, JUploadButton];
 
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 export function registerGlobComp(app: App) {
   compList.forEach((comp) => {
@@ -68,7 +69,13 @@ export function registerGlobComp(app: App) {
   });
   
   //仪表盘依赖Tinymce，需要提前加载（没办法按需加载了）
-  app.component(Editor.name, Editor);
+  //app.component(Editor.name, Editor);
+  app.component(
+    'Tinymce',
+    createAsyncComponent(() => import('./Tinymce/src/Editor.vue'), {
+      loading: true,
+    })
+  );
   
   app.use(Select)
     .use(Alert)
@@ -119,5 +126,5 @@ export function registerGlobComp(app: App) {
     .use(Cascader)
     .use(Rate)
     .use(Progress);
-    console.log("---初始化---， 全局注册Antd、仪表盘、流程设计器、online、流程等组件--------------")
+    console.log("---初始化---全局注册Antd等组件--------------")
 }

src/settings/registerThirdComp.ts

@@ -2,12 +2,13 @@ import type { App } from 'vue';
 import { registerJVxeTable } from '/@/components/jeecg/JVxeTable';
 import { registerJVxeCustom } from '/@/components/JVxeCustom';
 
-// 注册全局聊天表情包
+// // 注册全局聊天表情包
-import { Picker } from 'emoji-mart-vue-fast/src';
+// import { Picker } from 'emoji-mart-vue-fast/src';
 // 注册全局dayjs
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
 
 export async function registerThirdComp(app: App) {
   //---------------------------------------------------------------------
@@ -17,8 +18,22 @@ export async function registerThirdComp(app: App) {
   await registerJVxeCustom();
   //---------------------------------------------------------------------
   // 注册全局聊天表情包
-  app.component('Picker', Picker);
+  //app.component('Picker', Picker);
-  
+  app.component(
+    'Picker',
+    createAsyncComponent(() => {
+      return new Promise((resolve, rejected) => {
+        import('emoji-mart-vue-fast/src')
+          .then((res) => {
+            const { Picker } = res;
+            resolve(Picker);
+          })
+          .catch((err) => {
+            rejected(err);
+          });
+      });
+    })
+  );
   //---------------------------------------------------------------------
   // 注册全局dayjs
   dayjs.locale('zh-cn');

src/views/system/message/components/SysMessageModal.vue

@@ -124,9 +124,10 @@
   import { FilterOutlined, CloseOutlined, BellFilled, ExclamationOutlined, PlusOutlined } from '@ant-design/icons-vue';
   import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
   import { ref, unref, reactive, computed } from 'vue';
-  import SysMessageList from './SysMessageList.vue'
+  // import SysMessageList from './SysMessageList.vue'
   import UserSelectModal from '/@/components/Form/src/jeecg/components/modal/UserSelectModal.vue'
   import DetailModal from '/@/views/monitor/mynews/DetailModal.vue';
+  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
   
   export default {
     name: 'SysMessageModal',
@@ -137,7 +138,7 @@
       BellFilled,
       ExclamationOutlined,
       JSelectUser,
-      SysMessageList,
+      SysMessageList: createAsyncComponent(() => import('./SysMessageList.vue')),
       UserSelectModal,
       PlusOutlined,
       DetailModal
@@ -170,7 +171,9 @@
           rangeDate: searchParams.rangeDate,
         }
         if(activeKey.value == 'all'){
-          allMessageRef.value.reload(params);
+          getRefPromise(allMessageRef).then(() => {
+            allMessageRef.value.reload(params);
+          });
         }else{
           starMessageRef.value.reload(params);
         }
@@ -280,6 +283,21 @@
         searchParams.realname = ''
       }
 
+      function getRefPromise(componentRef) {
+        return new Promise((resolve) => {
+          (function next() {
+            let ref = componentRef.value;
+            if (ref) {
+              resolve(ref);
+            } else {
+              setTimeout(() => {
+                next();
+              }, 100);
+            }
+          })();
+        });
+      }
+      
       function clearAll(){
         searchParams.fromUser='';
         searchParams.realname='';

vite.config.ts

@@ -82,13 +82,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
           entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
           // manualChunks配置 (依赖包从大到小排列)
           manualChunks: {
-            'tinymce-vendor': ['tinymce','@tinymce/tinymce-vue'],
+            // vue vue-router合并打包
-            'echarts-vendor': ['echarts'],
+            'vue-vendor': ['vue', 'vue-router'],
             'antd-vue-vendor': ['ant-design-vue','@ant-design/icons-vue','@ant-design/colors'],
             'vxe-table-vendor': ['vxe-table','vxe-table-plugin-antd','xe-utils'],
-            'codemirror-vendor': ['codemirror'],
+            'emoji-mart-vue-fast': ['emoji-mart-vue-fast'],
-            'jeecg-online-vendor': ['@jeecg/online'],
+            'china-area-data-vendor': ['china-area-data']
-            'cron-parser-vendor': ['cron-parser'],
           },
         },
       },