依存関係最適化オプション

関連: 依存関係の事前バンドル

特に明記されていない限り、このセクションのオプションは依存関係オプティマイザにのみ適用され、これは開発時のみ使用されます。

optimizeDeps.entries

タイプ: string | string[]

デフォルトでは、Vite はすべての .html ファイルをクロールして、事前バンドルが必要な依存関係を検出します (node_modules、build.outDir、__tests__、および coverage は無視されます)。build.rollupOptions.input が指定されている場合、Vite は代わりにこれらのエントリポイントをクロールします。

どちらもニーズに合わない場合は、このオプションを使用してカスタムエントリを指定できます。値は、Vite プロジェクトルートからの相対パスであるtinyglobby パターンまたはパターンの配列である必要があります。これにより、デフォルトのエントリ推論が上書きされます。optimizeDeps.entries が明示的に定義されている場合、node_modules および build.outDir フォルダーのみがデフォルトで無視されます。他のフォルダーを無視する必要がある場合は、エントリリストの一部として、先頭に ! が付いた無視パターンを使用できます。文字列 node_modules を明示的に含むパターンについては、node_modules は無視されません。

optimizeDeps.exclude

型: string[]

事前バンドルから除外する依存関係。

CommonJS

CommonJS 依存関係は最適化から除外すべきではありません。ESM 依存関係が最適化から除外されているが、ネストされた CommonJS 依存関係を持っている場合、その CommonJS 依存関係は optimizeDeps.include に追加されるべきです。例

export default defineConfig
({
  optimizeDeps
: {
    include
: ['esm-dep > cjs-dep'],
  },
})

optimizeDeps.include

型: string[]

デフォルトでは、node_modules 内にないリンクされたパッケージは事前バンドルされません。リンクされたパッケージを強制的に事前バンドルするには、このオプションを使用します。

実験的: 多くのディープインポートを持つライブラリを使用している場合、末尾の glob パターンを指定して、すべてのディープインポートを一度に事前バンドルすることもできます。これにより、新しいディープインポートが使用されるたびに事前バンドルを繰り返す必要がなくなります。フィードバックを送る。例えば

export default defineConfig
({
  optimizeDeps
: {
    include
: ['my-lib/components/**/*.vue'],
  },
})

optimizeDeps.esbuildOptions

タイプ: Omit<EsbuildBuildOptions, | 'bundle' | 'entryPoints' | 'external' | 'write' | 'watch' | 'outdir' | 'outfile' | 'outbase' | 'outExtension' | 'metafile'>

依存関係のスキャンと最適化中に esbuild に渡すオプション。

Vite の依存関係の最適化と互換性がないため、特定のオプションは省略されています。

external も省略されています。Vite の optimizeDeps.exclude オプションを使用してください。
plugins は Vite の依存関係プラグインとマージされます。

optimizeDeps.force

型: boolean

以前キャッシュされた最適化された依存関係を無視して、依存関係の事前バンドルを強制するには true に設定します。

optimizeDeps.noDiscovery

型: boolean
デフォルト: false

true に設定すると、自動依存関係検出が無効になり、optimizeDeps.include にリストされている依存関係のみが最適化されます。開発中、CJS 専用の依存関係は optimizeDeps.include に存在する必要があります。

optimizeDeps.holdUntilCrawlEnd

実験的: フィードバックを送る
型: boolean
デフォルト: true

これを有効にすると、コールドスタート時にすべての静的インポートがクロールされるまで、最初の最適化された依存関係の結果が保持されます。これにより、新しい依存関係が検出され、新しい共通チャンクの生成がトリガーされたときに、ページ全体のリロードが不要になります。すべての依存関係がスキャナーによって見つかり、さらに include で明示的に定義されている場合、このオプションを無効にしてブラウザがより多くのリクエストを並行して処理できるようにする方が良いでしょう。

optimizeDeps.disabled

非推奨
実験的: フィードバックを送る
タイプ: boolean | 'build' | 'dev'
デフォルト: 'build'

このオプションは非推奨です。Vite 5.1 以降、ビルド時の依存関係の事前バンドルは削除されました。optimizeDeps.disabled を true または 'dev' に設定するとオプティマイザが無効になり、false または 'build' に設定すると開発中にオプティマイザが有効になります。

オプティマイザを完全に無効にするには、optimizeDeps.noDiscovery: true を使用して依存関係の自動検出を許可せず、optimizeDeps.include を未定義または空のままにします。

警告

ビルド時の依存関係の最適化は実験的な機能でした。この戦略を試しているプロジェクトでは、build.commonjsOptions: { include: [] } を使用して @rollup/plugin-commonjs も削除しました。そのようにした場合、バンドル中に CJS 専用パッケージをサポートするために再有効化するように警告が表示されます。

optimizeDeps.needsInterop

実験的機能
型: string[]

これらの依存関係をインポートするときに ESM interop を強制します。Vite は依存関係がいつ interop を必要とするかを適切に検出できるため、通常このオプションは必要ありません。ただし、依存関係のさまざまな組み合わせにより、一部が異なる方法で事前バンドルされる可能性があります。これらのパッケージを needsInterop に追加すると、ページ全体のリロードを回避することでコールドスタートを高速化できます。依存関係のいずれかでこのケースが発生した場合、警告が表示され、設定でパッケージ名をこの配列に追加するように提案されます。

依存関係最適化オプション ​

optimizeDeps.entries ​

optimizeDeps.exclude ​

optimizeDeps.include ​

optimizeDeps.esbuildOptions ​

optimizeDeps.force ​

optimizeDeps.noDiscovery ​

optimizeDeps.holdUntilCrawlEnd ​

optimizeDeps.disabled ​

optimizeDeps.needsInterop ​