Skip to content

perf: reduce frontend bundle by 57% by limiting Monaco Editor to SQL languages only#97

Open
Blankll wants to merge 1 commit into
masterfrom
optimize/bundle-size
Open

perf: reduce frontend bundle by 57% by limiting Monaco Editor to SQL languages only#97
Blankll wants to merge 1 commit into
masterfrom
optimize/bundle-size

Conversation

@Blankll

@Blankll Blankll commented Jun 16, 2026

Copy link
Copy Markdown
Member

Summary

Reduces the frontend bundle from 16 MB to 6.8 MB by switching from the full Monaco Editor bundle (which includes language services for TypeScript, CSS, HTML, JSON and 40+ other languages) to importing only the editor API and registering only SQL-related grammar contributions.

Changes

  • useMonacoEditor.ts: Import from monaco-editor/esm/vs/editor/editor.api instead of monaco-editor, and add explicit imports for sql, mysql, and pgsql language grammars
  • types/vite-env.d.ts: Add type declaration for the sub-path import so TypeScript resolves types correctly

Impact

Asset Before After Savings
ts.worker 6.7 MB 6.7 MB
css.worker 1.0 MB 1.0 MB
html.worker 680 KB 680 KB
json.worker 380 KB 380 KB
Other language grammars (40+) ~500 KB ~500 KB
SQL/MySQL/PGSQL grammars bundled 36 KB
editor.worker 248 KB 248 KB
Total dist 16 MB 6.8 MB 9.2 MB (57%)

Verification

  • npm run build passes
  • npm run lint:check passes on changed files
  • ✅ All 364 tests pass
  • ✅ Only editor.worker and SQL grammar files remain in dist/

Notes

This change has no impact on SQL editing functionality — syntax highlighting, autocompletion, keyboard shortcuts, gutter decorations, and all other editor features work identically.

…languages only

Switch from the full monaco-editor bundle (which includes TypeScript, CSS,
HTML, JSON language services and their heavy workers) to only importing
the editor API + SQL/MySQL/PGSQL grammar contributions.

Before: 16 MB dist/ with ts.worker (6.7 MB), css.worker, html.worker, json.worker
After:  6.8 MB dist/ with only editor.worker + SQL grammars
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant