Turbopack: What's New in Next.js 16.3

Turbopack：Next.js 16.3 新特性 | Next.js

返回博客

2026年6月29日，星期一

Turbopack：Next.js 16.3 新特性

作者：

Andrew Imm

@setimmediate

随着 Next.js 16.3 预览版接近稳定发布，我们正在分享一系列关于新特性的文章。之前的帖子涵盖了新的即时导航功能和最新的 AI 改进。本文将详细介绍 Next.js 中 Turbopack 打包器的最新改进。

在 Next.js 16.3 中，Turbopack 的最新稳定版本专注于编译器性能。许多新功能都围绕着减少 CPU 和内存使用、加快构建速度以及提升运行时体验展开。

• 将开发服务器内存使用量减少高达 90%
• 通过持久化文件系统缓存实现更快的构建
• 实验性 Rust React 编译器支持
• 支持 import.meta.glob API
• 更快的热模块替换（HMR）和开发环境启动速度

开发模式下的内存使用优化

Turbopack 的核心设计专注于增量编译。通过缓存之前的工作成果，它可以避免重新编译未更改的文件。在开发大型 Next.js 应用时，这意味着编译时间与更改内容的大小成正比，而不是与路由大小成正比。

在追求这一设计的过程中，我们做出了一个明确的权衡：通过增加内存中的缓存结果来减少 CPU 使用。然而，自 Turbopack 首次发布以来，内存使用一直是一个关键问题。代码代理、IDE、类型检查器和代码检查器都在开发时运行，每个都会占用大量系统内存。在过去三个月中，Turbopack 团队致力于减少其对系统内存压力的贡献。升级到 16.3 后，开发者在长时间的开发会话中应立即看到内存使用量的减少。

编译 50 个路由后的内存使用情况

vercel.com（仪表板）

~90% 更小

之前

21.5 GB

之后

2 GB

nextjs.org

~82% 更小

4,600 MB

840 MB

这些改进很大程度上是通过小幅度的持续优化实现的：压缩数据结构并避免不必要的数据存储。但最大的改进来自于一种新能力，即能够清除大量内存缓存。利用在 Next.js 16.1 中首次引入的文件系统持久化功能，Turbopack 现在可以从内存中移除缓存结果。这避免了开发会话中内存无限制增长，因为内存缓存不再保留所有访问过的路由。

内存清除功能需要启用开发文件系统缓存。在 16.3 中，这两个选项默认都已启用。当调查缓存或开发性能时，可以通过实验性配置项 turbopackMemoryEviction 禁用该功能：

const
nextConfig
=
{
experimental
:
{
turbopackMemoryEviction
:
false
,
// 禁用内存清除，默认值为 'full'
}
,
};

没有一个统一的内存减少百分比适用于所有应用。具体结果取决于路由图的大小、开发会话中访问的路由比例以及会话的持续时间。

通过持久化磁盘缓存，构建过程可以复用之前计算的结果，从而减少静态资源编译所需的时间。CI环境可以利用这一特性，通过将一次运行生成的.next目录复制到下一次运行中。当Turbopack在构建开始时检测到缓存，它会在编译任何新更改之前先从磁盘读取缓存条目。

可以通过turbopackFileSystemCacheForBuild配置标志启用构建的持久化缓存。

const nextConfig = {
  experimental: {
    // 为`next build`启用文件系统缓存
    turbopackFileSystemCacheForBuild: true,
  },
}

实验性Rust React编译器

自16.0版本发布以来，Next.js已经提供了稳定的React编译器支持。此前，React编译器仅作为Babel转换存在。在大型应用中，我们观察到在等待JavaScript执行资源时，这可能会减慢构建速度。最近，React团队发布了该编译器的原生Rust移植版本，我们迅速将其集成到Turbopack中。

针对大型React应用（如v0）的初步测试显示，编译速度提升了20-50%，因此我们作为实验性功能发布了原生编译器集成，以推动更多采用。

要测试Rust React编译器，请启用编译器并使用实验性turbopackRustReactCompiler标志来使用原生版本：

const nextConfig = {
  // 启用编译器
  reactCompiler: true,
  experimental: {
    // 使用Rust版本，而不是原始的Babel版本
    turbopackRustReactCompiler: true,
  },
}

配置React编译器以支持可选功能等特性有多种方式。你可以阅读完整文档获取更多细节。

import.meta.glob

Turbopack现在支持与Vite兼容的import.meta.glob API：

const posts = import.meta.glob('./posts/*.mdx');

该API可以导入所有匹配此模式的模块，而无需硬编码它们的名称。结果是一个以匹配文件路径为键的对象。默认情况下，每个值都是一个异步函数，用于加载模块：

for (const path in posts) {
  const post = await posts[path]();
}

使用eager: true可以立即导入每个匹配项：

const posts = import.meta.glob('./posts/*.mdx', {
  eager: true,
});

该实现还支持命名导入、多个模式、负向模式、自定义搜索路径、加载器的查询字符串以及生成的TypeScript类型。

此功能由Turbopack的文件监视器提供支持。当文件被添加到或从该匹配集移除时，它将在开发模式下触发重新编译，因此您的网站始终反映最新的更改。此API非常适合获取相似文档的集合，如产品描述或博客文章。我们还预计，库开发人员将在更广泛的JavaScript生态系统中受益于此API的存在。

import.meta.glob作为Turbopack功能提供，不适用于使用--webpack选项构建的Next.js应用。

有关所有可用选项的详细信息，请参阅import.meta.glob参考文档。

HMR改进

通过在Vercel对Turbopack在大型Next.js应用中的性能分析，我们发现了一些可以惠及所有Turbopack用户的性能优化机会。这些研究的核心集中在提升HMR订阅的效率上。一项重要改进优化了页面加载块的追踪机制。通过将多个订阅合并为单一订阅，我们成功将复杂应用的开发服务器冷启动时间减少了超过15%。

这只是我们HMR资源研究的开始，未来Next.js版本将带来更多的内存优化和冷启动改进。

更小的运行时体积

Turbopack会向每个路由发送运行时代码，用于解析模块和动态获取新块。这还包括加载WebAssembly、workers和顶级异步模块的代码。但并非所有Next.js应用都会使用这些功能。现在Turbopack仅在需要时才会发送这些功能，其余时间避免传输额外的运行时代码。

本地PostCSS配置

多仓库项目可能需要为不同包使用不同的PostCSS转换。

实验性选项turbopackLocalPostcssConfig让Turbopack能够优先解析每个CSS文件附近的配置，而不是直接使用项目根目录的配置：

next.config.ts

const nextConfig = {
  experimental: {
    turbopackLocalPostcssConfig: true,
  },
};

这使得包级CSS可以使用本地配置，而应用级CSS仍可继续使用根配置。

兼容性与可靠性

Next.js 16.3整合了16.2补丁版本的所有修复，并在模块解析、追踪和HMR方面新增了多项改进，包括：

• Windows系统上import.meta.url的正确文件URL
• 块获取失败时的重试机制
• 对createRequire(new URL(..., import.meta.url))更好的支持
• worker_threads的URL解析修正
• 对module-sync导出条件的支持
• webpack加载器崩溃时的更清晰错误提示
• Safari中CSS HMR的修复