optimise bundle size for lowcoder

Author: raheeliftikhar5

client/packages/lowcoder/index.html

@@ -30,6 +30,7 @@
         flex-direction: column;
         top: 0;
         z-index: 10000;
+        transition: opacity 0.25s linear;
       }
       #loading svg {
         animation: breath 1s linear infinite;

client/packages/lowcoder/package.json

@@ -127,6 +127,7 @@
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-only-ascii": "^0.0.0",
     "http-proxy-middleware": "^2.0.6",
+    "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-visualizer": "^5.9.2",
     "typescript": "^4.8.4",
     "vite": "^4.5.5",

client/packages/lowcoder/vite.config.mts

@@ -1,5 +1,5 @@
 import dotenv from "dotenv";
-import { defineConfig, ServerOptions, UserConfig } from "vite";
+import { defineConfig, PluginOption, ServerOptions, UserConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgrPlugin from "vite-plugin-svgr";
@@ -12,6 +12,7 @@ import dynamicImport from 'vite-plugin-dynamic-import';
 import { ensureLastSlash } from "./src/dev-utils/util";
 import { buildVars } from "./src/dev-utils/buildVars";
 import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
+import { terser } from 'rollup-plugin-terser';
 // import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 dotenv.config();
@@ -66,16 +67,124 @@ export const viteConfig: UserConfig = {
   },
   base,
   build: {
+    minify: "terser",
     manifest: true,
     target: "es2020",
     cssTarget: "chrome87",
     outDir: "build",
     assetsDir: "static",
     emptyOutDir: false,
     rollupOptions: {
+      treeshake: {
+        moduleSideEffects: true, 
+        propertyReadSideEffects: false,
+        tryCatchDeoptimization: false, 
+        unknownGlobalSideEffects: false, 
+      },
       output: {
         chunkFileNames: "[hash].js",
+        manualChunks: (id) => {
+          if (id.includes("node_modules")) {
+            // UI LIBRARIES
+            if (id.includes("@ant-design/icons")) return "ant-design-icons";
+            if (id.includes("node_modules/antd")) return "antd";
+            if (id.includes("styled-components")) return "styled-components";
+
+            // 🔹 BARCODE & QR CODE PROCESSING
+            if (id.includes("react-qr-barcode-scanner")) return "barcode";
+        
+            // TEXT EDITORS & PARSERS
+            if (id.includes("codemirror")) return "codemirror";
+            if (id.includes("quill")) return "quill";
+            if (id.includes("react-json-view")) return "react-json-view";
+            if (id.includes("react-quill")) return "react-quill";
+            if (id.includes("remark-gfm")) return "remark-gfm";
+            if (id.includes("rehype-raw")) return "rehype-raw";
+            if (id.includes("rehype-sanitize")) return "rehype-sanitize";
+        
+            // DRAG & DROP
+            if (id.includes("@dnd-kit")) return "dnd-kit";
+            if (id.includes("react-draggable")) return "react-draggable";
+            if (id.includes("react-grid-layout")) return "react-grid-layout";
+            if (id.includes("react-sortable-hoc")) return "react-sortable-hoc";
+        
+            // ICONS & FONTS
+            if (id.includes("@fortawesome")) return "fontawesome";
+            if (id.includes("@remixicon")) return "remixicon";
+        
+            // DATE/TIME HANDLING
+            if (id.includes("moment")) return "moment";
+            if (id.includes("date-fns")) return "date-fns";
+            if (id.includes("dayjs")) return "dayjs";
+        
+            // UTILITIES & HELPERS
+            if (id.includes("clsx")) return "clsx";
+            if (id.includes("immer")) return "immer";
+            if (id.includes("lodash")) return "lodash";
+            if (id.includes("lodash-es")) return "lodash-es";
+            if (id.includes("uuid")) return "uuid";
+            if (id.includes("ua-parser-js")) return "ua-parser-js";
+            if (id.includes("html2canvas")) return "ua-parser-js";
+            if (id.includes("numbro")) return "numbro";
+        
+            // FILE & DATA PROCESSING
+            if (id.includes("buffer")) return "buffer";
+            if (id.includes("file-saver")) return "file-saver";
+            if (id.includes("papaparse")) return "papaparse";
+            if (id.includes("parse5")) return "parse5";
+            if (id.includes("xlsx")) return "xlsx";
+            if (id.includes("alasql")) return "alasql";
+            if (id.includes("sql-formatter")) return "sql-formatter";
+        
+            // NETWORK & HTTP
+            if (id.includes("axios")) return "axios";
+            if (id.includes("fetch")) return "fetch";
+            if (id.includes("http")) return "http-modules";
+            if (id.includes("https")) return "https-modules";
+        
+            // WEB SOCKETS & STREAMING
+            if (id.includes("sockjs")) return "websockets";
+            if (id.includes("websocket")) return "websockets";
+        
+            // STATE MANAGEMENT
+            if (id.includes("react-error-boundary")) return "react-error-boundary";
+            if (id.includes("redux-devtools-extension")) return "redux-devtools";
+        
+            // POLYFILLS & BROWSER COMPATIBILITY
+            // if (id.includes("core-js")) return "core-js";
+            if (id.includes("regenerator-runtime")) return "regenerator-runtime";
+            if (id.includes("eslint4b-prebuilt-2")) return "eslint4b-prebuilt-2";
+
+            // MISCELLANEOUS
+            if (id.includes("cnchar")) return "cnchar";
+            if (id.includes("hotkeys-js")) return "hotkeys-js";
+            if (id.includes("loglevel")) return "loglevel";
+            if (id.includes("qrcode.react")) return "qrcode-react";
+            if (id.includes("react-joyride")) return "react-joyride";
+            if (id.includes("rc-trigger")) return "rc-trigger";
+            if (id.includes("really-relaxed-json")) return "really-relaxed-json";
+            if (id.includes("simplebar-react")) return "simplebar-react";
+            if (id.includes("react-documents")) return "react-documents";
+            if (id.includes("react-colorful")) return "react-colorful";
+            if (id.includes("react-best-gradient-color-picker")) return "react-best-gradient-color-picker";
+            if (id.includes("@supabase/supabase-js")) return "supabase";
+            return null;
+          }
+          return null;
+        },
       },
+      plugins: [
+        terser({
+          compress: {
+            drop_console: true,  
+            drop_debugger: true, 
+            pure_funcs: ["console.info", "console.debug", "console.log"], 
+          },
+          format: {
+            comments: /(@vite-ignore|webpackIgnore)/
+          },
+        }) as PluginOption,
+      ],
       onwarn: (warning, warn) => {
         if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
           return

client/yarn.lock

@@ -14242,6 +14242,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     rehype-sanitize: ^5.0.1
     remark-gfm: ^4.0.0
     resize-observer-polyfill: ^1.5.1
+    rollup-plugin-terser: ^7.0.2
     rollup-plugin-visualizer: ^5.9.2
     simplebar-react: ^3.2.4
     sql-formatter: ^8.2.0