improve bundle

src/client/workspace-session.ts

···
     const worker = new WorkerClient(signal);
 
     try {
-      const clientExports = parseClientModule(clientCode);
+      const clientExports = await parseClientModule(clientCode);
       const manifest = buildManifest("client", clientExports);
-      const compiledClient = compileToCommonJS(clientCode);
+      const compiledClient = await compileToCommonJS(clientCode);
       const clientModule = evaluateClientModule(compiledClient);
       registerClientModule("client", clientModule);
 
-      const actionNames = parseServerActions(serverCode);
-      const compiledServer = compileToCommonJS(serverCode);
+      const actionNames = await parseServerActions(serverCode);
+      const compiledServer = await compileToCommonJS(serverCode);
 
       await worker.deploy(compiledServer, manifest, actionNames);
       const renderRaw = await worker.render();

src/shared/compiler.ts

···
-import { transform } from "@babel/standalone";
 import type * as t from "@babel/types";
+
+// Babel is lazy-loaded and preloaded via <link rel="modulepreload"> in HTML
+let babelPromise: Promise<typeof import("@babel/standalone")> | null = null;
+
+function getBabel(): Promise<typeof import("@babel/standalone")> {
+  if (!babelPromise) {
+    babelPromise = import("@babel/standalone");
+  }
+  return babelPromise;
+}
+
+async function transform(
+  code: string,
+  options: Parameters<typeof import("@babel/standalone").transform>[1],
+): Promise<ReturnType<typeof import("@babel/standalone").transform>> {
+  const babel = await getBabel();
+  return babel.transform(code, options);
+}
 
 type BabelProgram = t.Program & {
   directives?: Array<{ value?: { value?: string } }>;
···
   code?: string;
 };
 
-export function parseExports(code: string): string[] {
+export async function parseExports(code: string): Promise<string[]> {
   const exports: string[] = [];
-  const result = transform(code, {
+  const result = (await transform(code, {
     presets: ["react"],
     ast: true,
-  }) as TransformResult;
+  })) as TransformResult;
 
   const ast = result.ast;
   if (!ast) return exports;
···
   return hasDirective(body, "use server");
 }
 
-export function parseServerActions(code: string): string[] {
-  const result = transform(code, {
+export async function parseServerActions(code: string): Promise<string[]> {
+  const result = (await transform(code, {
     presets: ["react"],
     ast: true,
-  }) as TransformResult;
+  })) as TransformResult;
 
   const ast = result.ast;
   if (!ast) return [];
···
   return actions;
 }
 
-export function parseClientModule(code: string): string[] {
-  const result = transform(code, {
+export async function parseClientModule(code: string): Promise<string[]> {
+  const result = (await transform(code, {
     presets: ["react"],
     ast: true,
-  }) as TransformResult;
+  })) as TransformResult;
 
   const ast = result.ast;
   if (!ast) return [];
···
   return exports;
 }
 
-export function compileToCommonJS(code: string): string {
-  const result = transform(code, {
+export async function compileToCommonJS(code: string): Promise<string> {
+  const result = (await transform(code, {
     presets: ["react"],
     sourceType: "module",
     plugins: [["transform-modules-commonjs", { loose: true }]],
-  }) as TransformResult;
+  })) as TransformResult;
   return result.code ?? "";
 }
 

vite.config.js

···
   };
 }
 
-function preloadCodemirrorPlugin() {
+function preloadChunksPlugin() {
   return {
-    name: "preload-codemirror",
+    name: "preload-chunks",
     transformIndexHtml(html, { bundle, filename }) {
       if (!bundle) return; // dev mode
       const tags = [];
 
-      const cmChunk = Object.keys(bundle).find((k) => k.includes("codemirror"));
-      if (cmChunk) {
-        tags.push({
-          tag: "link",
-          attrs: { rel: "modulepreload", href: "/" + cmChunk },
-          injectTo: "head",
-        });
+      // Preload codemirror and babel chunks
+      for (const name of ["codemirror", "babel"]) {
+        const chunk = Object.keys(bundle).find((k) => k.includes(name));
+        if (chunk) {
+          tags.push({
+            tag: "link",
+            attrs: { rel: "modulepreload", href: "/" + chunk },
+            injectTo: "head",
+          });
+        }
       }
 
       // From index.html, prefetch embed resources for the iframe
···
 }
 
 export default defineConfig(({ mode }) => ({
-  plugins: [react(), rolldownWorkerPlugin(), serveEmbedPlugin(), preloadCodemirrorPlugin()],
+  plugins: [react(), rolldownWorkerPlugin(), serveEmbedPlugin(), preloadChunksPlugin()],
   server: { port: 3333 },
   define: {
     "process.env.NODE_ENV": JSON.stringify(mode === "development" ? "development" : "production"),