add code splitting and lazy imports

Author: renardeinside

src/App.tsx

@@ -1,9 +1,12 @@
-import Editor from "./components/Editor";
 import { Navbar } from "./components/Navbar";
 import { ThemeProvider } from "./components/theme-provider";
 import { Toaster } from "@/components/ui/sonner";
+import { lazy } from "react";
+
+const Editor = lazy(() => import("./components/Editor"));
 
 function App() {
+  
   return (
     <ThemeProvider defaultTheme="dark" storageKey="strophe-theme">
       <div className="font-mono">

src/components/Editor.tsx

@@ -1,62 +1,13 @@
 import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
-import Placeholder from "@tiptap/extension-placeholder";
-import Link from "@tiptap/extension-link";
-import { createLowlight, common } from "lowlight";
-import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
 import { useAtom } from "jotai";
 import { $storage, contentAtom } from "@/lib/stores";
-import TaskList from "@tiptap/extension-task-list";
-import TaskItem from "@tiptap/extension-task-item";
-import Image from "@tiptap/extension-image";
-import { nodePasteRule, type PasteRuleFinder } from "@tiptap/core";
-import EditorMenu from "./EditorMenu";
-import { useEffect } from "react";
-import { toast } from "sonner";
 
-const getExtensions = () => {
-  const ImageFinder: PasteRuleFinder = /data:image\//g;
+import { lazy, useEffect } from "react";
+import { toast } from "sonner"
+import { loadExtensions } from "@/lib/extensions";
 
-  const ImageExtended = Image.extend({
-    name: "ImageExtended",
-    addPasteRules() {
-      return [
-        nodePasteRule({
-          find: ImageFinder,
-          type: this.type,
-          getAttributes(match) {
-            if (match.input) {
-              return {
-                src: match.input,
-              };
-            }
-          },
-        }),
-      ];
-    },
-  });
-
-  const lowlight = createLowlight(common);
 
-  // define your extension array
-  const extensions = [
-    StarterKit.configure({
-      codeBlock: false,
-    }),
-    CodeBlockLowlight.configure({
-      lowlight,
-    }),
-    Placeholder.configure({ placeholder: "Start typing..." }),
-    Link.configure({ openOnClick: true, autolink: true }),
-    TaskList,
-    TaskItem.configure({
-      nested: true,
-    }),
-    ImageExtended,
-  ];
-
-  return extensions;
-};
+const EditorMenu = lazy(() => import("./EditorMenu"));
 
 const Editor = () => {
   const [content, setContent] = useAtom(contentAtom);
@@ -71,7 +22,7 @@ const Editor = () => {
   };
 
   const editor = useEditor({
-    extensions: getExtensions(),
+    extensions: loadExtensions(),
     content: safeParse(content),
     onUpdate: ({ editor }) => {
       setContent(JSON.stringify(editor.getJSON()));

src/lib/extensions.ts

@@ -0,0 +1,53 @@
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import { createLowlight, common } from "lowlight";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
+import TaskList from "@tiptap/extension-task-list";
+import TaskItem from "@tiptap/extension-task-item";
+import Image from "@tiptap/extension-image";
+import { nodePasteRule, type PasteRuleFinder } from "@tiptap/core";
+
+export const loadExtensions = () => {
+  const ImageFinder: PasteRuleFinder = /data:image\//g;
+
+  const ImageExtended = Image.extend({
+    name: "ImageExtended",
+    addPasteRules() {
+      return [
+        nodePasteRule({
+          find: ImageFinder,
+          type: this.type,
+          getAttributes(match) {
+            if (match.input) {
+              return {
+                src: match.input,
+              };
+            }
+          },
+        }),
+      ];
+    },
+  });
+
+  const lowlight = createLowlight(common);
+
+  // define your extension array
+  const extensions = [
+    StarterKit.configure({
+      codeBlock: false,
+    }),
+    CodeBlockLowlight.configure({
+      lowlight,
+    }),
+    Placeholder.configure({ placeholder: "Start typing..." }),
+    Link.configure({ openOnClick: true, autolink: true }),
+    TaskList,
+    TaskItem.configure({
+      nested: true,
+    }),
+    ImageExtended,
+  ];
+
+  return extensions;
+};

vite.config.ts

@@ -5,6 +5,26 @@ import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 // https://vite.dev/config/
 export default defineConfig({
+  build: {
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          if (id.includes("react")) {
+            return "react";
+          }
+          if (id.includes("tiptap")) {
+            return "tiptap";
+          }
+          if (id.includes("highlight.js")) {
+            return "highlight";
+          }
+          if (id.includes("prosemirror")) {
+            return "prosemirror";
+          }
+        }
+      }
+    }
+  },
   plugins: [
     react(),
     viteStaticCopy({