Skip to content

Commit 7d87e4f

Browse files
raheeliftikhar5raheeliftikhar5
committed
lazy load routes and components
1 parent 03cbba7 commit 7d87e4f

File tree

26 files changed

+201
-156
lines changed

26 files changed

+201
-156
lines changed

‎client/packages/lowcoder-design/src/components/iconSelect/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
22
import type { IconDefinition } from "@fortawesome/free-regular-svg-icons";
33
// import type { IconDefinition as IconDefinitionBrands } from "@fortawesome/free-brands-svg-icons";
4-
import { Popover } from "antd/es/popover";
5-
import { ActionType } from "@rc-component/trigger/lib/interface";
4+
import { default as Popover } from "antd/es/popover";
5+
import type { ActionType } from "@rc-component/trigger/lib/interface";
66
import { TacoInput } from "components/tacoInput";
77
import { Tooltip } from "components/toolTip";
88
import { trans } from "i18n/design";
9-
import _ from "lodash";
9+
import { upperFirst, sortBy } from "lodash";
1010
import {
1111
ReactNode,
1212
useEffect,
@@ -140,7 +140,7 @@ class Icon {
140140
readonly title: string;
141141
constructor(readonly def: IconDefinition | any, readonly names: string[]) {
142142
if (def?.iconName) {
143-
this.title = def.iconName.split("-").map(_.upperFirst).join(" ");
143+
this.title = def.iconName.split("-").map(upperFirst).join(" ");
144144
} else {
145145
this.title = names[0].slice(5);
146146
this.def = def;
@@ -230,7 +230,7 @@ function search(
230230
.toLowerCase()
231231
.split(/\s+/g)
232232
.filter((t) => t);
233-
return _.sortBy(
233+
return sortBy(
234234
Object.entries(allIcons).filter(([key, icon]) => {
235235
if (icon.names.length === 0) {
236236
return false;

‎client/packages/lowcoder-design/src/icons/antIcon.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -788,7 +788,7 @@ import {
788788
ZhihuSquareFilled,
789789
ZoomInOutlined,
790790
ZoomOutOutlined,
791-
} from "@ant-design/icons/es";
791+
} from "@ant-design/icons";
792792

793793
export const ANTDICON = {
794794
accountbookfilled: <AccountBookFilled />,

‎client/packages/lowcoder-sdk/webpack.config.cjs‎

Lines changed: 39 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -190,15 +190,18 @@ module.exports = {
190190
})],
191191
sideEffects: true,
192192
splitChunks: {
193-
cacheGroups: {
194-
vendor: {
195-
test: /[\\/]node_modules[\\/]/,
196-
name: 'vendors',
197-
chunks: 'all',
198-
},
199-
},
193+
chunks: 'all',
200194
},
201195
// splitChunks: {
196+
// cacheGroups: {
197+
// vendor: {
198+
// test: /[\\/]node_modules[\\/]/,
199+
// name: 'vendors',
200+
// chunks: 'all',
201+
// },
202+
// },
203+
// },
204+
// splitChunks: {
202205
// chunks: 'all',
203206
// minSize: 10000,
204207
// minRemainingSize: 0,
@@ -207,63 +210,42 @@ module.exports = {
207210
// maxInitialRequests: 30,
208211
// enforceSizeThreshold: 50000,
209212
// cacheGroups: {
210-
// defaultVendors: {
211-
// test: /[\\/]node_modules[\\/]/,
212-
// priority: -10,
213-
// reuseExistingChunk: true,
214-
// },
215213
// default: {
216214
// minChunks: 2,
217215
// priority: -20,
218216
// reuseExistingChunk: true,
219217
// },
218+
// defaultVendors: {
219+
// test: /[\\/]node_modules[\\/]/,
220+
// priority: -10,
221+
// reuseExistingChunk: true,
222+
// // name(module) {
223+
// // // get the name. E.g. node_modules/packageName/not/this/part.js
224+
// // // or node_modules/packageName
225+
// // const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
226+
// // // if (packageName === 'antd') {
227+
// // // return 'antd';
228+
// // // }
229+
// // // if (packageName === 'antd-mobile') {
230+
// // // return 'antd-mobile';
231+
// // // }
232+
// // // if (packageName === 'lodash') {
233+
// // // return 'lodash';
234+
// // // }
235+
// // // if (packageName === 'moment') {
236+
// // // return 'moment';
237+
// // // }
238+
// // // if (packageName === 'dayjs') {
239+
// // // return 'dayjs';
240+
// // // }
241+
// // // npm package names are URL-safe, but some servers don't like @ symbols
242+
// // // return `npm.${packageName.replace('@', '')}`;
243+
// // // return `npm.${packageName.replace('@', '')}`;
244+
// // return `vendor`;
245+
// // },
246+
// },
220247
// },
221248
// },
222-
splitChunks: {
223-
chunks: 'all',
224-
minSize: 10000,
225-
minRemainingSize: 0,
226-
minChunks: 1,
227-
maxAsyncRequests: 30,
228-
maxInitialRequests: 30,
229-
enforceSizeThreshold: 50000,
230-
cacheGroups: {
231-
default: {
232-
minChunks: 2,
233-
priority: -20,
234-
reuseExistingChunk: true,
235-
},
236-
defaultVendors: {
237-
test: /[\\/]node_modules[\\/]/,
238-
priority: -10,
239-
reuseExistingChunk: true,
240-
// name(module) {
241-
// // get the name. E.g. node_modules/packageName/not/this/part.js
242-
// // or node_modules/packageName
243-
// const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
244-
// // if (packageName === 'antd') {
245-
// // return 'antd';
246-
// // }
247-
// // if (packageName === 'antd-mobile') {
248-
// // return 'antd-mobile';
249-
// // }
250-
// // if (packageName === 'lodash') {
251-
// // return 'lodash';
252-
// // }
253-
// // if (packageName === 'moment') {
254-
// // return 'moment';
255-
// // }
256-
// // if (packageName === 'dayjs') {
257-
// // return 'dayjs';
258-
// // }
259-
// // npm package names are URL-safe, but some servers don't like @ symbols
260-
// // return `npm.${packageName.replace('@', '')}`;
261-
// // return `npm.${packageName.replace('@', '')}`;
262-
// return `vendor`;
263-
// },
264-
},
265-
},
266-
},
267249
runtimeChunk: 'single',
268250
// splitChunks: {
269251
// chunks: 'all',

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

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,20 @@ import React from "react";
2828
import { createRoot } from "react-dom/client";
2929
import { Helmet } from "react-helmet";
3030
import { connect, Provider } from "react-redux";
31-
import { Redirect, Route, Router, Switch } from "react-router-dom";
32-
import { AppState } from "redux/reducers";
31+
import { Redirect, Router, Switch } from "react-router-dom";
32+
import type { AppState } from "redux/reducers";
3333
import { fetchConfigAction } from "redux/reduxActions/configActions";
3434
import { fetchUserAction } from "redux/reduxActions/userActions";
3535
import { reduxStore } from "redux/store/store";
3636
import { developEnv } from "util/envUtils";
3737
import history from "util/history";
3838
import LazyRoute from "components/LazyRoute";
39-
import AppFromTemplate from "pages/ApplicationV2/AppFromTemplate";
40-
import AppEditor from "pages/editor/AppEditor";
4139
import { getAntdLocale } from "i18n/antdLocale";
42-
// import { CodeEditorTooltipContainer } from "base/codeEditor/codeEditor";
4340
import { ProductLoading } from "components/ProductLoading";
4441
import { language, trans } from "i18n";
4542
import { loadComps } from "comps";
4643
import { initApp } from "util/commonUtils";
47-
import ApplicationHome from "./pages/ApplicationV2";
48-
import { favicon } from "@lowcoder-ee/assets/images";
44+
import { favicon } from "assets/images";
4945
import { hasQueryParam } from "util/urlUtils";
5046
import { isFetchUserFinished } from "redux/selectors/usersSelectors";
5147
import { SystemWarning } from "./components/SystemWarning";
@@ -57,6 +53,9 @@ const LazyUserAuthComp = React.lazy(() => import("pages/userAuth"));
5753
const LazyInviteLanding = React.lazy(() => import("pages/common/inviteLanding"));
5854
const LazyComponentDoc = React.lazy(() => import("pages/ComponentDoc"));
5955
const LazyComponentPlayground = React.lazy(() => import("pages/ComponentPlayground"));
56+
const LazyAppEditor = React.lazy(() => import("pages/editor/AppEditor"));
57+
const LazyAppFromTemplate = React.lazy(() => import("pages/ApplicationV2/AppFromTemplate"));
58+
const LazyApplicationHome = React.lazy(() => import("pages/ApplicationV2"));
6059
const LazyDebugComp = React.lazy(() => import("./debug"));
6160
const LazyDebugNewComp = React.lazy(() => import("./debugNew"));
6261

@@ -142,9 +141,9 @@ class AppIndex extends React.Component<AppIndexProps, any> {
142141
to={APPLICATION_VIEW_URL(this.props.defaultHomePage, "view")}
143142
/>
144143
)}
145-
<Route exact path={IMPORT_APP_FROM_TEMPLATE_URL} component={AppFromTemplate} />
146-
<Route path={APP_EDITOR_URL} component={AppEditor} />
147-
<Route
144+
<LazyRoute exact path={IMPORT_APP_FROM_TEMPLATE_URL} component={LazyAppFromTemplate} />
145+
<LazyRoute path={APP_EDITOR_URL} component={LazyAppEditor} />
146+
<LazyRoute
148147
path={[
149148
ALL_APPLICATIONS_URL,
150149
DATASOURCE_CREATE_URL,
@@ -159,7 +158,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
159158
ADMIN_APP_URL,
160159
]}
161160
// component={ApplicationListPage}
162-
component={ApplicationHome}
161+
component={LazyApplicationHome}
163162
/>
164163
<LazyRoute path={USER_AUTH_URL} component={LazyUserAuthComp} />
165164
<LazyRoute path={ORG_AUTH_LOGIN_URL} component={LazyUserAuthComp} />
@@ -173,7 +172,7 @@ class AppIndex extends React.Component<AppIndexProps, any> {
173172
<>
174173
<LazyRoute path="/debug_comp/:name" component={LazyDebugComp} />
175174
<LazyRoute exact path="/debug_comp" component={LazyDebugComp} />
176-
<Route path="/debug_editor" component={AppEditor} />
175+
<LazyRoute path="/debug_editor" component={LazyAppEditor} />
177176
<LazyRoute path="/debug_new" component={LazyDebugNewComp} />
178177
</>
179178
)}

‎client/packages/lowcoder/src/appView/AppViewInstance.tsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
import { ApplicationResp } from "api/applicationApi";
1+
import type { ApplicationResp } from "api/applicationApi";
22
import axios from "axios";
3-
import { RootComp } from "comps/comps/rootComp";
3+
import type { RootComp } from "comps/comps/rootComp";
44
import { setGlobalSettings } from "comps/utils/globalSettings";
55
import { sdkConfig } from "constants/sdkConfig";
6-
import _ from "lodash";
7-
import { Root } from "react-dom/client";
6+
import { get, set, isEqual } from "lodash";
7+
import type { Root } from "react-dom/client";
88
import { StyleSheetManager } from "styled-components";
9-
import { ModuleDSL, ModuleDSLIoInput } from "types/dsl";
10-
import { AppView } from "./AppView";
9+
import type { ModuleDSL, ModuleDSLIoInput } from "types/dsl";
1110
import { API_STATUS_CODES } from "constants/apiConstants";
1211
import { AUTH_LOGIN_URL } from "constants/routesURL";
1312
import { AuthSearchParams } from "constants/authConstants";
14-
import { saveAuthSearchParams } from "@lowcoder-ee/pages/userAuth/authUtils";
13+
import { saveAuthSearchParams } from "pages/userAuth/authUtils";
14+
import { lazy } from "react";
15+
16+
const AppView = lazy(
17+
() => import('./AppView')
18+
.then(module => ({default: module.AppView}))
19+
);
1520

1621
export type OutputChangeHandler<O> = (output: O) => void;
1722
export type EventTriggerHandler = (eventName: string) => void;
@@ -90,7 +95,7 @@ export class AppViewInstance<I = any, O = any> {
9095

9196
if (this.options.moduleInputs && this.isModuleDSL(finalAppDsl)) {
9297
const inputsPath = "ui.comp.io.inputs";
93-
const nextInputs = _.get(finalAppDsl, inputsPath, []).map((i: ModuleDSLIoInput) => {
98+
const nextInputs = get(finalAppDsl, inputsPath, []).map((i: ModuleDSLIoInput) => {
9499
const inputValue = this.options.moduleInputs[i.name];
95100
if (inputValue) {
96101
return {
@@ -103,7 +108,7 @@ export class AppViewInstance<I = any, O = any> {
103108
}
104109
return i;
105110
});
106-
_.set(finalAppDsl, inputsPath, nextInputs);
111+
set(finalAppDsl, inputsPath, nextInputs);
107112
}
108113

109114
return {
@@ -128,7 +133,7 @@ export class AppViewInstance<I = any, O = any> {
128133
return [name, value];
129134
})
130135
);
131-
if (!_.isEqual(this.prevOutputs, outputValue)) {
136+
if (!isEqual(this.prevOutputs, outputValue)) {
132137
this.prevOutputs = outputValue;
133138
this.emit("moduleOutputChange", [outputValue]);
134139
}

‎client/packages/lowcoder/src/appView/LowcoderAppView.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useEffect, useImperativeHandle, useRef, useState } from "react";
2-
import {
2+
import type {
33
AppViewInstance,
44
AppViewInstanceOptions,
55
EventTriggerHandler,

‎client/packages/lowcoder/src/appView/bootstrapAt.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { loadComps } from "comps";
2-
import { AppViewInstance, AppViewInstanceOptions } from "./AppViewInstance";
2+
import type { AppViewInstanceOptions } from "./AppViewInstance";
33
import { createRoot } from "react-dom/client";
44

55
loadComps();
@@ -13,5 +13,7 @@ export async function bootstrapAppAt<I>(
1313
console.error("node must be not null.");
1414
return;
1515
}
16+
17+
const { AppViewInstance } = await import("./AppViewInstance");
1618
return new AppViewInstance(appId, node, createRoot(node), options);
1719
}

‎client/packages/lowcoder/src/base/codeEditor/autoFormat.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import { CodeType } from "lowcoder-core";
1+
import type { CodeType } from "lowcoder-core";
22
import { relaxedJSONToJSON } from "lowcoder-core";
33
import { getDynamicStringSegments, isDynamicSegment } from "lowcoder-core";
44
import { format as formatSQL } from "sql-formatter";
5-
import { Language } from "./codeEditorTypes";
5+
import type { Language } from "./codeEditorTypes";
66

77
export async function cssFormatter(text: string) {
88
const prettier = await require("prettier/standalone");

‎client/packages/lowcoder/src/base/codeEditor/codeEditor.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { EditorState, EditorView } from "./codeMirror";
1111
import { useExtensions } from "./extensions";
1212
import { PopupCard } from "lowcoder-design";
1313
import { CodeEditorPanel } from "../../pages/editor/codeEditorPanel";
14-
import { CodeEditorProps, StyleName } from "./codeEditorTypes";
14+
import type { CodeEditorProps, StyleName } from "./codeEditorTypes";
1515
import { useClickCompNameEffect } from "./clickCompName";
1616
import { Layers } from "../../constants/Layers";
1717

‎client/packages/lowcoder/src/base/codeEditor/extensions.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import {
3030
import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
3131
import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
3232
import { Diagnostic, linter, lintKeymap } from "@codemirror/lint";
33-
import { EditorState, Prec } from "@codemirror/state";
33+
import { type EditorState, Prec } from "@codemirror/state";
3434
import { TernServer } from "base/codeEditor/completion/ternServer";
3535
import {
3636
MutableRefObject,
@@ -41,15 +41,15 @@ import {
4141
useRef,
4242
useState,
4343
} from "react";
44-
import { CodeEditorProps, Language, MetaDataContext } from "./codeEditorTypes";
44+
import { type CodeEditorProps, type Language, MetaDataContext } from "./codeEditorTypes";
4545
import {
4646
Compartment,
4747
EditorView,
48-
Extension,
48+
type Extension,
4949
keymap,
5050
placeholder as extendPlaceholder,
51-
StateEffect,
52-
ViewUpdate,
51+
type StateEffect,
52+
type ViewUpdate,
5353
} from "./codeMirror";
5454
import { ExposingCompletionSource } from "./completion/exposingCompletionSource";
5555
import { SQLCompletionSource } from "./completion/sqlCompletionSource";

0 commit comments

Comments
 (0)