序文
yarn devコマンドを使用して初めて開始するかvite、依存関係が変更されたときにブランチを切り替えると、プロジェクトの開始が約 10 分と非常に遅くなり、コンソール ターミナルに次の情報が出力されることがわかります。
バンドル前の依存関係:
これは、依存関係または構成が変更された場合にのみ実行されます
このような状況に遭遇したとき、それは本当に嫌です.プロジェクトが開始して完了するまでに30分かかることもありますが、これは本当に時間の無駄です.
実際、コンソールに非常に明確なプロンプトが表示された理由は次のとおりです。
warning package.json: No license field
$ vite
Pre-bundling dependencies: (正在预构建依赖)
react
react-dom
antd
react-redux
antd/lib/locale/zh_CN
(...and 29 more)
(this will be run only when your dependencies or config have changed)(这将只会在你的依赖或配置发生变化时执行)
英語をしっかり学ぶことの大切さについて！! !
どこに問題があるのかがわかれば、適切な薬を処方することができ、問題は迅速かつ適切に解決されます。
1. 理由: ビルド済みの依存関係
まず、なぜvite実行预构建依赖。
- CommonJS と UMD の互換性:開発段階では、Vite の開発サーバーはすべてのコードをネイティブ ES モジュールとして扱います。したがって、Vite はまず、CommonJS または UMD として公開された依存関係を ESM に変換する必要があります。
CommonJS の依存関係を変換するとき、Vite はスマート インポート分析を実行するため、エクスポートが (React のように) 動的に割り当てられている場合でも、名前によるインポートが期待どおりに動作します。例えば：
// 符合预期
import React, {
useState } from 'react'
- パフォーマンス: Vite は、多くの内部モジュールを含む ESM 依存関係を単一のモジュールに変換して、その後のページ読み込みパフォーマンスを向上させます。
一部のパッケージは、ES モジュールのビルドを多数の個別のファイルとして相互にインポートします。例: lodash-es 600 を超える組み込みモジュールがあります。を実行するimport { debounce } from lodash-esと、ブラウザは同時に 600 以上の HTTP リクエストを送信します. サーバーはこれらのリクエストを問題なく処理しますが、大量のリクエストはブラウザ側でネットワークの輻輳を引き起こし、ページの読み込み速度が非常に遅くなります. .
モジュールとして事前に ビルドすることで、必要な HTTP リクエストは 1 つだけになります。lodash-es
注:
ビルド前の依存関係は開発モードでのみ適用され、依存関係を ESM モジュールにesbuild変換する。本番ビルドでは使用されます。@rollup/plugin-commonjs
サーバーが起動した後、新しい依存関係のインポートが検出され、この依存関係がまだキャッシュにない場合、Vite は依存関係のビルド プロセスを再実行し、ページをリロードします。これが、異なる依存関係でブランチを切り替えた後、プロジェクトの実行が非常に遅くなる理由です。
2. ソリューション
必要な依存関係:
- vite-plugin-optimize-persist
- vite-plugin-package-config
使用：
npm i -D vite-plugin-optimize-persist vite-plugin-package-config
vite.config.ts で構成します。
// vite.config.ts
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'
export default defineConfig({
plugins: [
PkgConfig(),
OptimizationPersist(),
]
})
構成コードは、package.json ファイルに自動的に挿入されます。
