turbo

turbo 选项允许你自定义 Turbopack 以转换不同的文件并更改模块的解析方式。

¥The turbo option lets you customize Turbopack to transform different files and change how modules are resolved.

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}

export default nextConfig

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      // ...
    },
  },
}

module.exports = nextConfig

很高兴知道：

¥Good to know:

Turbopack for Next.js 不需要加载程序，也不需要加载程序配置来实现内置功能。Turbopack 内置了对 CSS 和编译现代 JavaScript 的支持，因此如果你使用 @babel/preset-env，则不需要 css-loader、postcss-loader 或 babel-loader。

¥Turbopack for Next.js does not require loaders nor loader configuration for built-in functionality. Turbopack has built-in support for CSS and compiling modern JavaScript, so there's no need for css-loader, postcss-loader, or babel-loader if you're using @babel/preset-env.

参考

¥Reference

选项

¥Options

turbo 配置有以下选项：

¥The following options are available for the turbo configuration:

选项	描述
`rules`	使用 Turbopack 运行时要应用的不受支持的 webpack 加载器列表。
`resolveAlias`	将别名导入映射到模块以加载到其位置。
`resolveExtensions`	导入文件时要解析的扩展列表。
`moduleIdStrategy`	分配模块 ID
`useSwcCss`	对于 Turbopack，使用 `swc_css` 而不是 `lightningcss`
`treeShaking`	为 turbopack 开发服务器启用 tree shake 并进行构建。
`memoryLimit`	turbo 的目标内存限制，以字节为单位。

支持的加载器

¥Supported loaders

以下加载器已经过测试，可以与 Turbopack 的 webpack 加载器实现一起使用：

¥The following loaders have been tested to work with Turbopack's webpack loader implementation:

示例

¥Examples

配置 webpack 加载器

¥Configuring webpack loaders

如果你需要内置之外的加载器支持，许多 webpack 加载器已经可以与 Turbopack 配合使用。目前存在一些限制：

¥If you need loader support beyond what's built in, many webpack loaders already work with Turbopack. There are currently some limitations:

仅实现了 webpack 加载器 API 的核心子集。目前，对于一些流行的加载器已经有足够的覆盖，我们将在未来扩展我们的 API 支持。

¥Only a core subset of the webpack loader API is implemented. Currently, there is enough coverage for some popular loaders, and we'll expand our API support in the future.
仅支持返回 JavaScript 代码的加载器。目前不支持转换样式表或图片等文件的加载器。

¥Only loaders that return JavaScript code are supported. Loaders that transform files like stylesheets or images are not currently supported.
传递给 webpack 加载器的选项必须是纯 JavaScript 原语、对象和数组。例如，无法将 require() 插件模块作为选项值传递。

¥Options passed to webpack loaders must be plain JavaScript primitives, objects, and arrays. For example, it's not possible to pass require() plugin modules as option values.

要配置加载程序，请添加已安装的加载程序的名称以及 next.config.js 中的任何选项，将文件扩展名映射到加载程序列表：

¥To configure loaders, add the names of the loaders you've installed and any options in next.config.js, mapping file extensions to a list of loaders:

module.exports = {
  experimental: {
    turbo: {
      rules: {
        '*.svg': {
          loaders: ['@svgr/webpack'],
          as: '*.js',
        },
      },
    },
  },
}

很高兴知道：在 Next.js 版本 13.4.4 之前，turbo.rules 被命名为 turbo.loaders，并且仅接受 .mdx 等文件扩展名，而不接受 *.mdx。

¥Good to know: Prior to Next.js version 13.4.4, turbo.rules was named turbo.loaders and only accepted file extensions like .mdx instead of *.mdx.

解析别名

¥Resolving aliases

Turbopack 可以配置为通过别名修改模块解析，类似于 webpack 的 resolve.alias 配置。

¥Turbopack can be configured to modify module resolution through aliases, similar to webpack's resolve.alias configuration.

要配置解析别名，请将导入的模式映射到 next.config.js 中的新目标：

¥To configure resolve aliases, map imported patterns to their new destination in next.config.js:

module.exports = {
  experimental: {
    turbo: {
      resolveAlias: {
        underscore: 'lodash',
        mocha: { browser: 'mocha/browser-entry.js' },
      },
    },
  },
}

这会将 underscore 包的导入别名为 lodash 包。换句话说，import underscore from 'underscore' 将加载 lodash 模块而不是 underscore。

¥This aliases imports of the underscore package to the lodash package. In other words, import underscore from 'underscore' will load the lodash module instead of underscore.

Turbopack 还支持通过此字段进行条件别名，类似于 Node.js 的条件导出。目前仅支持 browser 条件。在上述情况下，当 Turbopack 面向浏览器环境时，mocha 模块的导入将被别名为 mocha/browser-entry.js。

¥Turbopack also supports conditional aliasing through this field, similar to Node.js' conditional exports. At the moment only the browser condition is supported. In the case above, imports of the mocha module will be aliased to mocha/browser-entry.js when Turbopack targets browser environments.

解析自定义扩展

¥Resolving custom extensions

Turbopack 可以配置为使用自定义扩展来解析模块，类似于 webpack 的 resolve.extensions 配置。

¥Turbopack can be configured to resolve modules with custom extensions, similar to webpack's resolve.extensions configuration.

要配置解析扩展，请使用 next.config.js 中的 resolveExtensions 字段：

¥To configure resolve extensions, use the resolveExtensions field in next.config.js:

module.exports = {
  experimental: {
    turbo: {
      resolveExtensions: [
        '.mdx',
        '.tsx',
        '.ts',
        '.jsx',
        '.js',
        '.mjs',
        '.json',
      ],
    },
  },
}

这会使用提供的列表覆盖原始解析扩展。确保包含默认扩展名。

¥This overwrites the original resolve extensions with the provided list. Make sure to include the default extensions.

有关如何将应用从 webpack 迁移到 Turbopack 的更多信息和指南，请参阅 Turbopack 有关 webpack 兼容性的文档。

¥For more information and guidance for how to migrate your app to Turbopack from webpack, see Turbopack's documentation on webpack compatibility.

分配模块 ID

¥Assigning module IDs

Turbopack 目前支持两种分配模块 ID 的策略：

¥Turbopack currently supports two strategies for assigning module IDs:

'named' 根据模块的路径和功能分配可读的模块 ID。

¥'named' assigns readable module IDs based on the module's path and functionality.
'deterministic' 分配较小的散列数字模块 ID，这些 ID 在构建之间基本一致，因此有助于长期缓存。

¥'deterministic' assigns small hashed numeric module IDs, which are mostly consistent between builds and therefore help with long-term caching.

如果未设置，Turbopack 将使用 'named' 进行开发构建，使用 'deterministic' 进行生产构建。

¥If not set, Turbopack will use 'named' for development builds and 'deterministic' for production builds.

要配置模块 ID 策略，请使用 next.config.js 中的 moduleIdStrategy 字段：

¥To configure the module IDs strategy, use the moduleIdStrategy field in next.config.js:

module.exports = {
  experimental: {
    turbo: {
      moduleIdStrategy: 'deterministic',
    },
  },
}

版本历史

¥Version History

版本	变化
`13.0.0`	`experimental.turbo` 推出。

参考​

选项​

支持的加载器​

示例​

配置 webpack 加载器​

解析别名​

解析自定义扩展​

分配模块 ID​

版本历史​

参考

选项