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

今回は「Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022」についてご紹介します。

関連ワード (年間、維持、複数等) についても参考にしながら、ぜひ本記事について議論していってくださいね。

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


Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」と、Rust製の高速なバンドルツール「Turbopack」を発表しました。

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

バンドルツールとは多数のJavaScriptやTypeScriptなどのコードを1つにまとめる機能を備えたツールです。多数のライブラリやコンポーネントなどを用いてチームで開発する大規模なWebアプリケーションの開発には欠かせません。

今回発表されたTurbopackは、代表的なバンドルツールの1つであるWebpackの開発者Tobias Koppers氏らがVercelに参加して開発したものです。同社はWebpackの後継がTurbopackであると説明しています。

Turbopackの特徴はRustで記述されたネイティブアプリケーションであることと、一度実行された内容は再利用される仕組みを備えていることなどで、これにより大規模なアプリケーションでも高速な起動と実行を実現します。

Next.js 13ではこのTurbopackが標準のバンドルツールとなります。

Next.js Conf 2022の基調講演から、Turbopackに関する説明が行われた部分をまとめました。

関連:Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022

JavaScriptベースのツールは性能面での限界に直面した

VP of Developer Experience Lee Robinson氏。

Next.jsにおけるコンパイラインフラストラクチャの新しい始まりです。

fig

かつて2016年には、JavaScriptのためのツールをJavaScriptで書くことは自然なことでした。Babel、tercer、Webpackなどのツールはそうして作られました。

fig

しかしフロントエンドアプリケーションのサイズと複雑さの増加に対して、これらJavaScriptベースのツールによるコンパイルは性能面での限界に直面するようになります。

そこで私たちはRustベースのネイティブなツールへの移行を開始したことを前回のイベントでご紹介しました。まずBabelから移行し、トランスパイルの速度を17倍にしました。次に、tercerも置き換えることで、minificationが6倍速くなりました(新野注:Babelとtercerの移行先となったツールはSWC)。

fig

Webpackの後継となるTurbopackの登場

ではバンドルについてはどうでしょうか。バンドルツールのWebpackは30億回以上ダウンロードされており、ビルドに欠かせない存在です。しかしWebpackもBabelやtercerと同じように、ネイティブに全力を注ぐ時が来ました。

Webpackの開発者であるTobias Koppersは私たちVercelに加わり、次世代のバンドルツールを作るためにワールドクラスのエンジニアのチームを結成しました。このチームがWebpackの10年間の教訓と、TurborepoやGoogleのBazelから得た革新とを組み合わせることで、次の10年に耐えるアーキテクチャを開発したのです。

ここにTurbopackを発表します。Webpackの後継となるRustベースのツールです。

fig

大規模なアプリケーションでは、TurbopackはViteよりも10倍速く、Webpackの700倍も高速です。さらに大きなアプリケーションであれば、その差はさらに開くでしょう。

fig

このスピードアップは、コードの更新時だけでなく、ローカルで開発サーバーを立ち上げる際にも有効です。

例を見てみましょう。3000個のモジュールを持つ大規模なアプリケーションを扱う場合でも、Turbopackは1.8秒で起動します。Next.jsの以前のバージョンや他の一般的なツールよりも高速です。

fig

ローカルとクラウドの両方でビルドを強化していく

Turbopackの性能は、Rustで開発され、高度に最適化されたマシンコードと低レベルのインクリメンタルエンジンによるものです。Turbopackは一度実行したタスクは二度と実行しないのです。

Turbopackはまず、React Fast Refresh(新野注:実行中のアプリケーションでもコンポーネントを編集できる機能)を含むローカルでの開発体験に焦点を当てますが、最終的にはローカルとクラウドの両方でNext.jsのビルドを強化する予定です。

fig

Tuborepoと同様に、ローカルマシンだけでなく組織全体においてチーム内で既に実行された作業内容を共有できます。

ぜひNext.js 13にアップグレードして「next dev –turbo」を実行し、Turbopackのアルファ版をぜひお試しください。

fig
fig

Next.js Conf 2022

  • Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022
  • Webpackの後継となる新バンドルツール「Turbopack」が登場。Rust製のネイティブアプリケーションでWebpackの700倍高速に。Next.js Conf 2022

COMMENTS


Recommended

TITLE
CATEGORY
DATE
マイクロソフト、サイバーセキュリティ人材の需要増で女性らのスキルアップを支援
IT関連
2023-05-04 07:26
インプリム、OSSを武器にローコード開発ツール市場を開拓–認知拡大に向けた新施策とは
IT関連
2024-03-16 02:48
起点は注文商品のピックから–Uber Eatsの新サービス、「まいばすけっと」で開始
IT関連
2024-06-28 06:23
ウィズセキュア、マルウェアミュージアム開設へ–サイバー犯罪との闘いにおける行動と協力を促す
IT関連
2024-07-05 11:20
課題を個人に委ねない–日立ソリューションズ、女性社員の健康を支える新サービス
IT関連
2023-03-11 22:58
iPad Pro/Airにイヤフォン端子を追加し、じゃまにならないUSB-C変換アダプター エレコムが発売
くらテク
2021-08-18 14:44
「シン・エヴァ」制作に使った“第3村”のミニチュア公開 「スモールワールズTOKYO」で パンフ持参で入場料を1000円に
くらテク
2021-04-11 08:39
LiDARを使った駐車場管理システム ロック板やゲートバー不要に
企業・業界動向
2021-01-22 18:22
大林組とNTT Com、ドローン活用の完全無人巡回による建設現場の工事進捗管理を実証
IT関連
2024-03-29 11:33
スマート畜産の普及を目指すNTT東日本の通信環境実証実験にAI家畜管理サービスPIGIが協力、IEEE802.11ah活用
IT関連
2022-02-16 15:42
プロeスポーツチーム「REJECT」運営元が3.6億円のシリーズA調達、トレーニング環境投資や新規事業開発加速
ゲーム / eSports
2021-04-27 12:09
「シン・エヴァ」1週間で興収33億円突破 「初日の勢いそのままの大ヒット」
くらテク
2021-03-16 01:48
テスラの大型バッテリーシステム「メガパック」がオーストラリアの蓄電施設で発火事故
ハードウェア
2021-08-03 07:54
ソフトウェア開発を内製化したい日本企業は54.4%–ガートナー調べ
IT関連
2023-01-20 00:58