依存関係プリバンドリング

初めて`vite`を実行すると、Viteはサイトをローカルに読み込む前に、プロジェクトの依存関係をプリバンドルします。これはデフォルトで自動的に透過的に実行されます。

理由

これは、Viteが「依存関係プリバンドリング」と呼ばれる処理を実行しているものです。このプロセスは2つの目的を果たします。

**CommonJSとUMDとの互換性：**開発中は、Viteの開発サーバーはすべてのコードをネイティブESMとして提供します。そのため、ViteはCommonJSまたはUMDとして配布されている依存関係を最初にESMに変換する必要があります。
CommonJS依存関係を変換する際、Viteはスマートインポート分析を実行するため、エクスポートが動的に割り当てられている場合でも（例：React）、CommonJSモジュールへの名前付きインポートが期待通りに動作します。
js
```
// works as expected
import React, { useState } from 'react'
```
**パフォーマンス：**Viteは、多くの内部モジュールを持つESM依存関係を単一のモジュールに変換して、後続のページ読み込みのパフォーマンスを向上させます。
一部のパッケージは、ESモジュールビルドを相互にインポートする多くの個別のファイルとして提供しています。例えば、lodash-esは600を超える内部モジュールを持っています！import { debounce } from 'lodash-es'を実行すると、ブラウザは同時に600以上のHTTPリクエストを発行します！サーバーはそれらを処理することに問題はありませんが、大量のリクエストによりブラウザ側のネットワーク輻輳が発生し、ページの読み込み速度が著しく低下します。
lodash-esを単一のモジュールにプリバンドルすることで、必要なHTTPリクエストは1つだけになります！

注意

依存関係プリバンドリングは開発モードでのみ適用され、依存関係をESMに変換するために`esbuild`を使用します。本番ビルドでは、代わりに`@rollup/plugin-commonjs`が使用されます。

自動的な依存関係検出

既存のキャッシュが見つからない場合、Viteはソースコードをクロールして、依存関係のインポート（つまり、`node_modules`から解決されることが期待される「ベアインポート」）を自動的に検出し、これらの検出されたインポートをプリバンドルのエントリポイントとして使用します。プリバンドリングは`esbuild`を使用して実行されるため、通常非常に高速です。

サーバーが既に起動した後、キャッシュにない新しい依存関係のインポートが検出されると、Viteは依存関係のバンドリングプロセスを再実行し、必要に応じてページをリロードします。

モノレポとリンクされた依存関係

モノレポ設定では、依存関係が同じリポジトリからのリンクされたパッケージである場合があります。Viteは`node_modules`から解決されない依存関係を自動的に検出し、リンクされた依存関係をソースコードとして扱います。リンクされた依存関係をバンドルしようとせず、代わりにリンクされた依存関係の依存関係リストを分析します。

ただし、これにはリンクされた依存関係がESMとしてエクスポートされている必要があります。そうでない場合は、設定で依存関係をoptimizeDeps.includeとbuild.commonjsOptions.includeに追加できます。

vite.config.js

export default defineConfig
({
  optimizeDeps
: {
    include
: ['linked-dep'],
  },
  build
: {
    commonjsOptions
: {
      include
: [/linked-dep/, /node_modules/],
    },
  },
})

リンクされた依存関係に変更を加える場合は、変更を有効にするために`--force`コマンドラインオプションを使用して開発サーバーを再起動してください。

動作のカスタマイズ

デフォルトの依存関係検出ヒューリスティックは、常に望ましいとは限りません。リストから依存関係を明示的に含めたり除外したりする場合は、optimizeDeps設定オプションを使用します。

optimizeDeps.includeまたはoptimizeDeps.excludeの一般的なユースケースは、ソースコードで直接検出できないインポートがある場合です。たとえば、インポートがプラグイン変換の結果として作成される場合があります。これは、Viteが最初のスキャン時にインポートを検出できないことを意味します。ブラウザによってファイルが要求され、変換された後にのみ検出できます。これにより、サーバー起動後にサーバーがすぐに再バンドルされます。

includeとexcludeの両方を使用してこれに対処できます。依存関係が大きく（多くの内部モジュールを持つ）またはCommonJSの場合は、それを含める必要があります。依存関係が小さく、既に有効なESMである場合は、それを除外してブラウザに直接ロードさせることができます。

optimizeDeps.esbuildOptionsオプションを使用して、esbuildをさらにカスタマイズすることもできます。たとえば、依存関係内の特別なファイルを処理するesbuildプラグインを追加したり、ビルドのtargetを変更したりできます。

キャッシング

ファイルシステムキャッシュ

Viteはプリバンドルされた依存関係を`node_modules/.vite`にキャッシュします。いくつかのソースに基づいて、プリバンドリングステップを再実行する必要があるかどうかを判断します。

パッケージマネージャーのロックファイルの内容、例：`package-lock.json`、`yarn.lock`、`pnpm-lock.yaml`、または`bun.lockb`。
パッチフォルダーの変更時刻。
存在する場合、あなたの`vite.config.js`内の関連フィールド。
`NODE_ENV`の値。

上記のいずれかが変更された場合にのみ、プリバンドリングステップを再実行する必要があります。

何らかの理由でViteに依存関係を再バンドルさせたい場合は、`--force`コマンドラインオプションを使用して開発サーバーを起動するか、`node_modules/.vite`キャッシュディレクトリを手動で削除します。

ブラウザキャッシュ

解決された依存関係のリクエストは、HTTPヘッダー`max-age=31536000,immutable`を使用して厳密にキャッシュされ、開発中のページのリロードパフォーマンスが向上します。キャッシュされると、これらのリクエストは二度と開発サーバーにヒットしません。異なるバージョンがインストールされている場合（パッケージマネージャーのロックファイルに反映されます）、追加されたバージョンクエリによって自動的に無効になります。（ローカルで編集して依存関係をデバッグしたい場合は）

ブラウザの開発ツールのネットワークタブでキャッシュを一時的に無効にします。
`--force`フラグを使用してVite開発サーバーを再起動して、依存関係を再バンドルします。
ページをリロードします。

依存関係プリバンドリング ​

理由 ​

自動的な依存関係検出 ​

モノレポとリンクされた依存関係 ​

動作のカスタマイズ ​

キャッシング ​

ファイルシステムキャッシュ ​

ブラウザキャッシュ ​