RollupはJavaScriptモジュールバンドラの一つで、英国の元The Guardian開発者リッチ・ハリス氏が2015年に公開しました。リッチ・ハリス氏は後にフレームワークのSvelteを生んだ人物としても知られています。ES Modules（ESM）をネイティブに扱い、未使用エクスポートをビルド時に削るTree Shakingを最初に広めたツールで、「ライブラリを配布するならRollup」というポジションを長く保ち続けてきました。Vue 3・React・D3・Three.js・Preactなどの著名ライブラリが配布ビルドに採用しています。
この記事の目次
- ESMネイティブとTree Shaking
- 2015年公開からVite採用まで
- ライブラリ配布での威力
- webpackとの違い
- まとめ
ESMネイティブとTree Shaking
Rollupの設計思想は「ES Modulesを最優先に扱う」点に集約されます。import／export文をそのままビルド時に解釈し、依存関係を静的に追跡することで、どのエクスポートが実際に使われているかを正確に判定できます。この判定結果を使い、未使用の関数や定数をビルド成果物から取り除く「Tree Shaking」を業界で初めて実用化しました。現在ではwebpackやesbuildも同じ機能を備えていますが、用語そのものをRollupが定着させました。
プラグインAPIも特徴的で、@rollup/plugin-node-resolveでnode_modules解決、@rollup/plugin-commonjsでCommonJS変換、@rollup/plugin-typescriptでTS対応、@rollup/plugin-terserでミニファイ、と一連のステップが独立したプラグインに分かれています。出力形式もesm／cjs／umd／iifeを切り替えられるため、同じソースから複数のフォーマットを生成して「npmとブラウザscriptタグの両方で動くライブラリ」を作る用途に向いています。
2015年公開からVite採用まで
Rollupはリッチ・ハリス氏が2015年5月に初版を公開しました。当時はwebpackが既にデファクトの座を握りつつありましたが、「アプリのバンドルにはwebpack、ライブラリの配布にはRollup」というすみ分けが急速に形成されました。理由はサイズ最適化の徹底度合いで、Rollupは小さなesmファイルを綺麗に書き出すことに長けています。
2020年にEvan You氏がVue 3のビルドをRollupベースに移行し、同年彼が新たに公開した開発サーバーViteも本番ビルドにRollupを採用したことで、Rollupは新世代の中心ツールへと再浮上しました。リッチ・ハリス氏自身は2021年にVercelに移籍してSvelteの専任開発者となりましたが、Rollupのメンテナンスは引き続きコミュニティが担っており、定期的にメジャーバージョンが更新されています。2023年にはRustでパーサー部分を書き換えるRolldownプロジェクトも始まり、性能改善の道筋が新たに引かれました。
ライブラリ配布での威力
Rollupが最も多く使われているのは、npmに配布するJavaScript／TypeScriptライブラリのビルドです。package.jsonのmain（CommonJS）、module（ESM）、exports（条件付きエントリ）に対応した複数フォーマットを1度のビルドで書き出せるため、「Reactでもブラウザscriptタグでも使える」ライブラリを綺麗に作れます。@rollup/plugin-dtsを併用すれば.d.ts型定義もまとめられ、配布物の品質をワンストップで管理できます。
Three.jsやD3、Lodash-esのような巨大ライブラリは、Rollupでビルドした上でTree Shakingにより「使った機能だけが利用者のバンドルに乗る」設計を実現しています。また、Viteは開発時はesbuildで高速にプリビルドし、本番時はRollupで丁寧なTree Shakingと最適化を行う、という「esbuild ＋ Rollup」のハイブリッド構成を採用しており、これがフロントエンドの新しい標準になりつつあります。つまり多くの開発者は意識せずにRollupの出力を日々受け取っているわけです。
webpackとの違い
webpackはトビアス・コッパー氏が2012年に公開した古参バンドラで、loaderを介して画像・CSS・WebAssembly・GraphQLなど多彩なリソースをJSとして取り込み、アプリ全体のビルドに長けます。Code Splittingやhot module replacementの完成度は今も高く、大規模アプリのバンドラとして広く採用されています。
対するRollupは、ライブラリ配布や小さなアプリの「綺麗な単一バンドル」を作るのに向いています。loaderの代わりにプラグインで構成され、画像やCSSへの対応は別途設定が必要ですが、出力されるJSは素直で読みやすく、Tree Shakingの効きも安定しています。Rollup＝ライブラリ向け、webpack＝アプリ向け、という古典的なすみ分けは現在も基本的に有効で、Viteの登場以降は「アプリでもRollupベース」という選択肢が増えました。
まとめ
Rollupは2015年にリッチ・ハリス氏が公開したESM時代のバンドラで、Tree Shakingを業界で初めて広めました。Vue 3・React・D3・Three.jsなど主要ライブラリの配布ビルドに採用され、ViteやSvelteKitの本番ビルドも裏で支えています。webpackとすみ分けつつ、「ライブラリを綺麗に書き出すなら第一候補」というポジションを今も保ち続けています。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント