パフォーマンス

Vite はデフォルトで高速ですが、プロジェクトの要件が大きくなるにつれてパフォーマンスの問題が発生する可能性があります。このガイドは、次のような一般的なパフォーマンスの問題を特定し、修正するのに役立ちます。

サーバー起動が遅い
ページ読み込みが遅い
ビルドが遅い

ブラウザーの設定を確認する

一部のブラウザー拡張機能は、特にブラウザー開発ツールを使用している場合、リクエストを妨害し、大規模なアプリの起動時間や再読み込み時間を遅くする可能性があります。このような場合は、拡張機能なしの開発専用プロファイルを作成するか、シークレットモードに切り替えることをお勧めします。シークレットモードは、拡張機能なしの通常のプロファイルよりも高速であるはずです。

Vite 開発サーバーは、事前バンドルされた依存関係のハードキャッシュを行い、ソースコードに対して高速な 304 レスポンスを実装します。ブラウザー開発ツールが開いているときにキャッシュを無効にすると、起動時間とフルページ再読み込み時間に大きな影響を与える可能性があります。「キャッシュを無効にする」が Vite サーバーでの作業中に有効になっていないことを確認してください。

設定された Vite プラグインの監査

Vite の内部および公式プラグインは、より広範なエコシステムとの互換性を提供しながら、可能な限り少ない作業を行うように最適化されています。たとえば、コード変換は開発では正規表現を使用しますが、正確性を確保するためにビルドでは完全なパースを行います。

ただし、コミュニティプラグインのパフォーマンスは Vite の管理外であり、開発者のエクスペリエンスに影響を与える可能性があります。追加の Vite プラグインを使用する際に注意すべき点がいくつかあります。

特定のケースでのみ使用される大規模な依存関係は、Node.js の起動時間を短縮するために動的にインポートする必要があります。リファクタリングの例: vite-plugin-react#212 および vite-plugin-pwa#224。
buildStart、config、configResolved フックは、長く広範な操作を実行するべきではありません。これらのフックは開発サーバーの起動中に待機され、ブラウザーでサイトにアクセスできるまでの時間を遅延させます。
resolveId、load、transform フックは、一部のファイルの読み込みを他のファイルよりも遅くする可能性があります。これは避けられない場合もありますが、最適化の可能性のある領域を確認する価値はあります。たとえば、完全な変換を行う前に、code に特定のキーワードが含まれているか、id が特定の拡張子と一致するかを確認します。
ファイルの変換に時間がかかればかかるほど、ブラウザーでサイトを読み込む際のリクエストウォーターフォールはより顕著になります。
vite --debug plugin-transform または vite-plugin-inspect を使用して、ファイルの変換にかかる時間を確認できます。非同期操作は不正確なタイミングを示す傾向があるため、これらの数値は概算として扱うべきですが、より高価な操作は明らかになるはずです。

プロファイリング

vite --profile を実行し、サイトにアクセスし、ターミナルで p + enter を押して .cpuprofile を記録できます。speedscope などのツールを使用してプロファイルを検査し、ボトルネックを特定できます。また、Vite チームとプロファイルを共有して、パフォーマンスの問題を特定するのに役立てることができます。

解決操作の削減

インポートパスの解決は、最悪のケースに頻繁に遭遇すると高価な操作になる可能性があります。たとえば、Vite は resolve.extensions オプションでインポートパスの「推測」をサポートしており、デフォルトは ['.mjs', '.js', '.mts', '.ts', '.jsx', '.tsx', '.json'] です。

./Component.jsx を import './Component' でインポートしようとすると、Vite は解決するために次の手順を実行します。

./Component が存在するかどうかを確認します (いいえ)。
./Component.mjs が存在するかどうかを確認します (いいえ)。
./Component.js が存在するかどうかを確認します (いいえ)。
./Component.mts が存在するかどうかを確認します (いいえ)。
./Component.ts が存在するかどうかを確認します (いいえ)。
./Component.jsx が存在するかどうかを確認します (はい！)。

示されているように、インポートパスを解決するには合計 6 回のファイルシステムチェックが必要です。暗黙的なインポートが多いほど、パスの解決にかかる時間が長くなります。

したがって、通常は import './Component.jsx' のようにインポートパスを明示的に指定する方が良いです。また、resolve.extensions のリストを絞り込んで一般的なファイルシステムチェックを減らすこともできますが、node_modules 内のファイルにも適用されることを確認する必要があります。

プラグイン作成者の場合は、上記のチェックの数を減らすために、必要な場合にのみ this.resolve を呼び出すようにしてください。

