build opt

app.config.ts

@@ -4,8 +4,30 @@ import tailwindcss from "@tailwindcss/vite";
 export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: (id) => {
+            // Split highlight.js into its own chunk
+            if (id.includes("highlight.js")) {
+              return "highlight";
+            }
+            // Split other large vendor libraries
+            if (id.includes("node_modules")) {
+              if (id.includes("@solidjs") || id.includes("solid-js")) {
+                return "solid";
+              }
+              if (id.includes("@trpc")) {
+                return "trpc";
+              }
+              return "vendor";
+            }
+          }
+        }
+      }
+    }
   },
   server: {
-    preset: "vercel",
-  },
+    preset: "vercel"
+  }
 });

src/components/blog/PostBodyClient.tsx

@@ -1,21 +1,115 @@
-import { createEffect, onMount } from "solid-js";
-import hljs from "highlight.js";
-import "highlight.js/styles/github-dark.css";
+import { createEffect } from "solid-js";
+import { createSignal } from "solid-js";
+import type { HLJSApi } from "highlight.js";
 
 export interface PostBodyClientProps {
   body: string;
   hasCodeBlock: boolean;
 }
 
+async function loadHighlightJS(): Promise<HLJSApi> {
+  const [
+    hljsModule,
+    javascript,
+    typescript,
+    python,
+    rust,
+    c,
+    cpp,
+    csharp,
+    ocaml,
+    lua,
+    swift,
+    bash,
+    css,
+    xml, // handles HTML
+    go,
+    glsl,
+    json,
+    markdown,
+    yaml,
+    sql,
+    diff,
+    toml
+  ] = await Promise.all([
+    import("highlight.js/lib/core"),
+    import("highlight.js/lib/languages/javascript"),
+    import("highlight.js/lib/languages/typescript"),
+    import("highlight.js/lib/languages/python"),
+    import("highlight.js/lib/languages/rust"),
+    import("highlight.js/lib/languages/c"),
+    import("highlight.js/lib/languages/cpp"),
+    import("highlight.js/lib/languages/csharp"),
+    import("highlight.js/lib/languages/ocaml"),
+    import("highlight.js/lib/languages/lua"),
+    import("highlight.js/lib/languages/swift"),
+    import("highlight.js/lib/languages/bash"),
+    import("highlight.js/lib/languages/css"),
+    import("highlight.js/lib/languages/xml"),
+    import("highlight.js/lib/languages/go"),
+    import("highlight.js/lib/languages/glsl"),
+    import("highlight.js/lib/languages/json"),
+    import("highlight.js/lib/languages/markdown"),
+    import("highlight.js/lib/languages/yaml"),
+    import("highlight.js/lib/languages/sql"),
+    import("highlight.js/lib/languages/diff"),
+    import("highlight.js/lib/languages/ini"), // handles TOML
+    import("highlight.js/styles/github-dark.css")
+  ]);
+
+  const hljs = hljsModule.default;
+
+  hljs.registerLanguage("javascript", javascript.default);
+  hljs.registerLanguage("typescript", typescript.default);
+  hljs.registerLanguage("python", python.default);
+  hljs.registerLanguage("rust", rust.default);
+  hljs.registerLanguage("c", c.default);
+  hljs.registerLanguage("cpp", cpp.default);
+  hljs.registerLanguage("csharp", csharp.default);
+  hljs.registerLanguage("ocaml", ocaml.default);
+  hljs.registerLanguage("lua", lua.default);
+  hljs.registerLanguage("swift", swift.default);
+  hljs.registerLanguage("bash", bash.default);
+  hljs.registerLanguage("sh", bash.default); // alias
+  hljs.registerLanguage("css", css.default);
+  hljs.registerLanguage("html", xml.default);
+  hljs.registerLanguage("xml", xml.default);
+  hljs.registerLanguage("go", go.default);
+  hljs.registerLanguage("glsl", glsl.default);
+  hljs.registerLanguage("json", json.default);
+  hljs.registerLanguage("markdown", markdown.default);
+  hljs.registerLanguage("yaml", yaml.default);
+  hljs.registerLanguage("yml", yaml.default); // alias
+  hljs.registerLanguage("sql", sql.default);
+  hljs.registerLanguage("diff", diff.default);
+  hljs.registerLanguage("toml", toml.default);
+
+  // Also register common aliases
+  hljs.registerLanguage("js", javascript.default);
+  hljs.registerLanguage("ts", typescript.default);
+  hljs.registerLanguage("jsx", javascript.default);
+  hljs.registerLanguage("tsx", typescript.default);
+
+  return hljs;
+}
+
 export default function PostBodyClient(props: PostBodyClientProps) {
   let contentRef: HTMLDivElement | undefined;
+  const [hljs, setHljs] = createSignal<HLJSApi | null>(null);
 
-  // Apply syntax highlighting when component mounts and when body changes
+  // Load highlight.js only when needed
   createEffect(() => {
-    if (props.hasCodeBlock && contentRef) {
-      // Small delay to ensure DOM is ready
+    if (props.hasCodeBlock && !hljs()) {
+      loadHighlightJS().then(setHljs);
+    }
+  });
+
+  // Apply syntax highlighting when hljs loads and when body changes
+  createEffect(() => {
+    const hljsInstance = hljs();
+    if (hljsInstance && props.hasCodeBlock && contentRef) {
       setTimeout(() => {
-        hljs.highlightAll();
+        hljsInstance.highlightAll();
       }, 100);
     }
   });