feat: 客户端懒加载分块 — 重依赖（Univer/xterm/CodeMirror/Office）拆独立 bundle 按需下发（/sidebar/bundle 路由 + __dshChunks__ 注册表），核心启动仅 ~325KB

src/client/builtins/tabs.tsx

@@ -13,14 +13,41 @@ import { t } from '../locales.ts'
 import { openSidebarFile } from '../intercept.tsx'
 import { ExplorerView } from '../ExplorerView.tsx'
 import { EditorHost } from '../EditorHost.tsx'
-import { TerminalView } from '../TerminalView.tsx'
+import { lazyChunkComponent } from '../lazy-chunk.tsx'
 import { GitView } from '../GitView.tsx'
 import { DiffTab } from '../DiffTab.tsx'
 import { SubagentView } from '../SubagentView.tsx'
 import { BrowserView } from '../BrowserView.tsx'
 import { IconTerminalOutline16, IconDiffOutline16, IconGlobeOutline16 } from '../icons.tsx'
+import type { ComponentType } from 'react'
+import type { SessionScope } from '../api.ts'
+import type { SidebarStore } from '../state.ts'
 import type { TabDescriptor } from '../service.ts'
 
+/**
+ * Lazy wrapper over the terminal view: xterm (and its stylesheet) is fetched
+ * only when a terminal tab is first opened (see chunk-loader.ts). The
+ * wrapper keeps the descriptor contract `(props) => ReactNode` — Sidebar
+ * calls it as a plain function.
+ *
+ * TerminalView's props are { scope, tabId, store } — `tabId` is NOT part of
+ * TabComponentProps (it carries `tab: SidebarTab` instead), so the
+ * descriptor maps it explicitly; a bare pass-through would leave tabId
+ * undefined and TerminalView's isAgentTabId(tabId) would crash on
+ * `undefined.startsWith` (regression-pinned in tests/lazy-chunk.spec.tsx).
+ */
+const LazyTerminal = lazyChunkComponent<TerminalViewProps>(
+  'terminal',
+  (mod) => mod.TerminalView as ComponentType<TerminalViewProps> | undefined,
+)
+
+/** The terminal view's props (mirror of TerminalView's own signature). */
+interface TerminalViewProps {
+  scope: SessionScope
+  tabId: string
+  store: SidebarStore
+}
+
 /** How many UI-owned terminals may be open at once (agent-owned ones are uncapped). */
 export const TERMINAL_LIMIT = 3
 
@@ -133,9 +160,7 @@ export function builtinTabs(ctx: Context): readonly TabDescriptor[] {
           patch: { nextTerminal: state.nextTerminal + 1 },
         }
       },
-      component: ({ scope, tab, store }) => (
-        <TerminalView scope={scope} tabId={tab.id} store={store} />
-      ),
+      component: ({ tab, scope, store }) => <LazyTerminal scope={scope} store={store} tabId={tab.id} />,
     },
     {
       id: 'browser',

src/client/builtins/viewers.tsx

@@ -6,15 +6,21 @@
  * binaries and serves doc/xls/ppt by extension; `code` is the catch-all
  * (`exts: []`, lowest priority) that claims any file no other viewer did.
  *
+ * The heavy viewers (docx/xlsx/pptx and the CodeMirror-backed
+ * markdown/html/code) render through {@link lazyChunkComponent} wrappers —
+ * their libraries are fetched only when such a file is first opened (see
+ * chunk-loader.ts). The descriptor metadata (id/exts/priority/detect) is
+ * identical either way, so matching semantics and external-plugin
+ * overrides are unaffected; the `component` wrapper keeps the descriptor
+ * contract `(props) => ReactNode`.
+ *
  * Every viewer carries the declarative settings-surface fields — `title`
  * and `icon` — so the Side card settings page can render the enable/disable
  * inventory without hardcoding (eating our own dogfood).
  */
 import { IconCodeOutline16, IconDownloadOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { DocxView, XlsxView } from '../office-view.tsx'
+import { lazyChunkComponent } from '../lazy-chunk.tsx'
 import { PdfView } from '../PdfView.tsx'
-import { PptxView } from '../PptxView.tsx'
-import { TextEditor } from '../TextEditor.tsx'
 import { BinaryDownload } from '../binary-download.tsx'
 import {
   IconImageOutline16,
@@ -25,10 +31,22 @@ import {
   IconPptxOutline16,
   IconHtmlOutline16,
 } from '../icons.tsx'
-import type { FileViewerDescriptor } from '../service.ts'
+import type { ComponentType } from 'react'
+import type { FileViewerDescriptor, FileViewerProps } from '../service.ts'
 import { t } from '../locales.ts'
 import css from '../sidebar.module.css'
 
+/**
+ * Lazy wrappers over the chunk-resident viewer components. The `pick`
+ * functions are module-level (stable identity — the wrapper effect depends
+ * on them); the cast bridges the chunk exports record to the descriptor
+ * prop shape (the views read only their own subset of FileViewerProps).
+ */
+const LazyDocx = lazyChunkComponent<FileViewerProps>('docx', (mod) => mod.DocxView as ComponentType<FileViewerProps> | undefined)
+const LazyXlsx = lazyChunkComponent<FileViewerProps>('xlsx', (mod) => mod.XlsxView as ComponentType<FileViewerProps> | undefined)
+const LazyPptx = lazyChunkComponent<FileViewerProps>('pptx', (mod) => mod.PptxView as ComponentType<FileViewerProps> | undefined)
+const LazyTextEditor = lazyChunkComponent<FileViewerProps>('editor', (mod) => mod.TextEditor as ComponentType<FileViewerProps> | undefined)
+
 /** The 9 built-in file viewer descriptors. */
 export function builtinViewers(): readonly FileViewerDescriptor[] {
   return [
@@ -60,9 +78,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
       icon: (size: number) => <IconDocxOutline16 size={size} />,
       exts: ['docx'],
       fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <DocxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyDocx {...props} />,
     },
     {
       id: 'xlsx',
@@ -70,9 +86,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
       icon: (size: number) => <IconXlsxOutline16 size={size} />,
       exts: ['xlsx'],
       fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <XlsxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyXlsx {...props} />,
     },
     {
       id: 'pptx',
@@ -80,9 +94,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
       icon: (size: number) => <IconPptxOutline16 size={size} />,
       exts: ['pptx'],
       fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <PptxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyPptx {...props} />,
     },
     {
       id: 'markdown',
@@ -90,7 +102,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
       icon: (size: number) => <IconMarkdownOutline16 size={size} />,
       exts: ['md', 'markdown'],
       fetchStrategy: 'fsRead',
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
     },
     {
       id: 'html',
@@ -112,7 +124,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
           desc: () => t('settingsHtmlDefaultUnsafeDesc'),
         }],
       },
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
     },
     {
       id: 'code',
@@ -121,7 +133,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
       exts: [],
       priority: -100,
       fetchStrategy: 'fsRead',
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
     },
     {
       id: 'binary-download',