前端构建告警清理：happy-dom 替代 jsdom、批准 esbuild 安装脚本、CodeMirror 与重路由懒加载分包

web/src/App.tsx

@@ -1,17 +1,21 @@
+import { lazy, Suspense } from 'react'
 import { Navigate, Route, Routes } from 'react-router'
 import type { ReactNode } from 'react'
 import { useAuth } from './lib/auth'
 import { BlogLayout, AdminLayout } from './components/Layout'
 import Home from './pages/Home'
-import Note from './pages/Note'
 import TagPage from './pages/TagPage'
 import Login from './pages/Login'
 import AdminList from './pages/AdminList'
 import AdminTrash from './pages/AdminTrash'
-import AdminEdit from './pages/AdminEdit'
 import AdminSettings from './pages/AdminSettings'
 import NotFound from './pages/NotFound'
 
+// 重依赖路由懒加载：Note 带 markdown 渲染管线，AdminEdit 额外带 CodeMirror，
+// 拆出主包以避免单 chunk 过大（vite 500kB 告警）
+const Note = lazy(() => import('./pages/Note'))
+const AdminEdit = lazy(() => import('./pages/AdminEdit'))
+
 // 登录守卫：401 统一跳转 /admin/login（§8.2）
 function RequireAuth({ children }: { children: ReactNode }) {
   const { authenticated, loading } = useAuth()
@@ -26,21 +30,23 @@ function RequireAuth({ children }: { children: ReactNode }) {
 
 export default function App() {
   return (
-    <Routes>
-      <Route element={<BlogLayout />}>
-        <Route path="/" element={<Home />} />
-        <Route path="/notes/:slug" element={<Note />} />
-        <Route path="/tags/:tag" element={<TagPage />} />
-      </Route>
-      <Route path="/admin/login" element={<Login />} />
-      <Route element={<RequireAuth><AdminLayout /></RequireAuth>}>
-        <Route path="/admin" element={<AdminList />} />
-        <Route path="/admin/trash" element={<AdminTrash />} />
-        <Route path="/admin/settings" element={<AdminSettings />} />
-        <Route path="/admin/notes/new" element={<AdminEdit />} />
-        <Route path="/admin/notes/:id/edit" element={<AdminEdit />} />
-      </Route>
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+    <Suspense fallback={<div className="flex min-h-screen items-center justify-center text-zinc-500">加载中…</div>}>
+      <Routes>
+        <Route element={<BlogLayout />}>
+          <Route path="/" element={<Home />} />
+          <Route path="/notes/:slug" element={<Note />} />
+          <Route path="/tags/:tag" element={<TagPage />} />
+        </Route>
+        <Route path="/admin/login" element={<Login />} />
+        <Route element={<RequireAuth><AdminLayout /></RequireAuth>}>
+          <Route path="/admin" element={<AdminList />} />
+          <Route path="/admin/trash" element={<AdminTrash />} />
+          <Route path="/admin/settings" element={<AdminSettings />} />
+          <Route path="/admin/notes/new" element={<AdminEdit />} />
+          <Route path="/admin/notes/:id/edit" element={<AdminEdit />} />
+        </Route>
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </Suspense>
   )
 }

web/src/pages/AdminEdit.tsx

@@ -1,13 +1,15 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { Bold, Italic, Link2, Code, Table, Eye, EyeOff } from 'lucide-react'
 import { api, ApiError } from '../lib/api'
 import type { NoteItem } from '../lib/api'
-import Editor from '../components/Editor'
 import MarkdownViewer from '../components/MarkdownViewer'
 import { slugPreview } from '../lib/utils'
 
+// CodeMirror 体积大，单独拆 chunk，编辑器在首帧后异步加载
+const Editor = lazy(() => import('../components/Editor'))
+
 interface NoteFull extends NoteItem {
   content: string
   prev?: unknown
@@ -202,12 +204,14 @@ export default function AdminEdit() {
       <div className="flex min-h-0 flex-1 gap-3">
         <div className="flex min-w-0 flex-1 flex-col gap-3">
           <div className="min-h-0 flex-1">
-            <Editor
-              value={form.content}
-              onChange={(v) => set('content', v)}
-              onUploadStart={(name) => setUploadMsg(`上传中：${name}…`)}
-              onUploadEnd={(err) => setUploadMsg(err ?? null)}
-            />
+            <Suspense fallback={<div className="flex h-full items-center justify-center text-sm text-zinc-500">编辑器加载中…</div>}>
+              <Editor
+                value={form.content}
+                onChange={(v) => set('content', v)}
+                onUploadStart={(name) => setUploadMsg(`上传中：${name}…`)}
+                onUploadEnd={(err) => setUploadMsg(err ?? null)}
+              />
+            </Suspense>
           </div>
           {uploadMsg && <p className="text-xs text-zinc-400">{uploadMsg}</p>}
           {showPreview && (