Turbopack

Turbopack 是一个针对 JavaScript 和 TypeScript 优化的 增量 bundler，用 Rust 编写，并内置于 Next.js 中。 您可以将 Turbopack 与 Pages 和 App Router 一起使用，以获得 更快 的本地开发体验。

为什么选择 Turbopack？

我们构建 Turbopack 的目的是为了提升 Next.js 的性能，包括

• 统一图： Next.js 支持多种输出环境（例如，客户端和服务器）。 管理多个编译器并将捆绑包拼接在一起可能很繁琐。 Turbopack 对所有环境使用 单个统一图。
• 捆绑与原生 ESM： 一些工具在开发中跳过捆绑，并依赖于浏览器的原生 ESM。 这对于小型应用程序效果很好，但由于过多的网络请求，可能会减慢大型应用程序的速度。 Turbopack 在开发中进行捆绑，但以优化的方式保持大型应用程序的快速运行。
• 增量计算： Turbopack 在内核之间并行处理工作，并将结果缓存到函数级别。 一旦完成一项工作，Turbopack 就不会重复它。
• 懒加载捆绑： Turbopack 仅捆绑开发服务器实际请求的内容。 这种懒加载方法可以减少初始编译时间和内存使用量。

开始入门

要在您的 Next.js 项目中启用 Turbopack，请将 --turbopack 标志添加到您的 package.json 文件中的 dev、build 和 start 脚本中

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

目前，用于 dev 的 Turbopack 是稳定的，而 build 处于 alpha 阶段。 随着 Turbopack 越来越接近稳定，我们正在积极致力于生产支持。

支持的功能

Next.js 中的 Turbopack 对于常见用例具有 零配置。 以下是开箱即用支持的功能摘要，以及在需要时如何进一步配置 Turbopack 的一些参考。

语言特性

框架和 React 特性

CSS 和样式

资源

模块解析

性能和快速刷新

不支持和未计划的功能

某些功能尚未实现或未计划

• 旧版 CSS Modules 功能
  • 独立的 :local 和 :global 伪类（仅支持函数变体 :global(...)）。
  • @value 规则（已被 CSS 变量取代）。
  • :import 和 :export ICSS 规则。
• next.config.js 中的 webpack() 配置 Turbopack 替换了 webpack，因此无法识别 webpack() 配置。 请改用experimental.turbo 配置。
• AMP 未计划在 Next.js 中支持 Turbopack。
• Yarn PnP 未计划在 Next.js 中支持 Turbopack。
• experimental.urlImports 未计划用于 Turbopack。
• experimental.esmExternals 未计划。 Turbopack 不支持 Next.js 中的旧版 esmExternals 配置。
• 一些 Next.js Experimental Flags
  • experimental.typedRoutes
  • experimental.nextScriptWorkers
  • experimental.sri.algorithm
  • experimental.fallbackNodePolyfills 我们计划在未来实现这些功能。

有关每个功能标志及其状态的完整详细分类，请参阅Turbopack API 参考。

配置

可以通过 next.config.js（或 next.config.ts）在 turbopack 键下配置 Turbopack。 配置选项包括

• rules 定义用于文件转换的其他webpack 加载器。
• resolveAlias 创建手动别名（如 webpack 中的 resolve.alias）。
• resolveExtensions 更改或扩展模块解析的文件扩展名。
• moduleIds 设置模块 ID 的生成方式（'named' 与 'deterministic'）。
• treeShaking 在开发和未来的生产构建中启用或禁用 tree shaking。
• memoryLimit 为 Turbopack 设置内存限制（以字节为单位）。

module.exports = {
  turbopack: {
    // Example: adding an alias and custom file extension
    resolveAlias: {
      underscore: 'lodash',
    },
    resolveExtensions: ['.mdx', '.tsx', '.ts', '.jsx', '.js', '.json'],
  },
}

有关更深入的配置示例，请参阅Turbopack 配置文档。

生成跟踪文件以进行性能调试

如果您遇到性能或内存问题并希望帮助 Next.js 团队诊断它们，您可以通过将 NEXT_TURBOPACK_TRACING=1 附加到您的 dev 命令来生成跟踪文件

NEXT_TURBOPACK_TRACING=1 next dev --turbopack

这将生成一个 .next/trace-turbopack 文件。 在 Next.js 仓库 上创建 GitHub issue 时包含该文件，以帮助我们进行调查。

总结

Turbopack 是一个 基于 Rust 的、增量 bundler，旨在使本地开发和构建快速—尤其适用于大型应用程序。 它集成到 Next.js 中，提供零配置的 CSS、React 和 TypeScript 支持。

请继续关注更多更新，因为我们将继续改进 Turbopack 并添加生产构建支持。 与此同时，请尝试使用 next dev --turbopack 并告知我们您的反馈。

版本变更