Vite Advanced Patterns
A wrapper around Vite 8 (Rolldown-powered), not a copy of its documentation.
Vite's own docs are the source of truth for config keys, API surface, and migration
mechanics. This skill carries the house delta plus four enforceable rules.
Vite 8 replaces the esbuild+Rollup pipeline with Rolldown (Rust-based unified
bundler) and is the default for new projects. advancedChunks supersedes
manualChunks; build.rollupOptions becomes build.rolldownOptions.
Upstream coverage (do not restate)
Fetch these from Vite rather than expecting them here. Rows marked with a rule keep a
narrower, enforceable house subset in that rule file: read the rule for the house
position, fetch the doc for the full API.
| Topic |
Fetch from |
Vite 7 to 8 migration: rolldownOptions, transformWithOxc, moduleType: 'js', removed hooks and output formats, browser target bumps |
https://vite.dev/guide/migration |
Rolldown adoption path, rolldown-vite, Oxc, advancedChunks group syntax (house subset stays in rules/vite-advanced-chunks.md) |
https://vite.dev/guide/rolldown |
Build options: target, minify, sourcemap, cssCodeSplit, cssMinify, assetsInlineLimit, chunkSizeWarningLimit |
https://vite.dev/config/build-options |
Dependency pre-bundling and optimizeDeps include/exclude/force |
https://vite.dev/guide/dep-pre-bundling |
| SSR: client and server entry points, middleware-mode dev server, production server wiring, streaming |
https://vite.dev/guide/ssr |
Environment API config and per-environment build output (house subset stays in rules/vite-environments.md) |
https://vite.dev/guide/api-environment |
Environment API for plugins: this.environment, perEnvironmentPlugin, applyToEnvironment |
https://vite.dev/guide/api-environment-plugins |
Environment API for frameworks: createBuilder, buildApp, ModuleRunner |
https://vite.dev/guide/api-environment-frameworks |
Plugin hook reference, virtual modules, enforce/apply, handleHotUpdate (house subset stays in rules/vite-plugin-hooks.md) |
https://vite.dev/guide/api-plugin |
Env variables and modes, .env files, the VITE_ prefix |
https://vite.dev/guide/env-and-mode |
Deploying a static site and verifying with vite preview |
https://vite.dev/guide/static-deploy |
Library mode is not in the table: references/library-mode.md and
rules/vite-lib-config.md still carry it in full.
House delta
Read references/ork-delta.md for the rules Vite's docs do not
state: the Vite 8 adoption path for existing production apps, the VITE_ secrets
rule, the production sourcemap setting, the house build budget, the vite preview
gate, chunk-name stability across the advancedChunks migration, the visualizer
diff requirement, and the node_modules/.vite cache-clearing step.
House config
Not a Vite tutorial: these are the settings the delta above makes non-negotiable, in the
shape we actually ship them.
// vite.config.ts
import { defineConfig } from 'vite';
export default defineConfig({
build: {
// 'hidden' emits maps for the error reporter without publishing source.
// Never true (publishes source) and never 'inline' (inflates every JS file).
sourcemap: 'hidden',
rollupOptions: {
output: {
// Carry existing chunk NAMES across the manualChunks to advancedChunks
// migration. A renamed group changes its filename and invalidates that
// chunk for every returning visitor, even with identical contents.
advancedChunks: {
groups: [
{ name: 'vendor', test: /node_modules/, priority: 10 },
{ name: 'app', priority: 0 },
],
},
},
},
},
});
# Prove the build. `vite build` exiting 0 means the bundler finished, not that the
# app runs: base-path mistakes and dev-only env vars survive a green build.
vite build && vite preview # then walk the routes, console must be clean
# Diff the chunk graph before and after any chunk-config change.
npx vite-bundle-visualizer
# Stale pre-bundle cache mimics a broken plugin. Clear it BEFORE editing plugin code.
rm -rf node_modules/.vite && vite --force
VITE_-prefixed variables are inlined into the client bundle at build time. They are
public bundle content, never secrets. Audit .env.production before deploy.
Rules
| Rule |
Covers |
rules/vite-advanced-chunks.md |
Chunk splitting: advancedChunks groups, priority, maxSize, minShareCount |
rules/vite-environments.md |
environments config for client, SSR, and edge; per-environment outDir |
rules/vite-lib-config.md |
Library mode externals, dual ESM/CJS output, exports map, type declarations |
rules/vite-plugin-hooks.md |
Hook order, virtual modules via resolveId + load, enforce and apply |
Key Decisions
| Decision |
Recommendation |
| New projects |
Vite 8 (default) |
| Existing production apps |
Stage the upgrade through rolldown-vite before committing |
| Multi-env builds |
Environment API (environments config) |
| Plugin scope |
Use this.environment for env-aware plugins |
| SSR |
Middleware mode for dev, separate builds for prod |
| Chunks |
advancedChunks for Vite 8, manualChunks for Vite 7 compat |
Related Skills
ork:react-server-components-framework - SSR integrationork:storybook-testing - Component testing with Vitestork:performance - Core Web Vitals targets behind the build budget
References
Load on demand with Read("references/<file>"):
| File |
Content |
ork-delta.md |
House rules that Vite's docs do not state |
library-mode.md |
Building publishable npm packages |
1---2name: vite-advanced3description: Advanced Vite 8 patterns including Rolldown-powered builds, advancedChunks, Environment API, plugin development, SSR configuration, library mode, and build optimization. Use when customizing build pipelines, creating plugins, or configuring multi-environment builds.4license: MIT5---6
7# Vite Advanced Patterns
8
9A wrapper around **Vite 8** (Rolldown-powered), not a copy of its documentation.
10Vite's own docs are the source of truth for config keys, API surface, and migration
11mechanics. This skill carries the house delta plus four enforceable rules.
12
13Vite 8 replaces the esbuild+Rollup pipeline with **Rolldown** (Rust-based unified
14bundler) and is the default for new projects. `advancedChunks` supersedes
15`manualChunks`; `build.rollupOptions` becomes `build.rolldownOptions`.
16
17## Upstream coverage (do not restate)
18
19Fetch these from Vite rather than expecting them here. Rows marked with a rule keep a
20narrower, enforceable house subset in that rule file: read the rule for the house
21position, fetch the doc for the full API.
22
23| Topic | Fetch from |
24|-------|------------|
25| Vite 7 to 8 migration: `rolldownOptions`, `transformWithOxc`, `moduleType: 'js'`, removed hooks and output formats, browser target bumps | https://vite.dev/guide/migration |
26| Rolldown adoption path, `rolldown-vite`, Oxc, `advancedChunks` group syntax (house subset stays in `rules/vite-advanced-chunks.md`) | https://vite.dev/guide/rolldown |
27| Build options: `target`, `minify`, `sourcemap`, `cssCodeSplit`, `cssMinify`, `assetsInlineLimit`, `chunkSizeWarningLimit` | https://vite.dev/config/build-options |
28| Dependency pre-bundling and `optimizeDeps` include/exclude/force | https://vite.dev/guide/dep-pre-bundling |
29| SSR: client and server entry points, middleware-mode dev server, production server wiring, streaming | https://vite.dev/guide/ssr |
30| Environment API config and per-environment build output (house subset stays in `rules/vite-environments.md`) | https://vite.dev/guide/api-environment |
31| Environment API for plugins: `this.environment`, `perEnvironmentPlugin`, `applyToEnvironment` | https://vite.dev/guide/api-environment-plugins |
32| Environment API for frameworks: `createBuilder`, `buildApp`, `ModuleRunner` | https://vite.dev/guide/api-environment-frameworks |
33| Plugin hook reference, virtual modules, `enforce`/`apply`, `handleHotUpdate` (house subset stays in `rules/vite-plugin-hooks.md`) | https://vite.dev/guide/api-plugin |
34| Env variables and modes, `.env` files, the `VITE_` prefix | https://vite.dev/guide/env-and-mode |
35| Deploying a static site and verifying with `vite preview` | https://vite.dev/guide/static-deploy |
36
37Library mode is not in the table: `references/library-mode.md` and
38`rules/vite-lib-config.md` still carry it in full.
39
40## House delta
41
42Read `references/ork-delta.md` for the rules Vite's docs do not
43state: the Vite 8 adoption path for existing production apps, the `VITE_` secrets
44rule, the production sourcemap setting, the house build budget, the `vite preview`
45gate, chunk-name stability across the `advancedChunks` migration, the visualizer
46diff requirement, and the `node_modules/.vite` cache-clearing step.
47
48## House config
49
50Not a Vite tutorial: these are the settings the delta above makes non-negotiable, in the
51shape we actually ship them.
52
53```ts
54// vite.config.ts
55import { defineConfig } from 'vite';
56
57export default defineConfig({
58 build: {
59 // 'hidden' emits maps for the error reporter without publishing source.
60 // Never true (publishes source) and never 'inline' (inflates every JS file).
61 sourcemap: 'hidden',
62 rollupOptions: {
63 output: {
64 // Carry existing chunk NAMES across the manualChunks to advancedChunks
65 // migration. A renamed group changes its filename and invalidates that
66 // chunk for every returning visitor, even with identical contents.
67 advancedChunks: {
68 groups: [
69 { name: 'vendor', test: /node_modules/, priority: 10 },
70 { name: 'app', priority: 0 },
71 ],
72 },
73 },
74 },
75 },
76});
77```
78
79```bash
80# Prove the build. `vite build` exiting 0 means the bundler finished, not that the
81# app runs: base-path mistakes and dev-only env vars survive a green build.
82vite build && vite preview # then walk the routes, console must be clean
83
84# Diff the chunk graph before and after any chunk-config change.
85npx vite-bundle-visualizer
86
87# Stale pre-bundle cache mimics a broken plugin. Clear it BEFORE editing plugin code.
88rm -rf node_modules/.vite && vite --force
89```
90
91> `VITE_`-prefixed variables are inlined into the client bundle at build time. They are
92> public bundle content, never secrets. Audit `.env.production` before deploy.
93
94## Rules
95
96| Rule | Covers |
97|------|--------|
98| `rules/vite-advanced-chunks.md` | Chunk splitting: `advancedChunks` groups, priority, `maxSize`, `minShareCount` |
99| `rules/vite-environments.md` | `environments` config for client, SSR, and edge; per-environment `outDir` |
100| `rules/vite-lib-config.md` | Library mode externals, dual ESM/CJS output, `exports` map, type declarations |
101| `rules/vite-plugin-hooks.md` | Hook order, virtual modules via `resolveId` + `load`, `enforce` and `apply` |
102
103## Key Decisions
104
105| Decision | Recommendation |
106|----------|----------------|
107| New projects | **Vite 8** (default) |
108| Existing production apps | Stage the upgrade through `rolldown-vite` before committing |
109| Multi-env builds | Environment API (`environments` config) |
110| Plugin scope | Use `this.environment` for env-aware plugins |
111| SSR | Middleware mode for dev, separate builds for prod |
112| Chunks | `advancedChunks` for Vite 8, `manualChunks` for Vite 7 compat |
113
114## Related Skills
115
116- `ork:react-server-components-framework` - SSR integration
117- `ork:storybook-testing` - Component testing with Vitest
118- `ork:performance` - Core Web Vitals targets behind the build budget
119
120## References
121
122Load on demand with `Read("references/<file>")`:
123
124| File | Content |
125|------|---------|
126| `ork-delta.md` | House rules that Vite's docs do not state |
127| `library-mode.md` | Building publishable npm packages |
yonatangross