reduce bundle size and lazy load components

Author: raheeliftikhar5

client/packages/lowcoder-sdk/analyse.html

@@ -1,11 +1,14 @@
-import { defineConfig, UserConfig } from "vite";
+import { defineConfig, PluginOption, UserConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgrPlugin from "vite-plugin-svgr";
 import path from "path";
 import { ensureLastSlash } from "./src/dev-utils/util";
 import { buildVars } from "./src/dev-utils/buildVars";
 import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
+import { visualizer } from "rollup-plugin-visualizer";
+
+const isVisualizerEnabled = true; //!!process.env.ENABLE_VISUALIZER;
 
 const define = {};
 buildVars.forEach(({ name, defaultValue }) => {
@@ -40,6 +43,11 @@ export const viteConfig: UserConfig = {
       external: ["react", "react-dom"],
       output: {
         chunkFileNames: "[hash].js",
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+              return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          }
+        }
       },
     },
     commonjsOptions: {
@@ -97,6 +105,13 @@ export const viteConfig: UserConfig = {
         ref: true,
       },
     }),
+    isVisualizerEnabled && visualizer({
+      template: "treemap", // or sunburst
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+      filename: "analyse.html"
+    }) as PluginOption,
   ],
 };
 

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

@@ -36,7 +36,6 @@ import LazyRoute from "components/LazyRoute";
 import AppFromTemplate from "pages/ApplicationV2/AppFromTemplate";
 import AppEditor from "pages/editor/AppEditor";
 import { getAntdLocale } from "i18n/antdLocale";
-import { CodeEditorTooltipContainer } from "base/codeEditor/codeEditor";
 import { ProductLoading } from "components/ProductLoading";
 import { language, trans } from "i18n";
 import { loadComps } from "comps";

client/packages/lowcoder/analyse.html

@@ -63,8 +63,12 @@ const COMPS_MAP = {
   tableColumnRender: RenderComp,
 } as Record<string, CompConstructor>;
 
