Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon ViteでEsbuildを使用すると、変換速度が向上します


ViteでEsbuildを使用すると、変換速度が向上します


はい、Esbuildを使用すると、Webpackなどの他のバンドラーを使用するのと比較して、変換速度を大幅に改善できます。ここにいくつかの重要なポイントがあります:

esbuildによる事前バンドル依存関係

ViteはEsBuildを使用して依存関係を事前にバンドルします。これは、TypeScriptコンパイラ(TSC)を直接使用するよりも約20〜30倍高速です[3]。このバンドリングステップは、CommonJS/UMDモジュールをESMに変換し、JavaScriptベースのバンドラーと比較してViteの寒い開始時間を改善します[1]。

##より速いタイプスクリプト変換

Viteは、パフォーマンスに最適化されたEsbuildのカスタムタイプスクリプトパーサーを活用します。大規模なオブジェクトの形状や不必要な動的プロパティアクセスなど、公式タイプスクリプトコンパイラの速度バンプの一部を回避します[3]。

##経験的パフォーマンス測定

ベンチマークは、esbuildのViteが特定の操作のWebpackよりもはるかに高速であることを示しています[2]:

- 最初の「Yarn Start」ビルド:Vite 6s vs Webpack 150S
- 反応コンポーネントホットリロード:vite1s対webpack13s
- サーバーデータの変更「ホット」リロード:Vite 13s vs Webpack 17s

正確なパフォーマンスの向上はプロジェクトに依存しますが、全体的な傾向は、Webpack [2]のような代替品と比較して、Viteでの変換にEsbuildを使用することによる重要なスピードアップを示しています。

ただし、Esbuildがタイプチェックを実行していないことに注意することが重要です。そのため、完全なタイプの安全性を確保するには、「TSC - NoeMit」を個別に実行する必要がある場合があります[4]。 「const enum」のようないくつかの機能も、Esbuild [4]によってまだサポートされていません。

要約すると、Esbuildの高速変換機能を活用することは、他のバンドラーに対するViteのパフォーマンスの利点の重要な要素です。速度の向上は、特に開発中にかなりのものになる可能性がありますが、考慮すべきトレードオフもいくつかあります。

引用:
[1] https://vitejs.dev/guide/features
[2] https://dev.to/noriste/migrating-a-150k-loc-codebase-to-vite-and-esbuild-how-part-2-3-1c08
[3] https://esbuild.github.io/faq/
[4] https://github.com/vitejs/vite/issues/1585
[5] https://github.com/vitejs/vite/issues/3193