Turbopack - Rust製次世代バンドラでWebpack/Viteを超える高速化

Webアプリケーションの規模が拡大するにつれ、バンドラのビルド時間・HMR速度が開発体験のボトルネックになっています。Turbopackは、Rust製の次世代バンドラとして、Webpackの700倍高速なHMRを実現し、大規模プロジェクトでも快適な開発環境を提供します。本記事では、Turbopackの特徴と実践的な利用方法を解説します。

Turbopackとは

Turbopackは、Vercelが開発するRust製の高速バンドラで、Webpackの後継として設計されています。Webpackの作者であるTobias Koppers氏が開発に参加し、過去10年のWebpack開発で得られた知見を活かして設計されました。

主要な特徴

• 超高速HMR: Webpackより最大700倍高速（大規模アプリで顕著）
• インクリメンタルビルド: 変更箇所のみを再ビルドし、無駄な処理を排除
• 最適化エンジン: Tree Shaking・Code Splitting・Minificationを最適化
• Next.js統合: Next.js 13以降で公式サポート、設定なしで利用可能
• Webpack互換: 既存のローダー・プラグインの多くが動作
• TypeScript/JSXネイティブサポート: 追加設定不要

なぜTurbopackが必要か

従来のバンドラ（Webpack・Vite等）には、以下の課題がありました。

従来の課題

1. HMRの遅延: 大規模プロジェクトではファイル保存からブラウザ反映まで数秒かかる
2. 初回ビルド時間: プロジェクトが大きくなると初回ビルドに数分かかる
3. メモリ消費: Node.js製バンドラはメモリ消費が大きく、大規模プロジェクトでクラッシュすることも
4. 設定の複雑さ: Webpackは設定ファイルが複雑で、学習コストが高い

Turbopackはこれらをすべてアーキテクチャレベルで解決し、開発者体験を大幅に向上させます。

アーキテクチャ

flowchart TB
 subgraph Turbopack["Turbopack Core (Rust)"]
 A1["File Watcher"]
 A2["Incremental Engine"]
 A3["Asset Graph"]
 A4["Optimization"]
 A5["HMR Server"]
 end

 subgraph Assets["アセット"]
 B1["TypeScript/JSX"]
 B2["CSS/SCSS"]
 B3["Images/Fonts"]
 end

 subgraph Output["出力"]
 C1["Bundle.js"]
 C2["CSS"]
 C3["Assets"]
 end

 A1 --> A2
 A2 --> A3
 A3 --> A4
 A4 --> A5
 B1 --> A1
 B2 --> A1
 B3 --> A1
 A4 --> C1
 A4 --> C2
 A4 --> C3

• File Watcher: ファイル変更を検出し、インクリメンタルビルドを起動
• Incremental Engine: 変更箇所のみを再コンパイルし、キャッシュを活用
• Asset Graph: モジュール間の依存関係をグラフで管理
• Optimization: Tree Shaking・Code Splitting・Minificationを実行
• HMR Server: WebSocketでブラウザに変更を即座に反映

Next.jsでの利用

TurbopackはNext.js 13以降で公式サポートされています。

有効化

# Next.js 13以降でプロジェクトを作成
npx create-next-app@latest my-app --typescript

cd my-app

# 開発サーバーをTurbopackで起動
npm run dev -- --turbo

または、package.jsonを編集:

{
 "scripts": {
 "dev": "next dev --turbo",
 "build": "next build",
 "start": "next start"
 }
}

npm run dev

パフォーマンス比較

大規模プロジェクトほど、Turbopackの高速化効果が顕著になります。

スタンドアロンでの利用

TurbopackはNext.js以外のプロジェクトでも利用可能です（実験的）。

インストール

npm install -D turbopack

基本設定

// turbopack.config.js
module.exports = {
 entry: './src/index.tsx',
 output: {
 path: './dist',
 },
 resolve: {
 extensions: ['.ts', '.tsx', '.js', '.jsx'],
 },
};

ビルド実行

npx turbopack build

Webpack互換性

Turbopackは、既存のWebpackローダー・プラグインの多くと互換性があります。

Webpackローダーの移行

// next.config.js
module.exports = {
 experimental: {
 turbo: {
 loaders: {
 // Webpackローダーをそのまま使用
 '.svg': ['@svgr/webpack'],
 },
 },
 },
};

対応しているローダー（一部）

• babel-loader
• @svgr/webpack
• sass-loader
• postcss-loader

TurbopackとWebpackの比較

Next.jsプロジェクトならTurbopack、複雑なカスタマイズが必要ならWebpackという選択になります。

TurbopackとViteの比較

Viteも高速な開発サーバーを提供するツールです。

Next.jsならTurbopack、Vue/Reactの軽量プロジェクトならViteを選択します。

詳細はVite 6 - 次世代ビルドツールを参照してください。

