Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 5a9d089

Browse files
reduce bundle size and lazy load components
1 parent a0fd241 commit 5a9d089

File tree

20 files changed

+10729
-383
lines changed

20 files changed

+10729
-383
lines changed

‎client/packages/lowcoder-sdk/analyse.html‎

Lines changed: 4842 additions & 0 deletions
Large diffs are not rendered by default.

‎client/packages/lowcoder-sdk/vite.config.mts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import { defineConfig, UserConfig } from "vite";
1+
import { defineConfig, PluginOption,UserConfig } from "vite";
22
import react from "@vitejs/plugin-react";
33
import viteTsconfigPaths from "vite-tsconfig-paths";
44
import svgrPlugin from "vite-plugin-svgr";
55
import path from "path";
66
import { ensureLastSlash } from "./src/dev-utils/util";
77
import { buildVars } from "./src/dev-utils/buildVars";
88
import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
9+
import { visualizer } from "rollup-plugin-visualizer";
10+
11+
const isVisualizerEnabled = true; //!!process.env.ENABLE_VISUALIZER;
912

1013
const define = {};
1114
buildVars.forEach(({ name, defaultValue }) => {
@@ -40,6 +43,11 @@ export const viteConfig: UserConfig = {
4043
external: ["react", "react-dom"],
4144
output: {
4245
chunkFileNames: "[hash].js",
46+
manualChunks(id) {
47+
if (id.includes('node_modules')) {
48+
return id.toString().split('node_modules/')[1].split('/')[0].toString();
49+
}
50+
}
4351
},
4452
},
4553
commonjsOptions: {
@@ -97,6 +105,13 @@ export const viteConfig: UserConfig = {
97105
ref: true,
98106
},
99107
}),
108+
isVisualizerEnabled && visualizer({
109+
template: "treemap", // or sunburst
110+
open: true,
111+
gzipSize: true,
112+
brotliSize: true,
113+
filename: "analyse.html"
114+
}) as PluginOption,
100115
],
101116
};
102117

‎client/packages/lowcoder/analyse.html‎

Lines changed: 4842 additions & 0 deletions
Large diffs are not rendered by default.

‎client/packages/lowcoder/src/app.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,6 @@ import LazyRoute from "components/LazyRoute";
3636
import AppFromTemplate from "pages/ApplicationV2/AppFromTemplate";
3737
import AppEditor from "pages/editor/AppEditor";
3838
import { getAntdLocale } from "i18n/antdLocale";
39-
import { CodeEditorTooltipContainer } from "base/codeEditor/codeEditor";
4039
import { ProductLoading } from "components/ProductLoading";
4140
import { language, trans } from "i18n";
4241
import { loadComps } from "comps";

‎client/packages/lowcoder/src/comps/comps/allComp.test.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,12 @@ const COMPS_MAP = {
6363
tableColumnRender: RenderComp,
6464
} as Record<string, CompConstructor>;
6565

