vite が webpack より速いのはなぜですか? 例を挙げてみましょう
この問題の原因は、Webpack の構築メカニズムにあります。
Webpack が開発およびビルドされると、デフォルトですべてのページがビルドされ、アプリケーション全体がクロールされ、後でサービスが提供されます。これにより、プロジェクトのどこかでエラーが発生します (このページにまだ入っていない場合でも)。これはすべてビルドに影響しますそのため、プロジェクトが大きくなるほど、Webpack のビルドに時間がかかり、起動が遅くなります。
Vite の場合、同じエラーは、このページに入ったときにのみ表示されます。Vite は最初にプロジェクトをビルドせず、アプリケーションを [依存関係] と [ソース コード] に分割し、次に従ってソース コード部分を分割します。 【ルーティング】を行い、最初からビルドしなければならないコンテンツのみをビルドすると同時に、Viteはブラウザにソースコードを【ネイティブESM】の形で提供し、ブラウザがパッケージングの一部を担うことができるようにしています。この仕組みがあるからこそ、プロジェクトがどんなに大規模であっても、最初に建てるべきものは建てられるので、建設速度が大幅に向上します。
【補充】
ネイティブesm方式を使うということは、commonjsなどを使うとビルドできないのではないかと疑問に思う人もいるかもしれません。
公式ウェブサイトには答えがあり、Vite は事前に構築されたものに依存することでこの問題を解決します。