refactor(bundle): improve code splitting

src/components/loading.tsx

@@ -2,7 +2,7 @@ import { Spinner } from './ui/spinner';
 
 export const Loading = () => {
   return (
-    <div className="flex h-screen w-screen items-center justify-center">
+    <div className="flex size-full items-center justify-center">
       <Spinner />
     </div>
   );

src/features/editor/components/editor/cm-extensions.ts

@@ -0,0 +1,45 @@
+import { esLint, javascript } from '@codemirror/lang-javascript';
+import { linter, lintGutter } from '@codemirror/lint';
+import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
+import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
+import { worker as globalsWorker } from 'globals';
+
+const EsLintConfig = {
+  languageOptions: {
+    globals: {
+      ...globalsWorker,
+      console: true,
+    },
+    parserOptions: {
+      ecmaVersion: 2023,
+      sourceType: 'module',
+    },
+  },
+  rules: {
+    semi: ['error', 'never'],
+  },
+};
+
+const newLinter = async () => {
+  const { ...eslint } = await import('eslint-linter-browserify');
+  return new eslint.Linter();
+};
+
+export const getExtensions = async () => {
+  const extensions: ReactCodeMirrorProps['extensions'] = [
+    basicSetup({
+      foldGutter: false,
+      dropCursor: false,
+      allowMultipleSelections: true,
+      indentOnInput: true,
+      autocompletion: true,
+      closeBrackets: true,
+      bracketMatching: true,
+    }),
+    javascript(),
+    lintGutter(),
+    linter(esLint(await newLinter(), EsLintConfig)),
+  ];
+
+  return extensions;
+};

src/features/editor/components/editor/index.tsx

@@ -1,58 +1,42 @@
-import { esLint, javascript } from '@codemirror/lang-javascript';
-import { linter, lintGutter } from '@codemirror/lint';
-import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
 import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
-import CodeMirror from '@uiw/react-codemirror';
-import * as eslint from 'eslint-linter-browserify';
-import { worker as globalsWorker } from 'globals';
-import { useMemo, useRef } from 'react';
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 
+import { Loading } from '@/components/loading';
 import { useTheme } from '@/hooks/use-theme';
 import { debounce } from '@/lib/debounce';
 
 import { useUntrustedMode } from '../../hooks/use-untrusted-mode';
 import { useCodeStore } from '../../stores/editor';
 import { themeInit } from './theme';
 
+const CodeMirror = lazy(() => import('@uiw/react-codemirror'));
+
 const darkTheme = themeInit({ theme: 'dark' });
 const lightTheme = themeInit({ theme: 'light' });
 
-const EsLintConfig = {
-  languageOptions: {
-    globals: {
-      ...globalsWorker,
-      console: true,
-    },
-    parserOptions: {
-      ecmaVersion: 2023,
-      sourceType: 'module',
-    },
-  },
-  rules: {
-    semi: ['error', 'never'],
-  },
-};
-
-const extensions: ReactCodeMirrorProps['extensions'] = [
-  basicSetup({
-    foldGutter: false,
-    dropCursor: false,
-    allowMultipleSelections: true,
-    indentOnInput: true,
-    autocompletion: true,
-    closeBrackets: true,
-    bracketMatching: true,
-  }),
-  javascript(),
-  lintGutter(),
-  linter(esLint(new eslint.Linter(), EsLintConfig)),
-];
-
 export const CodemirrorEditor = () => {
   const { themeMode } = useTheme();
   const { code, setCode } = useCodeStore();
   const { isUntrustedMode, isUnedited, setUnedited } = useUntrustedMode();
   const codeRef = useRef<string | null>(null);
+  const [extensions, setExtensions] = useState<
+    ReactCodeMirrorProps['extensions']
+  >([]);
+
+  const getMemoExtensions = useMemo(async () => {
+    const lib = await import('./cm-extensions');
+    const res = await lib.getExtensions();
+    return res;
+  }, []);
+
+  const loadExtensions = async () => {
+    const ext = await getMemoExtensions;
+    setExtensions(ext);
+  };
+
+  useEffect(() => {
+    loadExtensions();
+  }, []);
 
   codeRef.current = code;
 
@@ -77,17 +61,21 @@ export const CodemirrorEditor = () => {
   }, [themeMode]);
 
   return (
-    <CodeMirror
-      value={codeRef.current ?? ''}
-      theme={getCurrentTheme}
-      lang="javascript"
-      height="100%"
-      style={{ height: '100%', overflow: 'auto', fontSize: '.9rem' }}
-      readOnly={isUntrustedMode}
-      extensions={extensions}
-      onChange={handleEditorChange}
-      spellCheck={false}
-      translate="no"
-    />
+    <Suspense fallback={<Loading />}>
+      <CodeMirror
+        value={codeRef.current ?? ''}
+        theme={getCurrentTheme}
+        lang="javascript"
+        height="100%"
+        style={{ height: '100%', overflow: 'auto', fontSize: '.9rem' }}
+        readOnly={isUntrustedMode}
+        extensions={extensions}
+        onChange={handleEditorChange}
+        spellCheck={false}
+        translate="no"
+      />
+    </Suspense>
   );
 };
+
+export default CodemirrorEditor;

src/features/editor/components/index.ts

@@ -1,4 +1,2 @@
-export { CodemirrorEditor } from './editor';
 export { Footer } from './footer';
 export { Header } from './header';
-export { Output } from './output';

src/features/editor/components/output/index.tsx

@@ -13,3 +13,5 @@ export const Output = () => {
     </>
   );
 };
+
+export default Output;

src/features/editor/index.tsx

@@ -1,14 +1,20 @@
+import { lazy, Suspense } from 'react';
+
+import { Loading } from '@/components/loading';
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
 } from '@/components/ui/resizable';
 
-import { CodemirrorEditor, Footer, Header, Output } from './components';
+import { Footer, Header } from './components';
 import { useLayoutHandler } from './hooks/use-layout-handler';
 import EditorProviders from './providers';
 import { useSettingsStore } from './stores/settings';
 
+const Output = lazy(() => import('./components/output'));
+const CodemirrorEditor = lazy(() => import('./components/editor'));
+
 const Editor = () => {
   const { layout_direction } = useSettingsStore();
   const {
@@ -39,7 +45,9 @@ const Editor = () => {
               onCollapse={() => setIsVisiblePanelLeft(false)}
               onExpand={() => setIsVisiblePanelLeft(true)}
             >
-              <CodemirrorEditor />
+              <Suspense fallback={<Loading />}>
+                <CodemirrorEditor />
+              </Suspense>
             </ResizablePanel>
             <ResizableHandle withHandle className="hidden md:flex" />
             <ResizablePanel
@@ -50,7 +58,9 @@ const Editor = () => {
               onCollapse={() => setIsVisiblePanelRight(false)}
               onExpand={() => setIsVisiblePanelRight(true)}
             >
-              <Output />
+              <Suspense fallback={<Loading />}>
+                <Output />
+              </Suspense>
             </ResizablePanel>
           </ResizablePanelGroup>
         </section>

src/routes/index.tsx

@@ -14,7 +14,13 @@ const Router = () => {
   });
 
   return (
-    <Suspense fallback={<Loading />}>
+    <Suspense
+      fallback={
+        <div className="h-screen w-screen">
+          <Loading />
+        </div>
+      }
+    >
       <WRouter base={BASE_URL}>
         <Switch>
           {pageRoutes}