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

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

関連ワード (対応、背景、関係等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。


複数の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」で説明しています。ポイントを見ていきましょう。

Learn about the Turbopack vision from one of the creators, @wSokra, the creator of webpack.https://t.co/sLAKdbUTFQ

— Vercel (@vercel) January 11, 2023

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

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倍高速だと説明されています。

Introducing Turbopack, the successor to Webpack.

◆ ~700x faster than Webpack
◆ 10x faster than Vite
◆ Native incremental architecture built with Rust
◆ Support for React Server Components
◆ Support for TS, JSX, CSS & more

Now open-source in Alpha.https://t.co/dHXXFfgGOJ

— Vercel (@vercel) October 25, 2022

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

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

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

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

fig

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

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

COMMENTS


Recommended

TITLE
CATEGORY
DATE
核融合技術で新エネルギー開発に取り組む「京都フュージョニアリング」が約1.2億円調達
パブリック / ダイバーシティ
2021-01-21 15:25
楽天モバイル、回線契約者数300万人まで間もなく 1年無料キャンペーンの受け付けは4月に終了
企業・業界動向
2021-03-02 13:12
日立、JRシステムに対話型AIエンジンを提供–バーチャル駅員とのきっぷ購入を支援
IT関連
2023-04-01 07:29
米政府、ポスト量子サイバーセキュリティに向け新興企業QuSecureと契約
IT関連
2022-07-02 17:20
コロナ禍で拡大したIT・ビジネスサービス市場、2023年も堅調の見込み–IDC
IT関連
2022-11-02 11:35
アプライド マテリアルズ、半導体の製造研究センターを新設へ–約5500億円を投入
IT関連
2023-05-24 19:45
普及が進むリアルタイムデータ–持続可能な活用に向けた課題とは
IT関連
2023-11-21 10:17
「Android」でロックダウンモードを有効にするには–生体認証でのロック解除を無効に
IT関連
2022-08-28 07:25
筋トレゲーム「リングフィット」の最速クリア新記録へ 記録保持者の挑戦が話題
ネットトピック
2021-08-12 15:52
平井大臣、LINEとZホールディングスの統合に言及 「利用者目線のプラットフォームを」
企業・業界動向
2021-02-27 17:07
AIは不動産業界の平等化を促進する決定打になるのか
IT関連
2022-09-01 04:16
今週の記事ランキング(2021.3.14〜3.18)
IT関連
2021-03-20 11:13
持続可能な自動車製造を目指すBMWが二酸化炭素を排出しない製鉄技術を開発したBoston Metalに投資
EnviroTech
2021-03-15 11:51
高まるプライバシー管理の重要性、マイクロソフトが対策技術などを説明
IT関連
2022-09-14 05:17