From b649d1016ed717e3fdd27707c07845b374a53c2a Mon Sep 17 00:00:00 2001 From: blankll Date: Wed, 17 Jun 2026 00:09:58 +0800 Subject: [PATCH] perf: reduce frontend bundle by 57% by limiting Monaco Editor to SQL 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 --- src/composables/useMonacoEditor.ts | 9 ++++++++- types/vite-env.d.ts | 6 ++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/composables/useMonacoEditor.ts b/src/composables/useMonacoEditor.ts index 02748690..68ccdd90 100644 --- a/src/composables/useMonacoEditor.ts +++ b/src/composables/useMonacoEditor.ts @@ -1,8 +1,9 @@ import type { Ref } from 'vue' import type { SqlStatement, StatementToExecute } from './useSqlStatements' -import * as monaco from 'monaco-editor' +import * as monaco from 'monaco-editor/esm/vs/editor/editor.api' import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import { onBeforeUnmount } from 'vue' + import { getSqlGutterDecorations, getStatementAtLine, @@ -13,6 +14,12 @@ import { } from './useSqlStatements' import { useTheme } from './useTheme' +// Import only SQL-related grammars instead of all Monaco languages +// (Typescript/CSS/HTML/JSON workers alone add ~8MB to the bundle). +import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution' +import 'monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution' +import 'monaco-editor/esm/vs/basic-languages/pgsql/pgsql.contribution' + export type { ExecuteSource, StatementToExecute } from './useSqlStatements' // Configure Monaco Editor workers for Vite diff --git a/types/vite-env.d.ts b/types/vite-env.d.ts index 7d350b29..3cb67abb 100644 --- a/types/vite-env.d.ts +++ b/types/vite-env.d.ts @@ -6,3 +6,9 @@ declare module '*.vue' { const component: InstanceType export default component } + +// Monaco Editor API without built-in language contributions +// Types are identical to the main monaco-editor bundle. +declare module 'monaco-editor/esm/vs/editor/editor.api' { + export * from 'monaco-editor' +}