前端工程化：从 Webpack 到 Turbopack 的迁移指南

为什么选择 Turbopack？

Turbopack 是 Vercel 基于 Rust 开发的新一代打包工具，专为 Next.js 优化：

指标	Webpack	Turbopack
冷启动时间	~8s	~1.5s
HMR 更新时间	~200ms	~15ms
生产构建	~45s	~18s
内存占用	~1.2GB	~600MB

数据基于中型 Next.js 项目 (100+ 组件)

迁移步骤

第一步：升级 Next.js

npm install next@latest react@latest react-dom@latest

第二步：启用 Turbopack

# 开发模式
next dev --turbo

# 或在 next.config.js 中配置
module.exports = {
  experimental: {
    turbo: {}
  }
}

第三步：处理不兼容的配置

Turbopack 不支持部分 Webpack 特有的配置：

// ❌ Webpack 特有 - 需要迁移
webpack: (config) => {
  config.plugins.push(new SomeWebpackPlugin())
  return config
}

// ✅ 使用 Turbopack 等效配置
module.exports = {
  transpilePackages: ['some-package'],
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js'
        }
      }
    }
  }
}

第四步：插件迁移

Webpack 插件	Turbopack 替代
`@svgr/webpack`	内置支持 (通过 turbo.rules)
`raw-loader`	内置支持
`bundle-analyzer`	`ANALYZE=true next build`
`copy-webpack-plugin`	`public/` 目录自动复制

CSS 处理演进

从 webpack 时代的 PostCSS loader 到 Turbopack 的原生支持：

/* Tailwind CSS v4 + Turbopack */
@import 'tailwindcss';

@theme {
  --color-primary: oklch(0.585 0.194 277.128);
  --font-sans: 'Inter', system-ui, sans-serif;
}

Turbopack 原生理解 CSS @import，无需额外 loader 配置。

渐进式迁移策略

不需要一次性迁移整个项目：

先试开发环境：next dev --turbo
对比性能：记录冷启动、HMR 时间
处理兼容性问题：逐个解决不兼容的配置
启用生产构建：next build (默认使用 Turbopack)
监控线上表现：确认打包产物大小和运行时行为

常见问题

SVG 导入

// Turbopack 原生支持
import Logo from './logo.svg'

// 作为组件使用
<Logo className="h-8 w-8" />

环境变量

Turbopack 的处理方式与 Webpack 完全一致：

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com

性能对比实测

在一个 150+ 页面的 Next.js 博客项目中：

dev 启动：Webpack 9.2s → Turbopack 1.8s (↓80%)
HMR 更新：Webpack 180ms → Turbopack 12ms (↓93%)
首次页面加载：Webpack 3.1s → Turbopack 1.2s (↓61%)

迁移成本约 2 小时，投资回报率极高。