webpack vs Rollup: CIビルドにどちらのバンドラーを使うべきか？

著者 Kaveh Alemi·Latchkey

webpackは広大なloader/プラグインエコシステムを持つ重量級のアプリバンドラーです。Rollupはより軽量で、tree-shakingされたライブラリ出力に好まれます。

webpackは複雑なアプリケーション向けに作られた、成熟した高度に設定可能なバンドラーで、loader、code-splitting、巨大なプラグインエコシステムを備えています。Rollupはクリーンでtree-shakingされた出力に注力し、ライブラリを公開する際の一般的な選択肢です。

	webpack	Rollup
最適な用途	複雑なアプリ	ライブラリ、軽量な出力
設定の複雑さ	高い	低い
Tree-shaking	良好	優秀
プラグイン/loaderエコシステム	最大	大きく、成熟
Code-splitting	成熟、柔軟	サポート済み

CIでの挙動

webpackは複雑なアプリケーションビルドを処理します - 多数のentry point、高度なcode-splitting、あらゆるアセット種別のloader - ただし設定が重く、ビルドが遅くなる代償があります。Rollupはよりシンプルな設定で、小さくよくtree-shakingされたバンドルを生成するため、ライブラリの定番であり (そしてViteの本番ビルドの背後にあるエンジンです)。出力対象で選びましょう: アプリ vs ライブラリ。

高速化する

ビルドと依存関係をlockfileをキーにcacheし、サポートされている場合は永続キャッシュを使いましょう。どちらもCI runner上で動作します。より高速なマネージドrunnerは、重いwebpackビルドの実時間を削減します。

Benchmark on your repository before choosing

Build-tool benchmarks published by vendors use repositories chosen to show a difference. Yours is the only one that matters, and both a cold and a warm measurement are needed because CI mostly runs cold.

Terminal

# cold: no cache, the CI condition
rm -rf node_modules/.cache dist && time <tool> build

# warm: the local development condition
time <tool> build

# and the one people forget: incremental after a one-line change
echo "// touch" >> src/index.ts && time <tool> build

結論

多くのアセット種別と分割ポイントを持つ複雑なアプリをバンドルするなら: webpack。ライブラリを公開する、または軽量でtree-shakingされた出力が欲しいなら: Rollup。多くのチームはViteを通じて自動的にRollupの出力を得ています。

よくある質問

webpack vs Rollup: Which Bundler for CI Builds?

webpack is a mature, highly configurable bundler built for complex applications, with loaders, code-splitting, and a huge plugin ecosystem. Rollup focuses on clean, tree-shaken output and is the common choice for publishing libraries.

In CI?

webpack handles complex application builds - many entry points, advanced code-splitting, and loaders for every asset type - at the cost of heavier config and slower builds. Rollup produces smaller, well tree-shaken bundles with simpler config, which is why it is the go-to for libraries (and the engine behind Vite's production builds).

Speed it up?

Cache the build and dependencies keyed on your lockfile, and use persistent caching where supported. Both run on CI runners; faster managed runners cut the wall-clock time of heavy webpack builds.

Which should I choose?

Bundling a complex app with many asset types and split points: webpack. Publishing a library or wanting lean, tree-shaken output: Rollup. Many teams get Rollup's output automatically via Vite.