⚡ 前端性能优化：动态加载、减少bundle体积、降低轮询频率

- ThemeClientContext 用 useMemo 缓存 antdTheme 对象，避免每次渲染重建
- next.config.ts 添加 optimizePackageImports 优化 antd/icons 等大库 tree-shaking
- prebuild 脚本只复制必要的 Monaco Editor 文件（14MB → ~5MB）
- MonacoEditor/MarkdownEditor/Charts 改为 next/dynamic 按需加载，减少首屏 JS ~1MB
- 通知未读数轮询间隔 60s → 120s，关闭 revalidateOnFocus 减少不必要请求

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: CodFrm

next.config.ts

@@ -6,6 +6,16 @@ const withNextIntl = createNextIntlPlugin('./src/i18n/request.ts');
 const nextConfig: NextConfig = {
   env: {},
   output: 'standalone',
+  experimental: {
+    optimizePackageImports: [
+      'antd',
+      '@ant-design/icons',
+      '@ant-design/charts',
+      '@iconify/react',
+      'dayjs',
+      'prismjs',
+    ],
+  },
   async rewrites() {
     return [
       {

scripts/prebuild.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import fs from 'fs';
+import path from 'path';
 import { ConfigProvider, theme } from 'antd';
 import { extractStyle } from '@ant-design/static-style-extract';
 
@@ -29,9 +30,38 @@ fs.mkdirSync('./public/styles', { recursive: true });
 // 生成css
 fs.writeFileSync(outputPath, css);
 
-// 拷贝monaco
-fs.cpSync(
-  './node_modules/monaco-editor/min/vs',
-  './public/assets/monaco-editor/min/vs',
-  { recursive: true },
-);
+// 拷贝monaco - 只复制必要的文件，减少体积（14MB -> ~5MB）
+const monacoSrc = './node_modules/monaco-editor/min/vs';
+const monacoDst = './public/assets/monaco-editor/min/vs';
+
+// 核心文件（必须）
+fs.mkdirSync(monacoDst, { recursive: true });
+fs.copyFileSync(path.join(monacoSrc, 'loader.js'), path.join(monacoDst, 'loader.js'));
+
+// 中文语言包
+const nlsFile = 'nls.messages.zh-cn.js';
+if (fs.existsSync(path.join(monacoSrc, nlsFile))) {
+  fs.copyFileSync(path.join(monacoSrc, nlsFile), path.join(monacoDst, nlsFile));
+}
+
+// base（核心运行时）和 editor（编辑器主体）
+for (const dir of ['base', 'editor']) {
+  fs.cpSync(path.join(monacoSrc, dir), path.join(monacoDst, dir), { recursive: true });
+}
+
+// language - 只复制 typescript 和 json（JS 由 typescript worker 处理）
+for (const lang of ['typescript', 'json']) {
+  fs.cpSync(
+    path.join(monacoSrc, 'language', lang),
+    path.join(monacoDst, 'language', lang),
+    { recursive: true },
+  );
+}
+
+// basic-languages - 只复制 javascript、typescript、css
+for (const lang of ['javascript', 'typescript', 'css']) {
+  const langSrc = path.join(monacoSrc, 'basic-languages', lang);
+  if (fs.existsSync(langSrc)) {
+    fs.cpSync(langSrc, path.join(monacoDst, 'basic-languages', lang), { recursive: true });
+  }
+}

src/app/[locale]/script-show-page/[id]/code/components/ScriptCodeClient.tsx

@@ -2,7 +2,12 @@
 
 import { Card } from 'antd';
 import React from 'react';
-import MonacoEditor from '@/components/MonacoEditor';
+import dynamic from 'next/dynamic';
+
+const MonacoEditor = dynamic(() => import('@/components/MonacoEditor'), {
+  ssr: false,
+  loading: () => <div style={{ height: '600px' }} />,
+});
 import type { ScriptInfo } from '../../types';
 
 type ScriptCodeClientProps = {

src/app/[locale]/script-show-page/[id]/diff/components/ScriptDiffClient.tsx

@@ -3,7 +3,12 @@
 import { Card, Tag, Divider, Alert } from 'antd';
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import MonacoDiffEditor from '@/components/MonacoEditor/DiffEditor';
+import dynamic from 'next/dynamic';
+
+const MonacoDiffEditor = dynamic(
+  () => import('@/components/MonacoEditor/DiffEditor'),
+  { ssr: false, loading: () => <div style={{ height: '600px' }} /> },
+);
 import type { ScriptInfo } from '../../types';
 
 type ScriptDiffClientProps = {

src/app/[locale]/script-show-page/[id]/issue/[issueId]/components/IssueCommentClient.tsx

@@ -29,7 +29,12 @@ import {
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { useSemDateTime } from '@/lib/utils/semdate';
 import type { MarkdownEditorRef } from '@/components/MarkdownEditor';
-import MarkdownEditor from '@/components/MarkdownEditor';
+import dynamic from 'next/dynamic';
+
+const MarkdownEditor = dynamic(() => import('@/components/MarkdownEditor'), {
+  ssr: false,
+  loading: () => <div style={{ height: '200px' }} />,
+});
 import MarkdownView from '@/components/MarkdownView';
 import ActionMenu from '@/components/ActionMenu';
 import type { IssueComment } from '@/lib/api/services/scripts/issue';

src/app/[locale]/script-show-page/[id]/issue/create/CreateIssueClient.tsx

@@ -5,7 +5,12 @@ import { Button, Card, Input, Select, Space, message } from 'antd';
 import { useTranslations } from 'next-intl';
 import { useRouter } from '@/i18n/routing';
 import type { MarkdownEditorRef } from '@/components/MarkdownEditor';
-import MarkdownEditor from '@/components/MarkdownEditor';
+import dynamic from 'next/dynamic';
+
+const MarkdownEditor = dynamic(() => import('@/components/MarkdownEditor'), {
+  ssr: false,
+  loading: () => <div style={{ height: '300px' }} />,
+});
 import { useScript } from '../../components/ScriptContext';
 import { scriptIssueService } from '@/lib/api/services/scripts/issue';
 import IssueLabel from '../components/IssueLabel';

src/app/[locale]/script-show-page/[id]/statistic/components/ScriptStatsClient.tsx

@@ -29,7 +29,16 @@ import {
 } from '@ant-design/icons';
 import React, { useState } from 'react';
 import { useScript } from '../../components/ScriptContext';
-import { Line, Column } from '@ant-design/charts';
+import dynamic from 'next/dynamic';
+
+const Line = dynamic(() => import('@ant-design/charts').then((mod) => mod.Line), {
+  ssr: false,
+  loading: () => <div style={{ height: 300 }} />,
+});
+const Column = dynamic(
+  () => import('@ant-design/charts').then((mod) => mod.Column),
+  { ssr: false, loading: () => <div style={{ height: 300 }} /> },
+);
 import { useTheme } from '@/contexts/ThemeClientContext';
 import { useTranslations } from 'next-intl';
 import { useScriptStatistics, useScriptRealtime } from '@/lib/api/hooks/script';

src/components/ScriptEditor/index.tsx

@@ -25,9 +25,17 @@ import {
 import React, { useRef, useState, useCallback, useEffect } from 'react';
 import { useTranslations } from 'next-intl';
 import type { MonacoEditorRef } from '@/components/MonacoEditor';
-import MonacoEditor from '@/components/MonacoEditor';
 import type { MarkdownEditorRef } from '@/components/MarkdownEditor';
-import MarkdownEditor from '@/components/MarkdownEditor';
+import dynamic from 'next/dynamic';
+
+const MonacoEditor = dynamic(() => import('@/components/MonacoEditor'), {
+  ssr: false,
+  loading: () => <div style={{ height: '500px' }} />,
+});
+const MarkdownEditor = dynamic(() => import('@/components/MarkdownEditor'), {
+  ssr: false,
+  loading: () => <div style={{ height: '300px' }} />,
+});
 import {
   parseMetadata,
   parseTags,

src/contexts/ThemeClientContext.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useContext, createContext, useState, useEffect } from 'react';
+import { useContext, createContext, useState, useEffect, useMemo } from 'react';
 import type { ThemeConfig } from 'antd';
 import { ConfigProvider, theme } from 'antd';
 import type { ThemeMode } from '@/lib/cookies';
@@ -34,7 +34,7 @@ export const ThemeClientProvider: React.FC<ThemeClientProviderProps> = ({
     initialMode || { mode: 'auto', theme: 'light' },
   );
 
-  const antdTheme: ThemeConfig = {
+  const antdTheme: ThemeConfig = useMemo(() => ({
     algorithm:
       themeMode.theme === 'dark' ? theme.darkAlgorithm : theme.defaultAlgorithm,
     token: {
@@ -168,7 +168,7 @@ export const ThemeClientProvider: React.FC<ThemeClientProviderProps> = ({
         colorBgContainer: themeMode.theme === 'dark' ? '#161b22' : '#ffffff',
       },
     },
-  };
+  }), [themeMode.theme]);
 
   useEffect(() => {
     // 记录到cookie

src/lib/api/hooks/notification.ts

@@ -43,11 +43,11 @@ export function useUnreadCount() {
     },
     {
       // 自动刷新
-      refreshInterval: 60 * 1000, // 每分钟刷新一次
-      revalidateOnFocus: true,
+      refreshInterval: 120 * 1000, // 每2分钟刷新一次
+      revalidateOnFocus: false,
       revalidateOnReconnect: true,
-      // 缓存时间30秒
-      dedupingInterval: 30 * 1000,
+      // 缓存时间60秒
+      dedupingInterval: 60 * 1000,
     },
   );
 }