跳至内容
简介架构Turbopack

Turbopack

Turbopack (测试版) 是一个针对 JavaScript 和 TypeScript 优化的增量打包器，用 Rust 编写，并内置于 Next.js 中。

用法

Turbopack 可以在 Next.js 的 pages 和 app 目录中使用，以加快本地开发速度。要启用 Turbopack，请在运行 Next.js 开发服务器时使用 --turbo 标志。

package.json
{
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

支持的功能

对于大多数用户而言，Turbopack 在 Next.js 中无需任何配置即可使用，并且可以扩展以满足更高级的用例。要了解有关 Turbopack 当前支持的功能的更多信息，请查看 API 参考。

不支持的功能

Turbopack 目前仅支持 next dev，不支持 next build。在我们逐步接近稳定版的同时，我们正在努力支持构建功能。

目前不支持以下功能

  • Turbopack 利用了 Lightning CSS，它不支持某些低使用率的 CSS 模块功能
    • :local 和 :global 作为独立的伪类。仅支持函数变体，例如：:global(a)。
    • @value 规则已被 CSS 变量取代。
    • :import 和 :export ICSS 规则。
  • 无效的 CSS 注释语法，例如 //
    • CSS 注释应根据规范编写为 /* comment */。
    • Sass 等预处理器确实支持这种替代的注释语法。
  • webpack() 在 next.config.js 中的配置
    • Turbopack 替换了 Webpack，这意味着不支持 webpack 配置。
    • 要配置 Turbopack，请参阅文档。
    • Turbopack 支持 Webpack 加载器 的子集。
  • Babel (.babelrc)
    • Turbopack 利用 SWC 编译器进行所有转译和优化。这意味着默认情况下不包含 Babel。
    • 如果你有 .babelrc 文件，你可能不再需要它，因为 Next.js 包含常见的 Babel 插件作为可以启用的 SWC 转换。你可以在 编译器文档 中阅读更多相关内容。
    • 如果你在验证你的特定用例未涵盖后仍然需要使用 Babel，你可以利用 Turbopack 的 对自定义 webpack 加载器的支持 来包含 babel-loader。
  • 在 App 路由器中自动创建根布局。
    • 此行为目前不支持，因为它会更改输入文件，相反，将显示错误，以便你手动在所需位置添加根布局。
  • @next/font（旧版字体支持）。
    • @next/font 已弃用，推荐使用 next/font。 next/font 完全支持 Turbopack。
  • 中继转换
    • 我们计划在未来实现此功能。
  • 阻止 pages/_document.tsx 中的 .css 导入。
    • 目前使用 webpack 时，Next.js 会阻止在 pages/_document.tsx 中导入 .css 文件。
    • 我们计划在未来实现此警告。

  • experimental.typedRoutes
    • 我们计划在未来实现此功能。
  • experimental.nextScriptWorkers
    • 我们计划在未来实现此功能。
  • experimental.sri.algorithm
    • 我们计划在未来实现此功能。
  • experimental.fallbackNodePolyfills
    • 我们计划在未来实现此功能。
  • experimental.esmExternals
    • 我们目前不计划在使用 Turbopack 的 Next.js 中支持旧版 esmExternals 配置。
  • AMP.
    • 我们目前不计划在使用 Turbopack 的 Next.js 中支持 AMP。
  • Yarn PnP
    • 我们目前不计划在使用 Turbopack 的 Next.js 中支持 Yarn PnP。
  • experimental.urlImports
    • 我们目前不计划在使用 Turbopack 的 Next.js 中支持experimental.urlImports。
  • :import 和 :export ICSS 规则
    • 我们目前不计划在使用 Turbopack 的 Next.js 中支持:import 和 :export ICSS 规则，因为Turbopack 使用的 CSS 解析器 Lightning CSS 不支持这些规则。
  • edge 运行时中的unstable_allowDynamic 配置

生成跟踪文件

跟踪文件允许 Next.js 团队调查和改进性能指标和内存使用情况。要生成跟踪文件，请将NEXT_TURBOPACK_TRACING=1 附加到next dev --turbo命令中，这将生成一个.next/trace.log文件。

在报告与 Turbopack 性能和内存使用相关的問題时，请在您的GitHub问题中包含跟踪文件。