実践的なユースケース

1. Next.js大規模プロジェクト

# Next.jsプロジェクトでTurbopackを有効化
npm run dev -- --turbo

# 3000モジュール規模のプロジェクトでHMRが30ms以下

2. TypeScript/React SPA

// turbopack.config.js
module.exports = {
 entry: './src/index.tsx',
 output: {
 path: './dist',
 },
 resolve: {
 extensions: ['.ts', '.tsx', '.js', '.jsx'],
 },
 optimization: {
 splitChunks: {
 chunks: 'all',
 },
 },
};

npx turbopack build

3. モノレポでの利用

// turbopack.config.js (ルート)
module.exports = {
 entry: {
 app1: './apps/app1/src/index.tsx',
 app2: './apps/app2/src/index.tsx',
 },
 output: {
 path: './dist',
 },
};

Turbopackはモノレポ環境でもキャッシュを共有し、高速ビルドを実現します。

最適化機能

Tree Shaking

Turbopackは未使用コードを自動で削除します。

// utils.ts
export function usedFunction() {
 return 'used';
}

export function unusedFunction() {
 return 'unused'; // ビルド時に削除される
}

// app.tsx
import { usedFunction } from './utils';

console.log(usedFunction());

Code Splitting

動的インポートで自動的にチャンクを分割します。

// app.tsx
import React, { lazy, Suspense } from 'react';

// 動的インポート
const HeavyComponent = lazy(() => import('./HeavyComponent'));

function App() {
 return (
 <Suspense fallback={<div>Loading...</div>}>
 <HeavyComponent />
 </Suspense>
 );
}

TurbopackはHeavyComponentを別チャンクとして分割し、初回ロード時間を短縮します。

Minification

本番ビルド時に自動でコードを圧縮します。

# 本番ビルド
npm run build

# 出力されたJSは自動で圧縮されている

デバッグ機能

Turbopackは開発者向けのデバッグ機能を提供します。

ビルド統計の表示

# ビルド統計を表示
npm run dev -- --turbo --debug

# 出力例:
# Module count: 3000
# Bundle size: 1.2MB
# HMR time: 25ms

ソースマップ

// next.config.js
module.exports = {
 experimental: {
 turbo: {
 sourceMap: true, // ソースマップを有効化
 },
 },
};

ソースマップを有効にすると、ブラウザのDevToolsで元のTypeScript/JSXコードをデバッグできます。

キャッシュ管理

Turbopackはインクリメンタルビルドのキャッシュを .next/cache/turbopack に保存します。

キャッシュのクリア

# キャッシュをクリアして再ビルド
rm -rf .next/cache/turbopack
npm run dev -- --turbo

移行ガイド

WebpackからTurbopackへの移行

1. Next.jsバージョン確認: Next.js 13以降に更新
2. 設定ファイル確認: next.config.jsでカスタムWebpack設定を確認
3. Turbopack有効化: npm run dev -- --turboで起動
4. 動作確認: すべての機能が正常に動作することを確認
5. カスタムローダー移行: 必要に応じてTurbopack互換のローダーに移行

よくある移行エラー

エラー1: カスタムWebpackプラグインが動作しない

// next.config.js
module.exports = {
 experimental: {
 turbo: {
 // Webpack互換のローダーに置き換え
 loaders: {
 '.custom': ['custom-loader'],
 },
 },
 },
};

エラー2: 環境変数が読み込まれない

// next.config.js
module.exports = {
 env: {
 CUSTOM_ENV: process.env.CUSTOM_ENV,
 },
};

パフォーマンスチューニング

メモリ制限の調整

# Node.jsのメモリ上限を増やす
NODE_OPTIONS="--max-old-space-size=4096" npm run dev -- --turbo

並列ビルド数の調整

// next.config.js
module.exports = {
 experimental: {
 turbo: {
 workers: 4, // 並列ビルドワーカー数
 },
 },
};

まとめ

TurbopackはRust製の次世代バンドラで、Webpackより最大700倍高速なHMRを実現しています。Next.js公式統合により、設定なしで利用でき、大規模プロジェクトの開発体験を大幅に向上させます。

Turbopackを選ぶべきケース

• Next.jsプロジェクトを開発している
• 大規模プロジェクトでHMRが遅い
• ビルド時間を短縮したい
• Webpackの設定ファイルを簡略化したい
• Rust製の高速ツールを使いたい

TurbopackはVercelが継続的に開発しており、Next.jsの標準バンドラとして今後さらに普及すると予想されます。すでにNext.js 13以降で安定動作しており、本番環境での導入も進んでいます。

参考リソース

• 公式ドキュメント - Turbopack - Rust製次世代バンドラでWebpack/Viteを超える高速化 を確認するための一次情報

関連記事

• Vite 6 - 次世代ビルドツール

×

PR

×

PR