依存関係の事前バンドル

サイトを初めてviteすると、サイトをローカルにロードする前に、Viteはプロジェクトの依存関係を事前に束ねます。デフォルトで自動的かつ透過的に行われます。

なぜ

これは、私たちが「依存関係バンドリング」と呼ぶものを実行するViteです。このプロセスは2つの目的に役立ちます。

**CommonJSとUMD互換性:**開発中、Vite's DevはすべてのコードをネイティブESMとして提供します。したがって、Viteは、最初にCommonJまたはUMDとして出荷される依存関係を変換する必要があります。
CommonJS依存関係を変換する場合、VITEはスマートインポート分析を実行して、輸出が動的に割り当てられている場合でも（例:React）、CommonJSモジュールへの名前付きインポートが期待どおりに機能します。
js
```
// 期待どおりに機能します
import React, { useState } from 'react'
```
パフォーマンス: Viteは、多くの内部モジュールを持つESM依存関係を単一のモジュールに変換し、後続のページの負荷パフォーマンスを改善します。
一部のパッケージでは、esモジュールを発送すると、互いにインポートする多くの個別のファイルを構築します。たとえば、 lodash-esは600を超える内部モジュールがあります！ import { debounce } from 'lodash-es'実行すると、ブラウザは600以上のHTTPリクエストを同時に発射します！サーバーがそれらを処理するのに問題はありませんが、大量のリクエストがブラウザ側にネットワークの混雑を作成し、ページが著しく遅く読み込まれます。
lodash-es単一のモジュールに事前バンドルすることにより、代わりに1つのHTTPリクエストのみが必要です！

NOTE

依存関係の事前バンドルは開発モードでのみ適用され、 esbuild使用して依存関係をESMに変換します。生産ビルドでは、代わりに@rollup/plugin-commonjsが使用されます。

自動依存性の発見

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

サーバーが既に開始された後、まだキャッシュにない新しい依存関係のインポートが発生した場合、ViteはDEPバンドルプロセスを再実行し、必要に応じてページをリロードします。

モノレポスとリンク依存関係

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

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

vite.config.js

import { defineConfig
 } from 'vite'
//  - -カット - -
export default defineConfig
({
  optimizeDeps
: {
    include
: ['linked-dep'],
  },
  build
: {
    commonjsOptions
: {
      include
: [/linked-dep/, /node_modules/],
    },
  },
})

リンクされたDEPに変更を加えるときは、変更が有効になるために--forceコマンドラインオプションで開発サーバーを再起動します。

動作のカスタマイズ

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

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

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

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

キャッシング

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

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

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

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

何らかの理由でViteにDEPを再バンルに強制する場合は、 --forceコマンドラインオプションでDEVサーバーを起動するか、 node_modules/.vite Cacheディレクトリを手動で削除できます。

ブラウザキャッシュ

解決された依存関係要求は、開発中のページリロードパフォーマンスを改善するために、HTTPヘッダーmax-age=31536000,immutableで強くキャッシュされています。一度キャッシュされると、これらのリクエストは再び開発サーバーにヒットすることはありません。別のバージョンがインストールされている場合（パッケージマネージャーのロックファイルに反映されているように）、追加バージョンクエリによって自動無効になります。ローカル編集を作成して依存関係をデバッグしたい場合は、次のことができます。

ブラウザDevToolsのネットワークタブを介してキャッシュを一時的に無効にします。
depsを再バンルするために、 --forceフラグでVite Devサーバーを再起動します。
ページをリロードします。

依存関係の事前バンドル ​

なぜ ​

自動依存性の発見 ​

モノレポスとリンク依存関係 ​

動作のカスタマイズ ​

キャッシング ​

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

ブラウザキャッシュ ​