66-
Object.entries(uiCompRegistry).forEach(([key, value]) => {
67-
COMPS_MAP["ui_" + key] = value.comp;
66+
Object.entries(uiCompRegistry).forEach(async ([key, value]) => {
67+
if(value.lazyLoad) {
68+
COMPS_MAP["ui_" + key] = await import(value.compPath!);
69+
} else {
70+
COMPS_MAP["ui_" + key] = value.comp!;
71+
}
6872
});
6973
Object.keys(QueryMap).forEach((key) => {
7074
COMPS_MAP["query_" + key] = (QueryMap as Record<string, CompConstructor>)[key];

‎client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ const onFlyDrop = (layout: Layout, items: Layout, dispatch: DispatchType) => {
193193
}
194194
};
195195

196-
const onDrop = (
196+
const onDrop = async(
197197
layout: Layout,
198198
items: Layout,
199199
event: DragEvent<HTMLElement>,
@@ -220,7 +220,19 @@ const onDrop = (
220220
const nameGenerator = editorState.getNameGenerator();
221221
const compInfo = parseCompType(compType);
222222
const compName = nameGenerator.genItemName(compInfo.compName);
223-
const defaultDataFn = uiCompRegistry[compType as UICompType]?.defaultDataFn;
223+
// const defaultDataFn = uiCompRegistry[compType as UICompType]?.defaultDataFn;
224+
const {
225+
defaultDataFnName,
226+
defaultDataFnPath,
227+
} = uiCompRegistry[compType as UICompType];
228+
229+
let defaultDataFn = undefined;
230+
if(defaultDataFnName && defaultDataFnPath) {
231+
const module = await import(defaultDataFnPath);
232+
defaultDataFn = module[defaultDataFnName];
233+
}
234+
console.log(defaultDataFn);
235+
224236
const widgetValue: GridItemDataType = {
225237
compType,
226238
name: compName,

‎client/packages/lowcoder/src/comps/comps/gridItemComp.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { profilerCallback } from "util/cacheUtils";
2323
import { setFieldsNoTypeCheck, shallowEqual } from "util/objectUtils";
2424
import { remoteComp } from "./remoteComp/remoteComp";
2525
import { SimpleNameComp } from "./simpleNameComp";
26+
import { lazyLoadComp } from "./lazyLoadComp/lazyLoadComp";
2627

2728
export function defaultLayout(compType: UICompType): UICompLayoutInfo {
2829
return uiCompRegistry[compType]?.layoutInfo ?? { w: 5, h: 5 };
@@ -37,6 +38,7 @@ const TmpComp = withTypeAndChildren<
3738
ToInstanceType<typeof childrenMap>
3839
>(
3940
(type) => {
41+
console.log('type', type);
4042
const compInfo = parseCompType(type);
4143
if (compInfo.isRemote) {
4244
return remoteComp(compInfo);
@@ -46,8 +48,15 @@ const TmpComp = withTypeAndChildren<
4648
if (name !== type) {
4749
continue;
4850
}
49-
const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp);
50-
return withErrorBoundary(comp) as ExposingMultiCompConstructor;
51+
console.log(manifest);
52+
if(manifest.lazyLoad) {
53+
return lazyLoadComp(
54+
manifest.compName,
55+
manifest.compPath,
56+
);
57+
}
58+
const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
59+
return withErrorBoundary(comp!) as ExposingMultiCompConstructor;
5160
}
5261
},
5362
"button",
Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { ExecuteAction } from "comps/controls/actionSelector/executeCompTypes";
2+
import { simpleMultiComp, valueComp } from "comps/generators";
3+
import { withSimpleExposing } from "comps/generators/withExposing";
4+
import { withMethodExposing } from "comps/generators/withMethodExposing";
5+
import { evalAndReduce } from "comps/utils";
6+
import { customAction } from "lowcoder-core";
7+
import { RemoteCompInfo } from "types/remoteComp";
8+
import { lazyLoadComp } from "./lazyLoadComp";
9+
10+
const npmRemoteInfo: RemoteCompInfo = {
11+
isRemote: true,
12+
source: "npm",
13+
packageName: "p",
14+
packageVersion: "v",
15+
compName: "n",
16+
};
17+
18+
let TestComp = simpleMultiComp({ hello: valueComp<number>(123) });
19+
TestComp = withSimpleExposing(TestComp, (comp) => {
20+
return {
21+
hello: comp.children.hello.getView(),
22+
};
23+
});
24+
TestComp = withMethodExposing(TestComp, [
25+
{
26+
method: {
27+
name: "add",
28+
params: [{ name: "value", type: "number" }],
29+
},
30+
execute: (comp, values) => {
31+
const hello = comp.children.hello;
32+
hello.dispatchChangeValueAction(hello.getView() + (values[0] as number));
33+
},
34+
},
35+
]);
36+
export {
37+
TestComp,
38+
};
39+
40+
// const RComp = lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
41+
42+
test("lazyload comp", async () => {
43+
let c: any = null;
44+
const RComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
45+
c = new RComp({
46+
dispatch: (action) => {
47+
if (c) {
48+
c = c.reduce(action);
49+
}
50+
},
51+
});
52+
53+
expect(c.toJsonValue()).toBe(undefined);
54+
await c.load();
55+
expect(c.toJsonValue()).toBe(123);
56+
57+
c.dispatchChangeValueAction(345);
58+
expect(c.toJsonValue()).toBe(345);
59+
});
60+
61+
test("lazyload comp keep values", async () => {
62+
let c: any = null;
63+
const RComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
64+
c = new RComp({
65+
dispatch: (action) => {
66+
if (c) {
67+
c = c.reduce(action);
68+
}
69+
},
70+
value: 456,
71+
});
72+
73+
expect(c.toJsonValue()).toBe(456);
74+
await c.load();
75+
expect(c.toJsonValue()).toBe(456);
76+
});
77+
78+
test("lazyload comp exposing data", async () => {
79+
// const EComp = lazyLoadComp('comp-path', async () => {
80+
// return withSimpleExposing(simpleMultiComp({ hello: valueComp(123) }), (comp) => {
81+
// return {
82+
// hello: comp.children.hello.getView(),
83+
// };
84+
// });
85+
// });
86+
const EComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
87+
88+
let c: any = null;
89+
c = new EComp({
90+
dispatch: (action) => {
91+
if (c) {
92+
c = c.reduce(action);
93+
}
94+
},
95+
});
96+
97+
await c.load();
98+
const c1 = evalAndReduce(c);
99+
expect(c1.exposingValues.hello).toBe(123);
100+
});
101+
102+
test("lazyload comp execute method", async () => {
103+
// const MComp = lazyLoadComp('comp-path', async () => {
104+
// return withMethodExposing(simpleMultiComp({ hello: valueComp<number>(123) }), [
105+
// {
106+
// method: {
107+
// name: "add",
108+
// params: [{ name: "value", type: "number" }],
109+
// },
110+
// execute: (comp, values) => {
111+
// const hello = comp.children.hello;
112+
// hello.dispatchChangeValueAction(hello.getView() + (values[0] as number));
113+
// },
114+
// },
115+
// ]);
116+
// });
117+
const MComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
118+
let c: any = null;
119+
c = new MComp({
120+
dispatch: (action) => {
121+
if (c) {
122+
c = c.reduce(action);
123+
}
124+
},
125+
});
126+
127+
await c.load();
128+
c.reduce(
129+
customAction<ExecuteAction>(
130+
{
131+
type: "execute",
132+
methodName: "add",
133+
params: [10],
134+
},
135+
false
136+
)
137+
);
138+
await new Promise((r) => setTimeout(r, 20));
139+
expect(c.children.hello.getView()).toEqual(133);
140+
});

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /