📦 refactor: Add Additional Chunking to Vite Config (#7544)

* ⚡ refactor: Add Additional Chunking to Vite Config

* chore: Integrate rollup-plugin-visualizer for bundle analysis in Vite config & add @codemirror chunks

client/package.json

@@ -139,6 +139,7 @@
     "postcss": "^8.4.31",
     "postcss-loader": "^7.1.0",
     "postcss-preset-env": "^8.2.0",
+    "rollup-plugin-visualizer": "^6.0.0",
     "tailwindcss": "^3.4.1",
     "ts-jest": "^29.2.5",
     "typescript": "^5.3.3",

client/vite.config.ts

@@ -1,9 +1,10 @@
-import path, { resolve } from 'path';
+import path from 'path';
+import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import { VitePWA } from 'vite-plugin-pwa';
-import { defineConfig } from 'vite';
+import { visualizer } from 'rollup-plugin-visualizer';
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { compression } from 'vite-plugin-compression2';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import type { Plugin } from 'vite';
 
 // https://vitejs.dev/config/
@@ -84,7 +85,15 @@ export default defineConfig({
     compression({
       threshold: 10240,
     }),
-  ],
+    process.env.VITE_BUNDLE_ANALYSIS === 'true' &&
+      visualizer({
+        filename: 'dist/bundle-analysis.html',
+        open: true,
+        gzipSize: true,
+        brotliSize: true,
+        template: 'treemap', // 'treemap' | 'sunburst' | 'network'
+      }),
+  ].filter(Boolean),
   publicDir: './public',
   build: {
     sourcemap: process.env.NODE_ENV === 'development',
@@ -128,6 +137,41 @@ export default defineConfig({
               return 'security-ui';
             }
 
+            if (id.includes('@codemirror/view')) {
+              return 'codemirror-view';
+            }
+            if (id.includes('@codemirror/state')) {
+              return 'codemirror-state';
+            }
+            if (id.includes('@codemirror/language')) {
+              return 'codemirror-language';
+            }
+            if (id.includes('@codemirror')) {
+              return 'codemirror-core';
+            }
+
+            if (id.includes('react-markdown') || id.includes('remark-') || id.includes('rehype-')) {
+              return 'markdown-processing';
+            }
+            if (id.includes('monaco-editor') || id.includes('@monaco-editor')) {
+              return 'code-editor';
+            }
+            if (id.includes('react-window') || id.includes('react-virtual')) {
+              return 'virtualization';
+            }
+            if (id.includes('zod') || id.includes('yup') || id.includes('joi')) {
+              return 'validation';
+            }
+            if (id.includes('axios') || id.includes('ky') || id.includes('fetch')) {
+              return 'http-client';
+            }
+            if (id.includes('react-spring') || id.includes('react-transition-group')) {
+              return 'animations';
+            }
+            if (id.includes('react-select') || id.includes('downshift')) {
+              return 'advanced-inputs';
+            }
+
             // Existing chunks
             if (id.includes('@radix-ui')) {
               return 'radix-ui';
@@ -138,7 +182,10 @@ export default defineConfig({
             if (id.includes('node_modules/highlight.js')) {
               return 'markdown_highlight';
             }
-            if (id.includes('node_modules/hast-util-raw') || id.includes('node_modules/katex')) {
+            if (id.includes('katex') || id.includes('node_modules/katex')) {
+              return 'math-katex';
+            }
+            if (id.includes('node_modules/hast-util-raw')) {
               return 'markdown_large';
             }
             if (id.includes('@tanstack')) {

package-lock.json

@@ -2631,6 +2631,7 @@
         "postcss": "^8.4.31",
         "postcss-loader": "^7.1.0",
         "postcss-preset-env": "^8.2.0",
+        "rollup-plugin-visualizer": "^6.0.0",
         "tailwindcss": "^3.4.1",
         "ts-jest": "^29.2.5",
         "typescript": "^5.3.3",
@@ -36889,9 +36890,9 @@
       }
     },
     "node_modules/open": {
-      "version": "10.1.0",
+      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.1.2.tgz",
-      "integrity": "sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==",
+      "integrity": "sha512-cxN6aIDPz6rm8hbebcP7vrQNhvRcveZoJU72Y7vskh4oIm+BZwBECnx5nTmrlres1Qapvx27Qo1Auukpf8PKXw==",
       "license": "MIT",
       "dependencies": {
         "default-browser": "^5.2.1",
@@ -40961,6 +40962,60 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-6.0.0.tgz",
+      "integrity": "sha512-9aXBJh1uzI6XNmAeATox2z5MWrEPzL6hQgEMOYxTltWOy5x2ycQCec0Y9fC19sBgf3FvIF36aG9DrvUcdnXPew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "open": "^10.1.2",
+        "picomatch": "^4.0.2",
+        "source-map": "^0.7.4",
+        "yargs": "^17.5.1"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "rolldown": "1.x",
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/router": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/router/-/router-2.2.0.tgz",