perf: monaco-editor 改为动态导入，移除内存限制 - 降低构建资源需求

web/src/pages/access/FileEditor.tsx

@@ -1,43 +1,12 @@
-import React, {useEffect, useState} from 'react';
+import React, {Suspense, useEffect, useState} from 'react';
 import {App, Button, ConfigProvider, Empty, Modal, Tabs, theme, Tooltip} from "antd";
 import {Copy, RefreshCw, Save, X} from "lucide-react";
-import {Editor as MonacoEditor, loader} from '@monaco-editor/react';
 import {useTranslation} from "react-i18next";
 import copy from "copy-to-clipboard";
 import fileSystemApi from "@/api/filesystem-api";
 import {OpenFile} from "@/pages/access/hooks/use-file-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 cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
 
-self.MonacoEnvironment = {
-    getWorker(_, label) {
-        if (label === 'json') {
-            return new jsonWorker();
-        }
-        if (label === 'css' || label === 'scss' || label === 'less') {
-            return new cssWorker();
-        }
-        if (label === 'html' || label === 'handlebars' || label === 'razor') {
-            return new htmlWorker();
-        }
-        if (label === 'typescript' || label === 'javascript') {
-            return new tsWorker();
-        }
-        return new editorWorker();
-    },
-};
-
-loader.config({monaco});
-
-loader.init().then(() => {
-    console.log('monaco init success')
-}).catch((error) => {
-    console.error('monaco init error', error);
-});
+const MonacoEditor = React.lazy(() => import('@monaco-editor/react').then(mod => ({default: mod.Editor})));
 
 interface Props {
     fsId: string
@@ -150,6 +119,7 @@ const FileEditor: React.FC<Props> = ({
             ),
             children: (
                 <div className="h-full">
+                    <Suspense fallback={<div className="flex items-center justify-center h-full text-gray-400">Loading editor...</div>}>
                     <MonacoEditor
                         language={item.language}
                         height={window.innerHeight * 0.7}
@@ -176,6 +146,7 @@ const FileEditor: React.FC<Props> = ({
                             }
                         }}
                     />
+                    </Suspense>
                 </div>
             ),
         };