人気のJavaScriptバンドルツール「webpack」の開発はなぜ終わり、後継として「Turbopack」の開発が始まったのか。開発者がその理由を語る

2023年1月31日

複数のJavaScriptやTypeScriptの依存関係などを解決し、コードやフォント、画像などのリソースなどをまとめるバンドルツール(あるいはモジュールバンドラやビルドツールなどとも呼ばれます)は、多数のライブラリやコンポーネントなどを用いてチームで開発するWebアプリケーションの開発には欠かせないツールとなっています。

そのバンドルツールの代表がwebpackです。約4万人のITエンジニアによるアンケート結果が示された「State of JavaScript 2022」でもwebpackはGulpやViteなどを抑えて最も人気のあるバンドルツールとなっています。

参考:「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答

ところが、このwebpackの開発は事実上終了しており、開発者は現在Next.jsの開発企業であるVercelに移籍して、後継となるTurbopackの開発に取りかかっています。

そのTurbopackは昨年(2022年)10月、発表されました。

参考:Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022

なぜwebpackの開発は終わり、Turbopackの開発が始まったのでしょうか。

webpackの開発者であるTobias Koppers氏が、その理由をVercelのブログに投稿した記事「The Turbopack vision」で説明しています。ポイントを見ていきましょう。

後方互換性を維持したままでは大きな変更が困難に

Tobias氏はブログの中で、webpackは10年前のニーズを念頭に開発されたものだったと振り返ります。

However, webpack was built 10 years ago—with the needs of 10 years ago in mind. Since then, web development has evolved in new ways such that webpack’s architecture cannot easily accomodate the web engineers' needs today.

しかし、webpackは10年前に開発され、つまり10年前のニーズを念頭に置いて作られたのです。それ以来Web開発は進化を遂げ、webpackのアーキテクチャでは現在のWebエンジニアのニーズに容易には対応できなくなっています。

もはやwebpackの後方互換性を維持しながら、webpackを進化させていくのは困難だったと説明が続きます。

Some big changes are needed but it’s hard to make such large shifts while keeping backwards compatibility. With so many teams using and depending on webpack's core functionality today, the webpack team must be sensitive to the fact that we can't rewrite all of webpack from scratch.

いくつかの大きな変更が必要とされていましたが、後方互換性を維持しながらこのような大きな変化を持ち込むのは困難でした。現在ではあまりにも多くのチームがwebpackのコア機能を利用し、依存しているため、webpackの開発チームはwebpackのすべてをゼロから書き直すことができないという事実に敏感にならざるをえませんでした。

webpackの性能面での限界

Tobias氏のブログに埋め込まれた動画「Turbopack. Why? How? When? and the Vision... – Tobias Koppers, React Day Berlin 2022」では、Turbopackを開発することになった背景として、webpackの性能面での限界についても説明されています。

webpackはNode.jsを基盤としたJavaScriptで開発されています。しかしJavaScriptベースのアプリケーションはCPUインテンシブな処理においてマルチプロセッサ搭載マシンの能力を十分に引き出すことは困難であるとTobias氏は指摘します(おそらく大量のモジュールの依存関係を解決する処理がCPUインテンシブなのだと思われます) 。

fig

また、webpackのアーキテクチャは大規模なアプリケーションのビルド性能にも課題を抱えていたとTobias氏。

アーキテクチャは差分だけをビルドすることで効率的なビルドが可能になるインクリメンタルビルドには適しておらず、プラグインが何でも出来るようになっていてwebpackへの依存が大きく、それゆえに後方互換性のために大きな変更が難しく、キャッシュの無効化はセンシティブで影響が大きく、キャッシュのルックアップコストが大きいためモジュール数が増えるとそのコストがばかにならなくなってくる、といった指摘が続き、前述のようにこのままでは大きな変更は難しかったと説明。

fig

TurbopackではRustとインクリメンタルビルドを採用

これらのwebpackの課題を解決するために、後継となるTurbopackで採用された大きな2つの要素が、Rust言語の採用と、最初からインクリメンタルビルドの仕組みを基盤とした開発が行われたことです。

Rust言語は、すでにVercelがNext.js 12から採用しているトランスパイラのSWCがRustを採用したことで高速化を実現した実績を基に採用されたとのこと。

ただしプラグインに関してはJavaScript用のインターフェイスを設けて、RustでもJavaScriptでも書けるようにするとしています。

そしてインクリメンタルビルドとは、変更されたコードの差分だけを対象にビルドを実行することで、全体の再ビルドを不要にする仕組みです。

fig

Tobias氏はインクリメンタルビルドの効用を、変更された部分とその影響を受ける部分だけがビルドの対象となるため、二度目以降のビルドにかかる時間はアプリケーションの規模とは関係なくなり、大規模なアプリケーションであっても高速にビルドできると説明しています。

このような大きな変更のためには、webpackを基にしたバージョンアップではなく、新たにTurbopackを開発する必要があったということなのでしょう。

下記はTurbopackが発表されたときのツイートです。最大でwebpackの700倍高速だと説明されています。

Next.js以外のフレームワークでも使えるように

大規模化するアプリケーションにも十分対応できるように、マシン性能を十分に活用しつつ、高速なビルドを実現するTurbopackは、このような背景で開発されることになったわけです。

現時点でTurbopackはまだアルファ版の段階で、これからプラグインシステムの開発などが進められ、機能追加と完成度が高まっていくことになります。

そしてTobias氏はTurbopackをNext.js専用にするつもりはなく、他のフレームワークなどでも活用してもらえるようなソフトウェアにするとしています。

fig

果たして、競合が多いJavaScriptのツールのなかで、Turbopackはwebpackの後継にふさわしい地位を獲得できるようになるのでしょうか。おそらく1~2年後には答えが出ているはずです。

ブログと動画では、もう少し踏み込んだTurbopackの仕組みと実装について解説されているため、興味のある方はぜひそちらをご参照ください。

あわせて読みたい

JavaScript プログラミング言語 開発ツール TypeScript Vercel




タグクラウド

クラウド
AWS / Azure / Google Cloud
クラウドネイティブ / サーバレス
クラウドのシェア / クラウドの障害

コンテナ型仮想化

プログラミング言語
JavaScript / Java / .NET
WebAssembly / Web標準
開発ツール / テスト・品質

アジャイル開発 / スクラム / DevOps

データベース / 機械学習・AI
RDB / NoSQL

ネットワーク / セキュリティ
HTTP / QUIC

OS / Windows / Linux / 仮想化
サーバ / ストレージ / ハードウェア

ITエンジニアの給与・年収 / 働き方

殿堂入り / おもしろ / 編集後記

全てのタグを見る

Blogger in Chief

photo of jniino

Junichi Niino(jniino)
IT系の雑誌編集者、オンラインメディア発行人を経て独立。2009年にPublickeyを開始しました。
詳しいプロフィール

Publickeyの新着情報をチェックしませんか?
Twitterで : @Publickey
Facebookで : Publickeyのページ
RSSリーダーで : Feed

最新記事10本