vite

Vite のベストプラクティス

Vite アプリケーション向けの包括的なパフォーマンス最適化ガイドです。影響度の高い順に優先順位を付けた 8 カテゴリー、42 個のルールを収録し、自動リファクタリングとコード生成を支援します。

適用するタイミング

以下の場合に、このガイドラインを参照してください。

• 新しいプロジェクト向けに Vite を設定する場合
• 開発サーバーの起動が遅い原因を調査する場合
• 本番バンドルのサイズを最適化する場合
• HMR の問題をデバッグする場合
• Vite プラグインを作成または評価する場合
• Webpack やその他のバンドラーから移行する場合

優先度別のルールカテゴリー

優先度	カテゴリー	影響度	プレフィックス
1	依存関係の事前バンドル	重大	deps-
2	プラグインのパフォーマンス	重大	plugin-
3	バンドルの最適化	重大	bundle-
4	インポートの解決	高	import-
5	ビルド設定	高	build-
6	開発サーバー	中〜高	dev-
7	CSS の最適化	中	css-
8	高度なパターン	低〜中	advanced-

クイックリファレンス

1. 依存関係の事前バンドル（重大）

• deps-include-large-cjs - モジュール数の多い大規模な依存関係を含める
• deps-exclude-esm - 小規模な ESM 依存関係を除外する
• deps-force-rebundle - 依存関係を変更する際に --force フラグを使用する
• deps-hold-until-crawl - 起動時の動作に合わせて holdUntilCrawlEnd を設定する
• deps-entries - 検出用のカスタムエントリーポイントを設定する
• deps-linked-packages - モノレポ内のリンクされた依存関係を処理する

2. プラグインのパフォーマンス（重大）

• plugin-lazy-imports - プラグインコードで動的インポートを使用する
• plugin-avoid-long-hooks - 起動フック内で時間のかかる処理を避ける
• plugin-transform-early-return - transform フックで早期リターンする
• plugin-audit-community - コミュニティ製プラグインのパフォーマンスを監査する
• plugin-swc-over-babel - React では Babel の代わりに SWC を使用する

3. バンドルの最適化（重大）

• bundle-manual-chunks - ベンダーコードの分割に manualChunks を使用する
• bundle-dynamic-imports - ルート単位の分割に動的インポートを使用する
• bundle-analyze - バンドルの構成を分析する
• bundle-tree-shaking - 効果的なツリーシェイキングを有効にする
• bundle-chunk-warning - 大きなチャンクに関する警告に対処する
• bundle-compression - 大規模プロジェクトでは圧縮後のサイズ報告を無効にする
• bundle-asset-inlining - アセットのインライン化しきい値を設定する

4. インポートの解決（高）

• import-avoid-barrel - バレルファイルからのインポートを避ける
• import-explicit-extensions - ファイル拡張子を明示する
• import-path-aliases - 整理されたインポートのためにパスエイリアスを設定する
• import-svg-strings - SVG をコンポーネントではなく文字列としてインポートする
• import-glob-patterns - glob インポートを慎重に使用する

5. ビルド設定（高）

• build-modern-target - 最新のブラウザーをターゲットにする
• build-minification - esbuildを使用して圧縮する
• build-sourcemaps - 本番環境でソースマップを無効にする
• build-css-code-split - CSSコード分割を有効にする
• build-rolldown - ビルドの高速化にRolldownを検討する
• build-output-dir - 出力ディレクトリとキャッシュを設定する

6. 開発サーバー（中〜高）

• dev-server-warmup - 頻繁に使用するファイルを事前に読み込む
• dev-browser-cache - DevToolsでブラウザーキャッシュを有効にしたままにする
• dev-fs-limits - Linuxでファイルディスクリプターの上限を引き上げる
• dev-wsl-polling - WSLのファイル監視にポーリングを使用する
• dev-https-proxy - 開発用にHTTPSとプロキシを設定する

7. CSSの最適化（中）

• css-lightning - PostCSSの代わりにLightning CSSを使用する
• css-avoid-preprocessors - 可能な場合はプリプロセッサーよりCSSを優先する
• css-modules - コンポーネントのスタイルにCSS Modulesを使用する
• css-inline-critical - 初回描画用のクリティカルCSSを抽出する

8. 高度なパターン（低〜中）

• advanced-ssr-externalize - SSR用に依存関係を外部化する
• advanced-env-static - 静的な環境変数を使用する
• advanced-profiling - ビルドのパフォーマンスをプロファイリングする
• advanced-lib-mode - パッケージ開発用にライブラリモードを設定する

使用方法

詳しい説明とコード例については、各リファレンスファイルを参照してください。

• セクションの定義 - カテゴリーの構成と影響レベル
• ルールのテンプレート - 新しいルールを追加するためのテンプレート

リファレンスファイル

ファイル	説明
AGENTS.md	すべてのルールをまとめた完全なガイド
references/_sections.md	カテゴリーの定義と順序
assets/templates/_template.md	新しいルール用のテンプレート
metadata.json	バージョンとリファレンス情報