パフォーマンス
Vite はデフォルトで高速ですが、プロジェクトの要件が増えるにつれて、パフォーマンスの問題が忍び寄る可能性があります。このガイドは、以下のような一般的なパフォーマンスの問題を特定して修正するのに役立つことを目的としています。
- サーバーの起動が遅い
- ページの読み込みが遅い
- ビルドが遅い
ブラウザの設定を確認する
一部のブラウザ拡張機能はリクエストを妨害し、特にブラウザの開発ツールを使用している場合に、大規模なアプリの起動時間とリロード時間を遅くする可能性があります。このような場合は、拡張機能なしの開発専用プロファイルを作成するか、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'] に設定されています。
import './Component' を使用して ./Component.jsx をインポートしようとすると、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 を再エクスポートするファイルです。例:
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 を実行し、ログを調べて、頻繁に使用されるファイルを見つけることができます。
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 +1msexport 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 プロジェクトを開始する際のデフォルトではありません。ただし、大規模なアプリケーションではコストに見合う価値がある可能性があります。
- LightningCSS の実験的なサポートを試してみてください。
@vitejs/plugin-reactの代わりに@vitejs/plugin-react-swcを使用します。