-Object.entries(uiCompRegistry).forEach(([key, value]) => {
-  COMPS_MAP["ui_" + key] = value.comp;
+Object.entries(uiCompRegistry).forEach(async ([key, value]) => {
+  if(value.lazyLoad) {
+    COMPS_MAP["ui_" + key] = await import(value.compPath!);
+  } else {
+    COMPS_MAP["ui_" + key] = value.comp!;
+  }
 });
 Object.keys(QueryMap).forEach((key) => {
   COMPS_MAP["query_" + key] = (QueryMap as Record<string, CompConstructor>)[key];

client/packages/lowcoder/src/app.tsx

@@ -193,7 +193,7 @@ const onFlyDrop = (layout: Layout, items: Layout, dispatch: DispatchType) => {
   }
 };
 
-const onDrop = (
+const onDrop = async (
   layout: Layout,
   items: Layout,
   event: DragEvent<HTMLElement>,
@@ -220,7 +220,19 @@ const onDrop = (
     const nameGenerator = editorState.getNameGenerator();
     const compInfo = parseCompType(compType);
     const compName = nameGenerator.genItemName(compInfo.compName);
-    const defaultDataFn = uiCompRegistry[compType as UICompType]?.defaultDataFn;
+    // const defaultDataFn = uiCompRegistry[compType as UICompType]?.defaultDataFn;
+    const {
+      defaultDataFnName,
+      defaultDataFnPath,
+    } = uiCompRegistry[compType as UICompType];
+
+    let defaultDataFn = undefined;
+    if(defaultDataFnName && defaultDataFnPath) {
+      const module = await import(defaultDataFnPath);
+      defaultDataFn = module[defaultDataFnName];
+    }
+    console.log(defaultDataFn);
+
     const widgetValue: GridItemDataType = {
       compType,
       name: compName,

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

@@ -23,6 +23,7 @@ import { profilerCallback } from "util/cacheUtils";
 import { setFieldsNoTypeCheck, shallowEqual } from "util/objectUtils";
 import { remoteComp } from "./remoteComp/remoteComp";
 import { SimpleNameComp } from "./simpleNameComp";
+import { lazyLoadComp } from "./lazyLoadComp/lazyLoadComp";
 
 export function defaultLayout(compType: UICompType): UICompLayoutInfo {
   return uiCompRegistry[compType]?.layoutInfo ?? { w: 5, h: 5 };
@@ -37,6 +38,7 @@ const TmpComp = withTypeAndChildren<
   ToInstanceType<typeof childrenMap>
 >(
   (type) => {
+    console.log('type', type);
     const compInfo = parseCompType(type);
     if (compInfo.isRemote) {
       return remoteComp(compInfo);
@@ -46,8 +48,15 @@ const TmpComp = withTypeAndChildren<
       if (name !== type) {
         continue;
       }
-      const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp);
-      return withErrorBoundary(comp) as ExposingMultiCompConstructor;
+      console.log(manifest);
+      if(manifest.lazyLoad) {
+        return lazyLoadComp(
+          manifest.compName,
+          manifest.compPath,
+        );
+      }
+      const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!);
+      return withErrorBoundary(comp!) as ExposingMultiCompConstructor;
     }
   },
   "button",

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

@@ -0,0 +1,140 @@
+import { ExecuteAction } from "comps/controls/actionSelector/executeCompTypes";
+import { simpleMultiComp, valueComp } from "comps/generators";
+import { withSimpleExposing } from "comps/generators/withExposing";
+import { withMethodExposing } from "comps/generators/withMethodExposing";
+import { evalAndReduce } from "comps/utils";
+import { customAction } from "lowcoder-core";
+import { RemoteCompInfo } from "types/remoteComp";
+import { lazyLoadComp } from "./lazyLoadComp";
+
+const npmRemoteInfo: RemoteCompInfo = {
+  isRemote: true,
+  source: "npm",
+  packageName: "p",
+  packageVersion: "v",
+  compName: "n",
+};
+
+let TestComp = simpleMultiComp({ hello: valueComp<number>(123) });
+TestComp = withSimpleExposing(TestComp, (comp) => {
+  return {
+    hello: comp.children.hello.getView(),
+  };
+});
+TestComp = withMethodExposing(TestComp, [
+  {
+    method: {
+      name: "add",
+      params: [{ name: "value", type: "number" }],
+    },
+    execute: (comp, values) => {
+      const hello = comp.children.hello;
+      hello.dispatchChangeValueAction(hello.getView() + (values[0] as number));
+    },
+  },
+]);
+export {
+  TestComp,
+};
+
+// const RComp = lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
+
+test("lazyload comp", async () => {
+  let c: any = null;
+  const RComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
+  c = new RComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  expect(c.toJsonValue()).toBe(undefined);
+  await c.load();
+  expect(c.toJsonValue()).toBe(123);
+
+  c.dispatchChangeValueAction(345);
+  expect(c.toJsonValue()).toBe(345);
+});
+
+test("lazyload comp keep values", async () => {
+  let c: any = null;
+  const RComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
+  c = new RComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+    value: 456,
+  });
+
+  expect(c.toJsonValue()).toBe(456);
+  await c.load();
+  expect(c.toJsonValue()).toBe(456);
+});
+
+test("lazyload comp exposing data", async () => {
+  // const EComp = lazyLoadComp('comp-path', async () => {
+  //   return withSimpleExposing(simpleMultiComp({ hello: valueComp(123) }), (comp) => {
+  //     return {
+  //       hello: comp.children.hello.getView(),
+  //     };
+  //   });
+  // });
+  const EComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
+
+  let c: any = null;
+  c = new EComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  await c.load();
+  const c1 = evalAndReduce(c);
+  expect(c1.exposingValues.hello).toBe(123);
+});
+
+test("lazyload comp execute method", async () => {
+  // const MComp = lazyLoadComp('comp-path', async () => {
+  //   return withMethodExposing(simpleMultiComp({ hello: valueComp<number>(123) }), [
+  //     {
+  //       method: {
+  //         name: "add",
+  //         params: [{ name: "value", type: "number" }],
+  //       },
+  //       execute: (comp, values) => {
+  //         const hello = comp.children.hello;
+  //         hello.dispatchChangeValueAction(hello.getView() + (values[0] as number));
+  //       },
+  //     },
+  //   ]);
+  // });
+  const MComp = await lazyLoadComp('TestComp', './lazyLoadComp.test.tsx');
+  let c: any = null;
+  c = new MComp({
+    dispatch: (action) => {
+      if (c) {
+        c = c.reduce(action);
+      }
+    },
+  });
+
+  await c.load();
+  c.reduce(
+    customAction<ExecuteAction>(
+      {
+        type: "execute",
+        methodName: "add",
+        params: [10],
+      },
+      false
+    )
+  );
+  await new Promise((r) => setTimeout(r, 20));
+  expect(c.children.hello.getView()).toEqual(133);
+});