github
/
jeecg-boot-vue3
mirror of https://github.com/jeecgboot/jeecgboot-vue3
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

pull/1164/head
JEECG 2024-03-18 10:44:12 +08:00
parent 90613d9b67
commit e1e3d04629
8 changed files with 109 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/Form/src/componentMap.ts
View File

@ -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 JMarkdownEditor from './jeecg/components/JMarkdownEditor.vue';
// import JEditor from './jeecg/components/JEditor.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('JMarkdownEditor', JMarkdownEditor);
componentMap.set(
'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);

8
src/components/JVxeCustom/index.ts
View File

@ -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'))
);
}

2
src/components/jeecg/JVxeTable/index.ts
View File

@ -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';

13
src/components/jeecg/JVxeTable/src/utils/registerUtils.ts
View File

@ -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自定义组件
*

15
src/components/registerGlobComp.ts
View File

@ -1,8 +1,8 @@
import type { App } from 'vue';
import { Icon } from './Icon';
import AIcon from '/@/components/jeecg/AIcon.vue';
//Tinymce富文本
import Editor from '/@/components/Tinymce/src/Editor.vue'
// //Tinymce富文本
// 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等组件--------------")
}

23
src/settings/registerThirdComp.ts
View File

@ -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');

24
src/views/system/message/components/SysMessageModal.vue
View File

@ -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);
}
@ -279,6 +282,21 @@
searchParams.fromUser = ''
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='';

9
vite.config.ts
View File

@ -82,13 +82,12 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
entryFileNames: 'js/[name]-[hash].js', // 包的入口文件名称
// manualChunks配置 (依赖包从大到小排列)
manualChunks: {
'tinymce-vendor': ['tinymce','@tinymce/tinymce-vue'],
'echarts-vendor': ['echarts'],
// vue vue-router合并打包
'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'],
'jeecg-online-vendor': ['@jeecg/online'],
'cron-parser-vendor': ['cron-parser'],
'emoji-mart-vue-fast': ['emoji-mart-vue-fast'],
'china-area-data-vendor': ['china-area-data']
},
},
},