Skip to content
Latchkey

webpack vs Vite(CI向け): build速度とcache

CIのbuildでの差は速度とconfigの重さです。Viteはesbuild/Rollupに依拠して高速で低configなbuildを行い、webpackは最大限の制御を提供します。

webpackは成熟した高度に設定可能なbundlerで、最大のプラグインエコシステムを持ちます。Viteはモダンなbuildツールで、dev変換にesbuild、本番buildにRollupを使い、低い設定と高速なbuildを実現します。

webpackVite
configの重さ高い低い
build速度tuningなしでは低速高速(esbuild + Rollup)
エコシステム / プラグイン最大大きい(Rollupのプラグイン)
本番出力成熟、調整可能Rollup(最適化済み)
最適な用途複雑/カスタムなbuildほとんどのモダンアプリ

CIでは

Viteは通常、はるかに少ない設定でより高速なbuildを生成し、ほとんどのモダンアプリでbuildステップを短縮します。webpackは、精密な制御が必要なとき(カスタムloader、高度な分割、特定のプラグイン)や、複雑なレガシーbuildに向いた選択のままです。どちらも最適化された出力を生成します。Viteのデフォルトは、より少ないtuningでそこに到達させてくれます。

高速化する

コールドrebuildを避けるため、lockfileをキーにして依存関係とbuild cacheをcacheしましょう。どちらもCIのrunner上で動作します。高速なマネージドrunnerは、重いbuildの実時間を削減します。

結論

高速で低configなbuildを求めるほとんどのモダンアプリ: Vite。完全な制御と最大のエコシステムを必要とする複雑またはカスタムなbuild: webpack。どちらでも依存関係とbuild cacheをcacheしましょう。

関連ガイド