From 6f47950fe20554860b82f7c4d0a978964b716ca5 Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Fri, 10 Jul 2026 19:13:09 +0800
Subject: [PATCH] perf(web): lazy-load Vite plugins (#38663)

---
 web/vite.config.ts | 71 ++++++++++++++++++++++++++--------------------
 1 file changed, 41 insertions(+), 30 deletions(-)

diff --git a/web/vite.config.ts b/web/vite.config.ts
index a4d3df3c18f..ff6acfdf503 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -1,9 +1,5 @@
 import { fileURLToPath } from 'node:url'
-import tailwindcss from '@tailwindcss/vite'
-import react from '@vitejs/plugin-react'
-import vinext from 'vinext'
-import Inspect from 'vite-plugin-inspect'
-import { defineConfig } from 'vite-plus'
+import { defineConfig, lazyPlugins } from 'vite-plus'
 import { createCodeInspectorPlugin, createForceInspectorClientInjectionPlugin } from './plugins/vite/code-inspector.ts'
 import { customI18nHmrPlugin } from './plugins/vite/custom-i18n-hmr.ts'
 import { getRootClientInjectTarget } from './plugins/vite/inject-target.ts'
@@ -19,42 +15,57 @@ export default defineConfig(({ mode }) => {
     || process.argv.some(arg => arg.toLowerCase().includes('storybook'))
 
   return {
-    plugins: isTest
-      ? [
+    plugins: lazyPlugins(async () => {
+      const { default: react } = await import('@vitejs/plugin-react')
+
+      if (isTest) {
+        return [
           nextStaticImageTestPlugin({ projectRoot }),
           react(),
           {
             // Stub .mdx files so components importing them can be unit-tested
             name: 'mdx-stub',
             enforce: 'pre',
-            transform(_, id) {
+            transform(_: string, id: string) {
               if (id.endsWith('.mdx'))
                 return { code: 'export default () => null', map: null }
             },
           },
         ]
-      : isStorybook
-        ? [
-            react(),
-          ]
-        : [
-            Inspect(),
-            createCodeInspectorPlugin({
-              injectTarget: rootClientInjectTarget,
-            }),
-            createForceInspectorClientInjectionPlugin({
-              injectTarget: rootClientInjectTarget,
-              projectRoot,
-            }),
-            tailwindcss(),
-            react(),
-            vinext({ react: false }),
-            customI18nHmrPlugin({ injectTarget: rootClientInjectTarget }),
-            // reactGrabOpenFilePlugin({
-            //   injectTarget: rootClientInjectTarget,
-            //   projectRoot,
-            // }),
-          ],
+      }
+
+      if (isStorybook)
+        return [react()]
+
+      const [
+        { default: tailwindcss },
+        { default: vinext },
+        { default: Inspect },
+      ] = await Promise.all([
+        import('@tailwindcss/vite'),
+        import('vinext'),
+        import('vite-plugin-inspect'),
+      ])
+
+      return [
+        Inspect(),
+        createCodeInspectorPlugin({
+          injectTarget: rootClientInjectTarget,
+        }),
+        createForceInspectorClientInjectionPlugin({
+          injectTarget: rootClientInjectTarget,
+          projectRoot,
+        }),
+        tailwindcss(),
+        react(),
+        vinext({ react: false }),
+        customI18nHmrPlugin({ injectTarget: rootClientInjectTarget }),
+        // reactGrabOpenFilePlugin({
+        //   injectTarget: rootClientInjectTarget,
+        //   projectRoot,
+        // }),
+      ]
+    }),
     resolve: {
       tsconfigPaths: true,
       alias: [