turbo

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

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  turbo: {
    // ...
  },
}
 
export default nextConfig

需要了解:

用于 Next.js 的 Turbopack 不需要加载器或加载器配置即可实现内置功能。Turbopack 内置支持 CSS 和编译现代 JavaScript，因此如果您使用 @babel/preset-env，则无需 css-loader、postcss-loader 或 babel-loader。

参考

选项

以下选项可用于 turbo 配置

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

支持的加载器

以下加载器经过测试，可与 Turbopack 的 webpack 加载器实现配合使用

示例

配置 webpack 加载器

next.config.js

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

值得注意的是：在 Next.js 13.4.4 版本之前，turbo.rules 被命名为 turbo.loaders，并且仅接受像 .mdx 这样的文件扩展名，而不是 *.mdx。

解析别名

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

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

next.config.js

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

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

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

解析自定义扩展名

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

要配置解析扩展名，请在 next.config.js 中使用 resolveExtensions 字段。

next.config.js

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

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

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

分配模块 ID

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

'named' 根据模块的路径和功能分配可读的模块 ID。
'deterministic' 分配小的哈希数值模块 ID，这些 ID 在构建之间大部分保持一致，因此有助于长期缓存。

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

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

next.config.js

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

版本历史

版本	更改
`15.0.0-RC`	`turbo` 现在稳定，不再是实验性功能。
`13.0.0`	引入了 `experimental.turbo`。

这有帮助吗？