From 44450059556ae244581ef3fc2d9f3abf943adf89 Mon Sep 17 00:00:00 2001
From: Skye Young <iskyex@outlook.com>
Date: Wed, 13 Aug 2025 10:46:34 +0800
Subject: [PATCH 1/3] fix(form/Editor): bundle monaco editor

---
 src/components/form/Editor.tsx | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/form/Editor.tsx b/src/components/form/Editor.tsx
index 2501fb22a..60bf582c6 100644
--- a/src/components/form/Editor.tsx
+++ b/src/components/form/Editor.tsx
@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
-import { Editor, loader, type Monaco, useMonaco } from '@monaco-editor/react';
+import { Editor, loader,useMonaco } from '@monaco-editor/react';
 import clsx from 'clsx';
-import { editor } from 'monaco-editor';
+import * as monaco from 'monaco-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
 import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import { useEffect, useMemo, useRef, useState } from 'react';
@@ -31,12 +31,9 @@ import { useTranslation } from 'react-i18next';
 
 import { genControllerProps } from './util';
 
-type SetupMonacoProps = {
-  monaco: Monaco;
-};
-
-const setupMonaco = ({ monaco }: SetupMonacoProps) => {
-  window.MonacoEnvironment = {
+// #region Monaco Editor Setup
+const initializeMonacoEditor = () => {
+  self.MonacoEnvironment = {
     getWorker(_, label) {
       if (label === 'json') {
         return new jsonWorker();
@@ -45,10 +42,13 @@ const setupMonaco = ({ monaco }: SetupMonacoProps) => {
     },
   };
   loader.config({ monaco });
-  return loader.init();
+  loader.init();
 };
 
-const options: editor.IStandaloneEditorConstructionOptions = {
+initializeMonacoEditor();
+// #endregion
+
+const options: monaco.editor.IStandaloneEditorConstructionOptions = {
   minimap: { enabled: false },
   contextmenu: false,
   lineNumbersMinChars: 3,
@@ -106,8 +106,8 @@ export const FormItemEditor = <T extends FieldValues>(
   const [internalLoading, setLoading] = useState(false);
 
   useEffect(() => {
-    if (!monaco) return;
     setLoading(true);
+    if (!monaco) return;
 
     const schemas = [];
     if (customSchema) {
@@ -155,7 +155,6 @@ export const FormItemEditor = <T extends FieldValues>(
             restField.disabled && 'editor-wrapper--disabled'
           ),
         }}
-        beforeMount={(monaco) => setupMonaco({ monaco })}
         defaultValue={controllerProps.defaultValue}
         value={value}
         onChange={fOnChange}

From 3a0b3fe0aa98f62ea469fe1c9485f584a7faeff3 Mon Sep 17 00:00:00 2001
From: Skye Young <iskyex@outlook.com>
Date: Wed, 13 Aug 2025 10:52:16 +0800
Subject: [PATCH 2/3] chore: lint

---
 src/components/form/Editor.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/form/Editor.tsx b/src/components/form/Editor.tsx
index 60bf582c6..6e3e2c085 100644
--- a/src/components/form/Editor.tsx
+++ b/src/components/form/Editor.tsx
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
-import { Editor, loader,useMonaco } from '@monaco-editor/react';
+import { Editor, loader, useMonaco } from '@monaco-editor/react';
 import clsx from 'clsx';
 import * as monaco from 'monaco-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

From 7e1f7d5f2704d61eb4463221c851b49ebef1fc76 Mon Sep 17 00:00:00 2001
From: Skye Young <iskyex@outlook.com>
Date: Thu, 14 Aug 2025 07:49:49 +0800
Subject: [PATCH 3/3] fix: reduce size

---
 src/components/form/Editor.tsx | 28 +++++---------------------
 src/utils/monaco.ts            | 36 ++++++++++++++++++++++++++++++++++
 vite.config.ts                 | 15 ++++++++++++++
 3 files changed, 56 insertions(+), 23 deletions(-)
 create mode 100644 src/utils/monaco.ts

diff --git a/src/components/form/Editor.tsx b/src/components/form/Editor.tsx
index 6e3e2c085..d2832d335 100644
--- a/src/components/form/Editor.tsx
+++ b/src/components/form/Editor.tsx
@@ -15,11 +15,8 @@
  * limitations under the License.
  */
 import { InputWrapper, type InputWrapperProps, Skeleton } from '@mantine/core';
-import { Editor, loader, useMonaco } from '@monaco-editor/react';
+import { Editor } from '@monaco-editor/react';
 import clsx from 'clsx';
-import * as monaco from 'monaco-editor';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   type FieldValues,
@@ -29,24 +26,11 @@ import {
 } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
-import { genControllerProps } from './util';
+import { monaco, setupMonacoEditor } from '@/utils/monaco';
 
-// #region Monaco Editor Setup
-const initializeMonacoEditor = () => {
-  self.MonacoEnvironment = {
-    getWorker(_, label) {
-      if (label === 'json') {
-        return new jsonWorker();
-      }
-      return new editorWorker();
-    },
-  };
-  loader.config({ monaco });
-  loader.init();
-};
+import { genControllerProps } from './util';
 
-initializeMonacoEditor();
-// #endregion
+setupMonacoEditor();
 
 const options: monaco.editor.IStandaloneEditorConstructionOptions = {
   minimap: { enabled: false },
@@ -102,12 +86,10 @@ export const FormItemEditor = <T extends FieldValues>(
     fieldState,
   } = useController<T>(enhancedControllerProps);
 
-  const monaco = useMonaco();
   const [internalLoading, setLoading] = useState(false);
 
   useEffect(() => {
     setLoading(true);
-    if (!monaco) return;
 
     const schemas = [];
     if (customSchema) {
@@ -125,7 +107,7 @@ export const FormItemEditor = <T extends FieldValues>(
     });
 
     setLoading(false);
-  }, [monaco, customSchema]);
+  }, [customSchema]);
 
   return (
     <InputWrapper
diff --git a/src/utils/monaco.ts b/src/utils/monaco.ts
new file mode 100644
index 000000000..340ca915f
--- /dev/null
+++ b/src/utils/monaco.ts
@@ -0,0 +1,36 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import 'monaco-editor/esm/vs/editor/editor.all.js';
+import 'monaco-editor/esm/vs/language/json/monaco.contribution';
+
+import { loader } from '@monaco-editor/react';
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+
+export { monaco };
+
+export const setupMonacoEditor = () => {
+  self.MonacoEnvironment = {
+    getWorker(_, label) {
+      if (label === 'json') return new jsonWorker();
+      return new editorWorker();
+    },
+  };
+  loader.config({ monaco });
+  loader.init();
+};
diff --git a/vite.config.ts b/vite.config.ts
index 24467501e..eaa597963 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,6 +62,21 @@ export default defineConfig({
       },
     }),
   },
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: {
+          'react-vendor': ['react', 'react-dom'],
+          'monaco-editor-vendor': ['monaco-editor', '@monaco-editor/react'],
+          'antd-vendor': [
+            'antd',
+            '@ant-design/pro-components',
+            '@ant-design/v5-patch-for-react-19',
+          ],
+        },
+      },
+    },
+  },
   plugins: [
     tsconfigPaths(),
     UnpluginIcons({