TypeScript

TypeScript を使用している場合は、tsconfig.json の compilerOptions で "moduleResolution": "bundler" と "allowImportingTsExtensions": true を有効にして、コード内で .ts および .tsx 拡張子を直接使用できるようにします。

バレルファイルの使用を避ける

バレルファイルとは、同じディレクトリ内の他のファイルの API を再エクスポートするファイルです。例：

src/utils/index.js

export * from './color.js'
export * from './dom.js'
export * from './slash.js'

個々の API のみをインポートする場合、たとえば import { slash } from './utils' のように、そのバレルファイル内のすべてのファイルは、slash API を含む可能性があり、初期化時に実行される副作用を含む可能性もあるため、フェッチおよび変換される必要があります。これは、初期ページ読み込み時に必要なファイルよりも多くのファイルを読み込んでいることを意味し、結果としてページ読み込みが遅くなります。

可能であれば、バレルファイルを避け、個々の API を直接インポートする必要があります。たとえば、import { slash } from './utils/slash.js' のようにします。issue #8237 で詳細を確認できます。

頻繁に使用されるファイルをウォームアップする

Vite 開発サーバーは、ブラウザーからリクエストされたファイルのみを変換するため、迅速に起動し、使用されたファイルにのみ変換を適用できます。また、特定のファイルがすぐにリクエストされると予想される場合、ファイルを事前変換することもできます。ただし、一部のファイルの変換に他のファイルよりも時間がかかる場合、リクエストウォーターフォールが発生する可能性があります。たとえば、

左のファイルが右のファイルをインポートするインポートグラフが与えられた場合

main.js -> BigComponent.vue -> big-utils.js -> large-data.json

インポート関係は、ファイルが変換された後にのみ判明します。BigComponent.vue の変換に時間がかかる場合、big-utils.js は順番を待つ必要があり、以下同様です。これにより、事前変換が組み込まれていても内部的なウォーターフォールが発生します。

Vite では、server.warmup オプションを使用して、頻繁に使用されるとわかっているファイル、たとえば big-utils.js をウォームアップできます。これにより、big-utils.js はリクエストされたときにすぐに提供できるように準備され、キャッシュされます。

vite --debug transform を実行してログを検査することで、頻繁に使用されるファイルを見つけることができます。

bash

vite:transform 28.72ms /@vite/client +1ms
vite:transform 62.95ms /src/components/BigComponent.vue +1ms
vite:transform 102.54ms /src/utils/big-utils.js +1ms

vite.config.js

export default defineConfig({
  server: {
    warmup: {
      clientFiles: [
        './src/components/BigComponent.vue',
        './src/utils/big-utils.js',
      ],
    },
  },
})

Vite 開発サーバーの起動時に過負荷にならないように、頻繁に使用されるファイルのみをウォームアップする必要があることに注意してください。server.warmup オプションの詳細を確認してください。

--open または server.open を使用すると、Vite がアプリのエントリーポイントまたは開くための指定された URL を自動的にウォームアップするため、パフォーマンスが向上します。

より少ない、またはネイティブのツールを使用する

Vite をコードベースの成長に合わせて高速に保つには、ソースファイル (JS/TS/CSS) の作業量を減らすことが重要です。

作業を減らす例

可能な場合は Sass/Less/Stylus の代わりに CSS を使用する (ネストは PostCSS で処理できます)
SVG を UI フレームワークコンポーネント (React、Vue など) に変換しない。代わりに文字列または URL としてインポートする。
@vitejs/plugin-react を使用する場合、Babel オプションを設定しないことで、ビルド中の変換をスキップする (esbuild のみが使用されます)。

ネイティブツールの使用例

ネイティブツールを使用すると、多くの場合、インストールサイズが大きくなるため、新しい Vite プロジェクトを開始する際のデフォルトではありません。しかし、大規模なアプリケーションではそのコストに見合う価値があるかもしれません。

高速なビルドと開発とビルド間のより一貫したエクスペリエンスのために、Rollup と esbuild の代わりにRolldownを使用する。
LightningCSS の実験的なサポートを試す。
@vitejs/plugin-react の代わりに@vitejs/plugin-react-swcを使用する。

パフォーマンス ​

ブラウザーの設定を確認する ​

設定された Vite プラグインの監査 ​

解決操作の削減 ​

バレルファイルの使用を避ける ​

頻繁に使用されるファイルをウォームアップする ​

より少ない、またはネイティブのツールを使用する ​