mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-30 20:29:15 +00:00
perf(frontend): lazy-load Monaco editor + diff editor (#824)
Monaco-editor and @monaco-editor/react were imported eagerly from
main.tsx so that the locally-bundled Monaco was registered with
@monaco-editor/react (CSP blocks the default CDN load). This pulled
the ~3 MB monaco chunk into every cold app start regardless of
whether a user ever opened the editor.
Move the Monaco setup into a new frontend/src/lib/monacoLoader.tsx
module that exports React.lazy-wrapped Editor and DiffEditor
components. The lazy factory awaits a one-shot setupMonaco() that
dynamic-imports monaco-editor, @monaco-editor/react, and the editor
worker, then calls loader.config({ monaco }) and sets
window.MonacoEnvironment before resolving the underlying component.
Concurrent first mounts share a single setup promise so the work
runs at most once per process. The three consumers (EditorLayout,
FileViewer, GitSourceDiffDialog) wrap their editor in <Suspense>
with a transparent fallback that preserves layout while the chunk
loads.
main.tsx loses three eager imports plus the MonacoEnvironment +
loader.config bootstrap. The vite.config.ts manualChunks group from
PR #823 was already prepared for this; the monaco chunk now loads
on demand instead of being bundled into the entry chunk.
This commit is contained in:
@@ -4,20 +4,6 @@ import './index.css'
|
||||
import App from './App.tsx'
|
||||
import ErrorBoundary from './components/ErrorBoundary.tsx'
|
||||
import { initializeDensity } from './hooks/use-density'
|
||||
import * as monaco from 'monaco-editor'
|
||||
import { loader } from '@monaco-editor/react'
|
||||
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
|
||||
|
||||
// Use the locally bundled Monaco instead of fetching from cdn.jsdelivr.net.
|
||||
// The CSP (scriptSrc: 'self') blocks external CDN scripts; bundling avoids
|
||||
// that entirely. Sencho only needs YAML/plaintext so the base editorWorker
|
||||
// covers all language modes - no additional language workers required.
|
||||
window.MonacoEnvironment = {
|
||||
getWorker(): Worker {
|
||||
return new editorWorker()
|
||||
},
|
||||
}
|
||||
loader.config({ monaco })
|
||||
|
||||
initializeDensity()
|
||||
|
||||
|
||||
Reference in New Issue
Block a user