Files
openchamber/vite.config.ts
T
Serhii DziupinandSerhii Dziupin bc380e6e1b perf: cut cold-start download 58% and startup heap 22% via measured chunk-graph fixes (#2742)
* fix(ui): update session-switch-resync test to current handleEvent/setSessionTodos signatures

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* perf(build): split Shiki grammars/themes, CodeMirror legacy modes, and @pierre/diffs into on-demand chunks

Merging @shikijs/langs into one manual vendor chunk made the first language
request download every grammar (7.4 MB raw / 1 MB gzip). Letting Rollup split
these packages per dynamically imported module downloads only the languages,
themes, and modes actually used — matching how the worker build already
behaves. @pierre/diffs is split the same way so its pure patch parser (used by
the eager tool renderer) no longer drags the Shiki-importing render stack into
the startup graph.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* perf(ui): restore lazy heavy views and stop eager settings-graph loading

- MainLayout: DiffView/FilesView/GitView/PlanView return to lazyWithChunkRecovery
  (they were silently made static in 2031e3b4 while their Suspense wrappers
  remained), keeping the CodeMirror and @pierre/diffs stacks out of startup.
- ContextPanel: same lazy treatment for its Diff/Files/Git/Plan/Walkthrough
  tabs, with null Suspense fallbacks.
- CommandPalette imported getSettingsNavIcon from SettingsView, statically
  pulling the entire settings surface (SkillsPage -> CodeMirrorEditor -> vim
  mode, theme registry -> @pierre/diffs) into the eager graph; the helper now
  lives in lib/settings/metadata.
- The windowed SettingsWindow mounts only after its first open: rendering the
  lazy component closed made React fetch the SettingsView chunk graph at
  startup.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* perf(ui): keep @pierre/diffs + Shiki out of the eager chat graph and defer diff worker warmup

- DiffWorkerProvider no longer statically imports @pierre/diffs/worker or the
  theme registry, and no longer spawns 3 workers plus a main-thread shared
  highlighter during mount. Pools are created on demand through a dynamic
  module load, warmed via requestIdleCallback after startup settles, and
  useWorkerPool notifies consumers when a pool becomes available.
- ToolPart's rich diff preview moves to lazily loaded ToolPartDiffPreview;
  the plain-text patch (PlainDiffFallback) renders while the chunk loads,
  mirroring the existing error fallback. Theme registration happens during
  render inside the lazy module so PatchDiff never renders unregistered ids.
- ChatInput mounts its lazy ToolOutputDialog only after the first attachment
  preview opens instead of fetching the dialog chunk on the draft screen.
- getMarkdownSyntaxVars moves to a pierre-free markdownSyntaxVars module so
  eager code-rendering consumers stop importing the registration module.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

* perf(web): load ghostty-web and Nerd Fonts on first terminal use

- ghostty-web (638 KB raw JS + WASM VT) is dynamically imported when a
  terminal actually mounts; TerminalView stays eagerly importable for the
  bottom dock.
- The ~2 MB of CDN Nerd Fonts are no longer preloaded and force-loaded on
  every cold start. index.html exposes an idempotent
  __openchamberEnsureNerdFonts hook; TerminalViewport requests it on mount
  and waits up to 2s so a cached font is in place before the glyph atlas is
  built, while a cold CDN fetch never blocks the terminal. Runtimes without
  the hook (VS Code, mobile) resolve immediately, matching their existing
  fallback-font behavior.

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>

---------

Co-authored-by: Serhii Dziupin <makeittech@users.noreply.github.com>
2026-08-07 09:01:31 +03:00

93 lines
3.9 KiB
TypeScript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import { themeStoragePlugin } from './vite-theme-plugin'
const __dirname = path.dirname(fileURLToPath(import.meta.url))
export default defineConfig({
plugins: [
react(),
themeStoragePlugin(),
],
resolve: {
alias: [
{ find: '@opencode-ai/sdk/v2', replacement: path.resolve(__dirname, './node_modules/@opencode-ai/sdk/dist/v2/client.js') },
{ find: '@', replacement: path.resolve(__dirname, './src') },
],
},
worker: {
format: 'es',
},
define: {
'process.env': {},
global: 'globalThis',
},
optimizeDeps: {
include: ['@opencode-ai/sdk/v2'],
},
build: {
chunkSizeWarningLimit: 1200,
rollupOptions: {
external: ['node:child_process', 'node:fs', 'node:path', 'node:url'],
output: {
manualChunks(id) {
// Pin Vite's tiny runtime helpers to their own stable chunk. Otherwise
// Rollup co-locates the `__vitePreload` helper into an arbitrary vendor
// chunk (e.g. `shiki`), and since every dynamic import pulls the helper,
// that whole vendor (here Shiki core + the 629KB oniguruma engine) gets
// dragged into the eager bootstrap graph.
if (id.includes('vite/preload-helper') || id.includes('vite/modulepreload-polyfill')) {
return 'vendor-vite-runtime'
}
if (!id.includes('node_modules')) return undefined
// Resolve the real package from the LAST `node_modules/` segment.
// bun's isolated install nests packages as
// `node_modules/.bun/<pkg>@<ver>/node_modules/<pkg>/...`, so the first
// `node_modules/` segment is `.bun` — using it collapses every dependency
// (incl. lazy-only ones) into a single giant eager `vendor-.bun` chunk.
const lastNodeModules = id.lastIndexOf('node_modules/')
const match = id.slice(lastNodeModules + 'node_modules/'.length)
if (!match) return undefined
const segments = match.split('/')
const packageName = match.startsWith('@') ? `${segments[0]}/${segments[1]}` : segments[0]
// Shiki grammars/themes and CodeMirror legacy modes are dynamically
// imported one at a time by their registries. Forcing them into a
// single vendor chunk makes the first language request download every
// grammar (7.4 MB raw for @shikijs/langs). Let Rollup split them per
// dynamically imported module so only used languages are fetched —
// the worker build already behaves this way.
if (
packageName === '@shikijs/langs' ||
packageName === '@shikijs/themes' ||
packageName === '@codemirror/legacy-modes'
) {
return undefined
}
// Split @pierre/diffs by usage as well: the eager tool renderer needs
// only its pure patch parser, while the Shiki-importing render stack
// must stay loadable on demand. One merged vendor chunk would make
// the parser import download the whole stack eagerly.
if (packageName === '@pierre/diffs') {
return undefined
}
if (packageName === 'react' || packageName === 'react-dom') return 'vendor-react'
if (packageName === 'zustand' || packageName === 'zustand/middleware') return 'vendor-zustand'
if (packageName === '@opencode-ai/sdk') return 'vendor-opencode-sdk'
if (packageName.includes('remark') || packageName.includes('rehype') || packageName === 'react-markdown') return 'vendor-markdown'
if (packageName === '@base-ui/react' || packageName.startsWith('@base-ui')) return 'vendor-base-ui'
const sanitized = packageName.replace(/^@/, '').replace(/\//g, '-')
return `vendor-${sanitized}`
},
},
},
},
})