Split editor and terminal client chunks

src/client/src/plugins/core/panels.ts

@@ -1,8 +1,6 @@
 import { html, type TemplateResult } from "lit";
 import type { FileTreeEntry, GitDiffResponse, GitStatusResponse } from "../../api";
 import type { WorkspacePanelContribution, WorkspacePanelContext } from "../types";
-import "../../components/CodeViewer";
-import "../../components/TerminalPanel";
 
 export function createCoreWorkspacePanels(): WorkspacePanelContribution[] {
   return [
@@ -68,6 +66,7 @@ function renderFileViewer(context: WorkspacePanelContext): TemplateResult {
   if (context.selectedFilePath === undefined || context.selectedFilePath === "") return html`<p class="muted">Select a file.</p>`;
   if (file === undefined) return html`<p class="muted">Loading ${context.selectedFilePath}…</p>`;
   if (file.binary) return html`<p class="muted">Binary file: ${file.path}</p>`;
+  loadCodeViewer();
   return html`
     <div class="viewer-header"><strong>${file.path}</strong><small>${file.language ?? "text"}${file.truncated ? " · truncated" : ""}</small></div>
     <code-viewer .content=${file.content} .language=${file.language}></code-viewer>
@@ -75,6 +74,7 @@ function renderFileViewer(context: WorkspacePanelContext): TemplateResult {
 }
 
 function renderTerminal(context: WorkspacePanelContext): TemplateResult {
+  loadTerminalPanel();
   return html`<terminal-panel .workspace=${context.workspace}></terminal-panel>`;
 }
 
@@ -120,6 +120,7 @@ function renderDiffViewer(context: WorkspacePanelContext): TemplateResult {
 }
 
 function renderDiffSection(diff: GitDiffResponse): TemplateResult {
+  loadCodeViewer();
   return html`
     <section class="diff-section">
       <div class="viewer-header"><strong>${diff.path ?? "diff"}</strong><small>${diff.staged ? "staged" : "unstaged"}${diff.truncated ? " · truncated" : ""}</small></div>
@@ -128,6 +129,14 @@ function renderDiffSection(diff: GitDiffResponse): TemplateResult {
   `;
 }
 
+function loadCodeViewer(): void {
+  void import("../../components/CodeViewer");
+}
+
+function loadTerminalPanel(): void {
+  void import("../../components/TerminalPanel");
+}
+
 function gitSummary(status: GitStatusResponse): string {
   const branch = status.branch ?? "detached";
   const ahead = status.ahead ?? 0;

vite.config.ts

@@ -5,6 +5,18 @@ export default defineConfig({
   build: {
     outDir: "../../dist/client",
     emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes("node_modules")) return;
+          if (id.includes("@codemirror/legacy-modes")) return "vendor-editor-legacy";
+          if (id.includes("@lezer/common") || id.includes("@lezer/highlight") || id.includes("@lezer/lr")) return "vendor-editor-core";
+          if (id.includes("@codemirror/lang-") || id.includes("@lezer/")) return "vendor-editor-languages";
+          if (id.includes("@codemirror") || id.includes("codemirror")) return "vendor-editor-core";
+          if (id.includes("@xterm")) return "vendor-terminal";
+        },
+      },
+    },
   },
   server: {
     port: 5173,