[audit] performance: CodeMirror eagerly loaded at startup

[claude]

Problem

In src/components/Editor/Editor.tsx (line 24), SourceEditor is imported eagerly:

import { SourceEditor } from "./SourceEditor";

SourceEditor.tsx in turn eagerly imports the full CodeMirror dependency tree:

• @codemirror/state
• @codemirror/view
• @codemirror/commands
• @codemirror/lang-markdown
• @codemirror/language-data
• @codemirror/autocomplete
• @codemirror/search
• Plus sourceEditorExtensions.ts which pulls in more modules

This means the entire CodeMirror bundle (~200–400KB) is loaded on every app start, even when the user stays in WYSIWYG mode (the default).

Context

The project already correctly lazy-loads other large dependencies:

• Mermaid: import("mermaid") in src/plugins/mermaid/index.ts:48
• KaTeX: import("katex") in src/plugins/latex/katexLoader.ts:13
• Markmap: lazy-loaded similarly

CodeMirror is the last major eagerly-loaded optional dependency.

Impact

Slower initial page load and higher initial memory usage for all users, regardless of whether they use source mode.

Suggested fix

Wrap SourceEditor in React.lazy():

const SourceEditor = lazy(() =>
  import("./SourceEditor").then(m => ({ default: m.SourceEditor }))
);

Then wrap the <SourceEditor> usage in a <Suspense> boundary. The keepAlive path would need the Suspense wrapper too, but CodeMirror would only load when source mode is first activated.

File: src/components/Editor/Editor.tsx:24

[xiaolai]

Fixed in 464a96a.

Replaced the eager import { SourceEditor } from "./SourceEditor" with React.lazy():

const SourceEditor = lazy(() =>
  import("./SourceEditor").then((m) => ({ default: m.SourceEditor }))
);

Wrapped both keepAlive and non-keepAlive branches in <Suspense fallback={null}>. The CodeMirror bundle is now deferred until source mode is first activated.