vite-advanced

Vite の高度なパターン

Vite 8（Rolldown 搭載）のラッパーであり、ドキュメントのコピーではありません。 設定キー、API の範囲、移行の仕組みについては、Vite 自身のドキュメントを正式な情報源としてください。このスキルでは、独自の差分に加えて、適用を徹底する4つのルールを扱います。

Vite 8 では、esbuild と Rollup のパイプラインが Rolldown（Rust ベースの統合バンドラー）に置き換わり、新規プロジェクトのデフォルトになっています。advancedChunks は manualChunks に取って代わり、build.rollupOptions は build.rolldownOptions になります。

上流ドキュメントの対象範囲（ここで繰り返さないこと）

以下の情報は Vite から取得してください。ルールが記載された行では、そのルールファイルに、適用を徹底する独自の範囲を定めています。独自の方針についてはルールを読み、API の全容についてはドキュメントを参照してください。

トピック	参照先
Vite 7 から 8 への移行：rolldownOptions、transformWithOxc、moduleType: 'js'、削除されたフックと出力形式、ブラウザーターゲットの引き上げ	https://vite.dev/guide/migration
Rolldown の導入手順、rolldown-vite、Oxc、advancedChunks のグループ構文（独自の範囲は rules/vite-advanced-chunks.md に記載）	https://vite.dev/guide/rolldown
ビルドオプション：target、minify、sourcemap、cssCodeSplit、cssMinify、assetsInlineLimit、chunkSizeWarningLimit	https://vite.dev/config/build-options
依存関係の事前バンドルと optimizeDeps の include／exclude／force	https://vite.dev/guide/dep-pre-bundling
SSR：クライアントとサーバーのエントリーポイント、ミドルウェアモードの開発サーバー、本番サーバーの接続、ストリーミング	https://vite.dev/guide/ssr
Environment API の設定と環境ごとのビルド出力（独自の範囲は rules/vite-environments.md に記載）	https://vite.dev/guide/api-environment
プラグイン向け Environment API：this.environment、perEnvironmentPlugin、applyToEnvironment	https://vite.dev/guide/api-environment-plugins
フレームワーク向け Environment API：createBuilder、buildApp、ModuleRunner	https://vite.dev/guide/api-environment-frameworks
プラグインフックのリファレンス、仮想モジュール、enforce／apply、handleHotUpdate（独自の範囲は rules/vite-plugin-hooks.md に記載）	https://vite.dev/guide/api-plugin
環境変数とモード、.env ファイル、VITE_ プレフィックス	https://vite.dev/guide/env-and-mode
静的サイトのデプロイと vite preview による検証	https://vite.dev/guide/static-deploy

ライブラリモードは表に含まれていません。references/library-mode.md と rules/vite-lib-config.md に、引き続き全容が記載されています。

独自の差分

Vite のドキュメントに記載されていないルールについては、references/ork-delta.md を読んでください。既存の本番アプリに Vite 8 を導入する手順、VITE_ のシークレットに関するルール、本番用のソースマップ設定、独自のビルド予算、vite preview のゲート、advancedChunks への移行におけるチャンク名の安定性、ビジュアライザーの差分要件、node_modules/.vite のキャッシュ削除手順が含まれます。

独自の設定

Vite のチュートリアルではありません。以下は、上記の独自の差分で必須としている設定を、実際にリリースしている形式で示したものです。

// 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_ をプレフィックスとする変数は、ビルド時にクライアントバンドルへインライン化されます。バンドル内の公開コンテンツであり、シークレットではありません。デプロイ前に .env.production を監査してください。

ルール

ルール	対象
rules/vite-advanced-chunks.md	チャンク分割：advancedChunks のグループ、優先度、maxSize、minShareCount
rules/vite-environments.md	クライアント、SSR、エッジ向けの environments 設定、環境ごとの outDir
rules/vite-lib-config.md	ライブラリモードの外部依存、ESM／CJS の二重出力、exports マップ、型宣言
rules/vite-plugin-hooks.md	フックの順序、resolveId と load による仮想モジュール、enforce と apply

主な決定事項

決定事項	推奨事項
新規プロジェクト	Vite 8（デフォルト）
既存の本番アプリ	コミットする前に、rolldown-vite を通じて段階的にアップグレードします
複数環境でのビルド	Environment API（environments 設定）
プラグインのスコープ	環境に対応するプラグインには this.environment を使用します
SSR	開発ではミドルウェアモード、本番では個別にビルドします
チャンク	Vite 8 では advancedChunks、Vite 7 との互換性には manualChunks

関連スキル

• ork:react-server-components-framework - SSR の統合
• ork:storybook-testing - Vitest によるコンポーネントのテスト
• ork:performance - ビルド予算内での Core Web Vitals の目標

参考資料

Read("references/<file>") で必要に応じて読み込みます：

ファイル	内容
ork-delta.md	Vite のドキュメントに記載されていないプロジェクト内のルール
library-mode.md	公開可能な npm パッケージのビルド