perf: compiler code move to woker thread

Author: json-q

src/layout/root-preview/compiler.ts renamed to src/layout/root-preview/compiler.worker.ts

@@ -7,8 +7,28 @@ type TransformOptions = Parameters<typeof transform>["1"];
 type PluginItem = TransformOptions["plugins"];
 type PluginObj = NonNullable<PluginItem>[number];
 
+export interface CompilerMessageEventData {
+  type: "CODE_COMPILED" | "CODE_COMPILE_ERROR";
+  data: string | Error;
+}
+
+// woker compiler
+self.addEventListener("message", ({ data }) => {
+  try {
+    self.postMessage({
+      type: "CODE_COMPILED",
+      data: compile(data),
+    } satisfies CompilerMessageEventData);
+  } catch (e) {
+    self.postMessage({
+      type: "CODE_COMPILE_ERROR",
+      data: e as Error,
+    } satisfies CompilerMessageEventData);
+  }
+});
+
 // 编译 main.tsx 的内容
-export const compile = (files: MultipleFiles) => {
+const compile = (files: MultipleFiles) => {
   const main = files[ENTRY_FILE_NAME];
   return babelTransform(ENTRY_FILE_NAME, main.value, files);
 };

src/layout/root-preview/index.tsx

@@ -1,11 +1,15 @@
 import { useContext, useEffect, useState } from "react";
 import { PlaygroundContext } from "@/core/context";
-import { compile } from "./compiler";
+import type { CompilerMessageEventData } from "./compiler.worker";
 import iframeSource from "./iframe.html?raw";
 import { IMPORT_MAP_FILE_NAME } from "@/core/files";
 import ErrorAlert from "@/components/error-alert";
 import { cn } from "@/lib/utils";
 
+const compilerWorker = new Worker(new URL("./compiler.worker.ts", import.meta.url), {
+  type: "module",
+});
+
 function genIframeUrl(importMap: string, compilerCode: string) {
   const htmlStr = iframeSource
     .replace(
@@ -36,11 +40,21 @@ export default function RootPreview() {
 
   // ============== Compiler ==============
   const [compiledCode, setCompiledCode] = useState("");
+
   useEffect(() => {
-    const res = compile(files);
-    setCompiledCode(res);
+    compilerWorker.postMessage(files);
   }, [files]);
 
+  useEffect(() => {
+    compilerWorker.addEventListener("message", (ev: MessageEvent<CompilerMessageEventData>) => {
+      if (ev.data.type === "CODE_COMPILED") {
+        setCompiledCode(ev.data.data as string);
+      } else if (ev.data.type === "CODE_COMPILE_ERROR") {
+        console.error(ev.data.data);
+      }
+    });
+  }, []);
+
   // ============== Iframe Url ==============
   const [iframeUrl, setIframeUrl] = useState(() => genIframeUrl(importMapContent, compiledCode));
 
@@ -52,9 +66,9 @@ export default function RootPreview() {
   // ============== Error Handler ==============
   const [errMsg, setErrMsg] = useState<string>();
 
-  const handleMessage = (event: MessageEvent<MessageData>) => {
-    if (event.data.type === "ERROR") {
-      setErrMsg(event.data.message);
+  const handleMessage = (ev: MessageEvent<MessageData>) => {
+    if (ev.data.type === "ERROR") {
+      setErrMsg(ev.data.message);
     }
   };