Skip to content

Commit 329a176

Browse files
mynetfanmynetfan
authored
perf: optimize bootstrap modules to speed up first-screen loading (vbenjs#5899)
优化首屏加载速度
1 parent 9379093 commit 329a176

File tree

13 files changed

+311
-115
lines changed

13 files changed

+311
-115
lines changed

‎apps/web-antd/src/adapter/component/index.ts

+54-25
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,64 @@ import type { Component } from 'vue';
88
import type { BaseFormComponentType } from '@vben/common-ui';
99
import type { Recordable } from '@vben/types';
1010

11-
import { defineComponent, getCurrentInstance, h, ref } from 'vue';
11+
import {
12+
defineAsyncComponent,
13+
defineComponent,
14+
getCurrentInstance,
15+
h,
16+
ref,
17+
} from 'vue';
1218

1319
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
1420
import { $t } from '@vben/locales';
1521

16-
import {
17-
AutoComplete,
18-
Button,
19-
Checkbox,
20-
CheckboxGroup,
21-
DatePicker,
22-
Divider,
23-
Input,
24-
InputNumber,
25-
InputPassword,
26-
Mentions,
27-
notification,
28-
Radio,
29-
RadioGroup,
30-
RangePicker,
31-
Rate,
32-
Select,
33-
Space,
34-
Switch,
35-
Textarea,
36-
TimePicker,
37-
TreeSelect,
38-
Upload,
39-
} from 'ant-design-vue';
22+
import { notification } from 'ant-design-vue';
23+
24+
const AutoComplete = defineAsyncComponent(
25+
() => import('ant-design-vue/es/auto-complete'),
26+
);
27+
const Button = defineAsyncComponent(() => import('ant-design-vue/es/button'));
28+
const Checkbox = defineAsyncComponent(
29+
() => import('ant-design-vue/es/checkbox'),
30+
);
31+
const CheckboxGroup = defineAsyncComponent(() =>
32+
import('ant-design-vue/es/checkbox').then((res) => res.CheckboxGroup),
33+
);
34+
const DatePicker = defineAsyncComponent(
35+
() => import('ant-design-vue/es/date-picker'),
36+
);
37+
const Divider = defineAsyncComponent(() => import('ant-design-vue/es/divider'));
38+
const Input = defineAsyncComponent(() => import('ant-design-vue/es/input'));
39+
const InputNumber = defineAsyncComponent(
40+
() => import('ant-design-vue/es/input-number'),
41+
);
42+
const InputPassword = defineAsyncComponent(() =>
43+
import('ant-design-vue/es/input').then((res) => res.InputPassword),
44+
);
45+
const Mentions = defineAsyncComponent(
46+
() => import('ant-design-vue/es/mentions'),
47+
);
48+
const Radio = defineAsyncComponent(() => import('ant-design-vue/es/radio'));
49+
const RadioGroup = defineAsyncComponent(() =>
50+
import('ant-design-vue/es/radio').then((res) => res.RadioGroup),
51+
);
52+
const RangePicker = defineAsyncComponent(() =>
53+
import('ant-design-vue/es/date-picker').then((res) => res.RangePicker),
54+
);
55+
const Rate = defineAsyncComponent(() => import('ant-design-vue/es/rate'));
56+
const Select = defineAsyncComponent(() => import('ant-design-vue/es/select'));
57+
const Space = defineAsyncComponent(() => import('ant-design-vue/es/space'));
58+
const Switch = defineAsyncComponent(() => import('ant-design-vue/es/switch'));
59+
const Textarea = defineAsyncComponent(() =>
60+
import('ant-design-vue/es/input').then((res) => res.Textarea),
61+
);
62+
const TimePicker = defineAsyncComponent(
63+
() => import('ant-design-vue/es/time-picker'),
64+
);
65+
const TreeSelect = defineAsyncComponent(
66+
() => import('ant-design-vue/es/tree-select'),
67+
);
68+
const Upload = defineAsyncComponent(() => import('ant-design-vue/es/upload'));
4069

4170
const withDefaultPlaceholder = <T extends Component>(
4271
component: T,

‎apps/web-antd/src/bootstrap.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createApp, watchEffect } from 'vue';
22

33
import { registerAccessDirective } from '@vben/access';
4-
import { initTippy, registerLoadingDirective } from '@vben/common-ui';
5-
import { MotionPlugin } from '@vben/plugins/motion';
4+
import { registerLoadingDirective } from '@vben/common-ui/es/loading';
65
import { preferences } from '@vben/preferences';
76
import { initStores } from '@vben/stores';
87
import '@vben/styles';
@@ -47,12 +46,14 @@ async function bootstrap(namespace: string) {
4746
registerAccessDirective(app);
4847

4948
// 初始化 tippy
49+
const { initTippy } = await import('@vben/common-ui/es/tippy');
5050
initTippy(app);
5151

5252
// 配置路由及路由守卫
5353
app.use(router);
5454

5555
// 配置Motion插件
56+
const { MotionPlugin } = await import('@vben/plugins/motion');
5657
app.use(MotionPlugin);
5758

5859
// 动态更新标题

‎apps/web-antd/src/router/routes/core.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import type { RouteRecordRaw } from 'vue-router';
22

33
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
44

5-
import { AuthPageLayout, BasicLayout } from '#/layouts';
65
import { $t } from '#/locales';
7-
import Login from '#/views/_core/authentication/login.vue';
86

7+
const BasicLayout = () => import('#/layouts/basic.vue');
8+
const AuthPageLayout = () => import('#/layouts/auth.vue');
99
/** 全局404页面 */
1010
const fallbackNotFoundRoute: RouteRecordRaw = {
1111
component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -50,7 +50,7 @@ const coreRoutes: RouteRecordRaw[] = [
5050
{
5151
name: 'Login',
5252
path: 'login',
53-
component: Login,
53+
component: () => import('#/views/_core/authentication/login.vue'),
5454
meta: {
5555
title: $t('page.auth.login'),
5656
},

‎apps/web-ele/src/adapter/component/index.ts

+111-21
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,121 @@ import type { Component } from 'vue';
88
import type { BaseFormComponentType } from '@vben/common-ui';
99
import type { Recordable } from '@vben/types';
1010

11-
import { defineComponent, getCurrentInstance, h, ref } from 'vue';
11+
import {
12+
defineAsyncComponent,
13+
defineComponent,
14+
getCurrentInstance,
15+
h,
16+
ref,
17+
} from 'vue';
1218

1319
import { ApiComponent, globalShareState, IconPicker } from '@vben/common-ui';
1420
import { $t } from '@vben/locales';
1521

16-
import {
17-
ElButton,
18-
ElCheckbox,
19-
ElCheckboxButton,
20-
ElCheckboxGroup,
21-
ElDatePicker,
22-
ElDivider,
23-
ElInput,
24-
ElInputNumber,
25-
ElNotification,
26-
ElRadio,
27-
ElRadioButton,
28-
ElRadioGroup,
29-
ElSelectV2,
30-
ElSpace,
31-
ElSwitch,
32-
ElTimePicker,
33-
ElTreeSelect,
34-
ElUpload,
35-
} from 'element-plus';
22+
import { ElNotification } from 'element-plus';
23+
24+
const ElButton = defineAsyncComponent(() =>
25+
Promise.all([
26+
import('element-plus/es/components/button/index'),
27+
import('element-plus/es/components/button/style/css'),
28+
]).then(([res]) => res.ElButton),
29+
);
30+
const ElCheckbox = defineAsyncComponent(() =>
31+
Promise.all([
32+
import('element-plus/es/components/checkbox/index'),
33+
import('element-plus/es/components/checkbox/style/css'),
34+
]).then(([res]) => res.ElCheckbox),
35+
);
36+
const ElCheckboxButton = defineAsyncComponent(() =>
37+
Promise.all([
38+
import('element-plus/es/components/checkbox/index'),
39+
import('element-plus/es/components/checkbox-button/style/css'),
40+
]).then(([res]) => res.ElCheckboxButton),
41+
);
42+
const ElCheckboxGroup = defineAsyncComponent(() =>
43+
Promise.all([
44+
import('element-plus/es/components/checkbox/index'),
45+
import('element-plus/es/components/checkbox-group/style/css'),
46+
]).then(([res]) => res.ElCheckboxGroup),
47+
);
48+
const ElDatePicker = defineAsyncComponent(() =>
49+
Promise.all([
50+
import('element-plus/es/components/date-picker/index'),
51+
import('element-plus/es/components/date-picker/style/css'),
52+
]).then(([res]) => res.ElDatePicker),
53+
);
54+
const ElDivider = defineAsyncComponent(() =>
55+
Promise.all([
56+
import('element-plus/es/components/divider/index'),
57+
import('element-plus/es/components/divider/style/css'),
58+
]).then(([res]) => res.ElDivider),
59+
);
60+
const ElInput = defineAsyncComponent(() =>
61+
Promise.all([
62+
import('element-plus/es/components/input/index'),
63+
import('element-plus/es/components/input/style/css'),
64+
]).then(([res]) => res.ElInput),
65+
);
66+
const ElInputNumber = defineAsyncComponent(() =>
67+
Promise.all([
68+
import('element-plus/es/components/input-number/index'),
69+
import('element-plus/es/components/input-number/style/css'),
70+
]).then(([res]) => res.ElInputNumber),
71+
);
72+
const ElRadio = defineAsyncComponent(() =>
73+
Promise.all([
74+
import('element-plus/es/components/radio/index'),
75+
import('element-plus/es/components/radio/style/css'),
76+
]).then(([res]) => res.ElRadio),
77+
);
78+
const ElRadioButton = defineAsyncComponent(() =>
79+
Promise.all([
80+
import('element-plus/es/components/radio/index'),
81+
import('element-plus/es/components/radio-button/style/css'),
82+
]).then(([res]) => res.ElRadioButton),
83+
);
84+
const ElRadioGroup = defineAsyncComponent(() =>
85+
Promise.all([
86+
import('element-plus/es/components/radio/index'),
87+
import('element-plus/es/components/radio-group/style/css'),
88+
]).then(([res]) => res.ElRadioGroup),
89+
);
90+
const ElSelectV2 = defineAsyncComponent(() =>
91+
Promise.all([
92+
import('element-plus/es/components/select-v2/index'),
93+
import('element-plus/es/components/select-v2/style/css'),
94+
]).then(([res]) => res.ElSelectV2),
95+
);
96+
const ElSpace = defineAsyncComponent(() =>
97+
Promise.all([
98+
import('element-plus/es/components/space/index'),
99+
import('element-plus/es/components/space/style/css'),
100+
]).then(([res]) => res.ElSpace),
101+
);
102+
const ElSwitch = defineAsyncComponent(() =>
103+
Promise.all([
104+
import('element-plus/es/components/switch/index'),
105+
import('element-plus/es/components/switch/style/css'),
106+
]).then(([res]) => res.ElSwitch),
107+
);
108+
const ElTimePicker = defineAsyncComponent(() =>
109+
Promise.all([
110+
import('element-plus/es/components/time-picker/index'),
111+
import('element-plus/es/components/time-picker/style/css'),
112+
]).then(([res]) => res.ElTimePicker),
113+
);
114+
const ElTreeSelect = defineAsyncComponent(() =>
115+
Promise.all([
116+
import('element-plus/es/components/tree-select/index'),
117+
import('element-plus/es/components/tree-select/style/css'),
118+
]).then(([res]) => res.ElTreeSelect),
119+
);
120+
const ElUpload = defineAsyncComponent(() =>
121+
Promise.all([
122+
import('element-plus/es/components/upload/index'),
123+
import('element-plus/es/components/upload/style/css'),
124+
]).then(([res]) => res.ElUpload),
125+
);
36126

37127
const withDefaultPlaceholder = <T extends Component>(
38128
component: T,

‎apps/web-ele/src/bootstrap.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import { createApp, watchEffect } from 'vue';
22

33
import { registerAccessDirective } from '@vben/access';
4-
import { initTippy, registerLoadingDirective } from '@vben/common-ui';
5-
import { MotionPlugin } from '@vben/plugins/motion';
4+
import { registerLoadingDirective } from '@vben/common-ui';
65
import { preferences } from '@vben/preferences';
76
import { initStores } from '@vben/stores';
87
import '@vben/styles';
@@ -49,12 +48,14 @@ async function bootstrap(namespace: string) {
4948
registerAccessDirective(app);
5049

5150
// 初始化 tippy
51+
const { initTippy } = await import('@vben/common-ui/es/tippy');
5252
initTippy(app);
5353

5454
// 配置路由及路由守卫
5555
app.use(router);
5656

5757
// 配置Motion插件
58+
const { MotionPlugin } = await import('@vben/plugins/motion');
5859
app.use(MotionPlugin);
5960

6061
// 动态更新标题

‎apps/web-ele/src/router/routes/core.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@ import type { RouteRecordRaw } from 'vue-router';
22

33
import { DEFAULT_HOME_PATH, LOGIN_PATH } from '@vben/constants';
44

5-
import { AuthPageLayout, BasicLayout } from '#/layouts';
65
import { $t } from '#/locales';
7-
import Login from '#/views/_core/authentication/login.vue';
86

7+
const BasicLayout = () => import('#/layouts/basic.vue');
8+
const AuthPageLayout = () => import('#/layouts/auth.vue');
99
/** 全局404页面 */
1010
const fallbackNotFoundRoute: RouteRecordRaw = {
1111
component: () => import('#/views/_core/fallback/not-found.vue'),
@@ -50,7 +50,7 @@ const coreRoutes: RouteRecordRaw[] = [
5050
{
5151
name: 'Login',
5252
path: 'login',
53-
component: Login,
53+
component: () => import('#/views/_core/authentication/login.vue'),
5454
meta: {
5555
title: $t('page.auth.login'),
5656
},

0 commit comments

Comments
 (0)