optimize perf

plugins/vite/emotionSpeedy.ts

@@ -0,0 +1,25 @@
+import type { Plugin } from 'vite';
+
+/**
+ * Forces emotion's speedy mode in antd-style.
+ *
+ * antd-style hardcodes `speedy: false` in both createStaticStyles and
+ * createInstance, which causes emotion to create a new <style> element
+ * for every CSS rule (n % 1 === 0 is always true).
+ * With speedy: true, one <style> tag holds up to 65 000 rules via
+ * CSSStyleSheet.insertRule(), eliminating thousands of DOM insertBefore calls.
+ */
+export function viteEmotionSpeedy(): Plugin {
+  return {
+    name: 'emotion-speedy',
+    enforce: 'pre',
+    transform(code, id) {
+      if (id.includes('antd-style') && code.includes('speedy: false')) {
+        return {
+          code: code.replaceAll('speedy: false', 'speedy: true'),
+          map: null,
+        };
+      }
+    },
+  };
+}

plugins/vite/sharedRendererConfig.ts

@@ -3,6 +3,7 @@ import { codeInspectorPlugin } from 'code-inspector-plugin';
 import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
+import { viteEmotionSpeedy } from './emotionSpeedy';
 import { viteNodeModuleStub } from './nodeModuleStub';
 import { vitePlatformResolve } from './platformResolve';
 
@@ -115,6 +116,7 @@ interface SharedRendererOptions {
 export function sharedRendererPlugins(options: SharedRendererOptions) {
   const defaultTsconfigPaths = options.tsconfigPaths ?? true;
   return [
+    viteEmotionSpeedy(),
     nodePolyfills({ include: ['buffer'] }),
     viteNodeModuleStub(),
     vitePlatformResolve(options.platform),

src/layout/SPAGlobalProvider/index.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { TooltipGroup } from '@lobehub/ui';
+import { StyleProvider } from 'antd-style';
 import { domMax, LazyMotion } from 'motion/react';
 import { lazy, memo, type PropsWithChildren, Suspense, useLayoutEffect } from 'react';
 
@@ -57,7 +58,9 @@ const SPAGlobalProvider = memo<PropsWithChildren>(({ children }) => {
                     <DragUploadProvider>
                       <LazyMotion features={domMax}>
                         <TooltipGroup layoutAnimation={false}>
-                          <LobeAnalyticsProviderWrapper>{children}</LobeAnalyticsProviderWrapper>
+                          <StyleProvider speedy={import.meta.env.PROD}>
+                            <LobeAnalyticsProviderWrapper>{children}</LobeAnalyticsProviderWrapper>
+                          </StyleProvider>
                         </TooltipGroup>
                         <Suspense>
                           <ModalHost />