⚡ Optimize the vite package size (#384)

web/package.json

@@ -11,8 +11,8 @@
   "dependencies": {
     "@bytemd/plugin-gfm": "^1.21.0",
     "@bytemd/react": "^1.21.0",
-    "@headlessui/react": "^2.0.4",
-    "@heroicons/react": "^2.1.3",
+    "@headlessui/react": "^2.1.1",
+    "@heroicons/react": "^2.1.4",
     "@monaco-editor/react": "^4.6.0",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/forms": "^0.5.7",
@@ -24,38 +24,37 @@
     "cron-parser": "^4.9.0",
     "csstype": "^3.1.3",
     "dayjs": "^1.11.11",
-    "flowbite": "^2.3.0",
-    "flowbite-react": "^0.9.0",
+    "flowbite": "^2.4.1",
+    "flowbite-react": "^0.10.1",
     "human-format": "^1.2.0",
     "lodash": "^4.17.21",
-    "monaco-editor": "^0.49.0",
+    "monaco-editor": "^0.50.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.24.0",
     "react-toastify": "^10.0.5",
     "react-use": "^17.5.0",
     "xterm": "^5.3.0",
     "xterm-addon-attach": "^0.9.0",
     "xterm-addon-fit": "^0.8.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
-    "@types/node": "^20.14.2",
+    "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.19",
-    "cssnano": "^7.0.2",
-    "json-server": "^1.0.0-beta.1",
     "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^12.1.5",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.13"
+    "terser": "^5.31.1",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.2"
   },
   "packageManager": "[email protected]"
 }

web/vite.config.ts

@@ -4,6 +4,41 @@ import react from '@vitejs/plugin-react-swc';
 export default defineConfig({
   plugins: [react()],
   build: {
-    chunkSizeWarningLimit: 10000,
+    chunkSizeWarningLimit: 2048,
+    minify: "terser",
+    target: "esnext",
+    rollupOptions: {
+      output: {
+        manualChunks(id: any): string {
+          if (id.includes("node_modules")) {
+            let name = id.toString().split("node_modules/")[1].split("/")[0].toString();
+            if (name.includes("@monaco-editor")) {
+              return "vendor.1";
+            }
+            if (id.includes("monaco-editor")) {
+              if (id.includes("basic-languages")) {
+                return name + "-" + "basic-languages"
+              } else if (id.includes("browser/ui") || id.includes("editor/common")) {
+                return name + "-" + "ui"
+              } else if (id.includes("platform/") || id.includes("base/")) {
+                return name + "-" + "common"
+              } else {
+                return name + "-" + "other"
+              }
+            }
+            if (name.includes("flowbit")) {
+              return "flowbit";
+            }
+            if (name.includes("react") || name.includes("tailwind")) {
+              return "react+tailwind";
+            }
+            if (name.includes("parse5") || name.includes("bytemd") || name.includes("axios") || name.includes("codemirror") || name.includes("xterm")) {
+              return "vendor-modules";
+            }
+            return "vendor";
+          }
+        },
+      }
+    }
   }
 });