依存関係最適化オプション
- 関連: 依存関係プリバンドル
特に記載がない限り、このセクションのオプションは、開発時のみ使用される依存関係オプティマイザーにのみ適用されます。
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
とbuild.outDir
を無視しない場合は、代わりにリテラル文字列パス(tinyglobby
パターンなし)を使用して指定できます。
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.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相互運用性を強制します。Viteは、依存関係が相互運用性を必要とするかどうかを適切に検出できるため、このオプションは一般的に必要ありません。ただし、依存関係の組み合わせによっては、一部の依存関係が異なる方法でプリバンドルされる場合があります。これらのパッケージをneedsInterop
に追加すると、全ページのリロードを回避することでコールドスタートを高速化できます。依存関係のいずれかでこれが発生した場合は、警告が表示され、構成にパッケージ名をこの配列に追加することが提案されます。