Next.js 16.4 今天把 Turbopack Shared Runtime 设成默认——那些每个页面都重复的模块终于只要加载一次

Next.js 16.4 的 canary 分支在 10 月 1 日把 experimental.turbopackSharedRuntime 设为默认。这个改动看起来只是配置文件里多了一行，但如果你维护的是一个中大型 Next.js 应用，改动前后打出来的 bundle 大小和运行时的行为会有看得见的差异。

之前是什么状态

在 Turbopack 之前，Next.js 用 Webpack 作为 bundler，每个页面（Route Segment）打包出来的 bundle 互相独立。如果三个页面都用到了同一个大了三方的 UI 库，这个库的代码在每个页面的 JS 里都会出现一份。Vercel 内部把这个叫「页面级重复」（per-page duplication）。

Next.js 13 引入 App Router 之后，这个问题变得更明显——因为 App Router 鼓励更细粒度的组件拆分，一个页面可能引入十几个共享模块，结果就是加载第一个页面之后，跳转到其他页面时还是要重新下载这些模块的副本。

Turbopack 在 2025 年开始实验性地解决这个问题：Shared Runtime 把跨页面共享的模块抽到一个独立的 chunk 里，所有页面复用同一份。这个机制默认是关掉的（experimental.turbopackSharedRuntime: false），因为在某些场景下会增加初始构建时间。

16.4 改了什么

10 月 1 日的 canary 发版把这个设成了默认值（experimental.turbopackSharedRuntime: true）。也就是说：

// next.config.ts (16.4 之前)
const nextConfig = {
  experimental: {
    // 需要手动开启
    turbopackSharedRuntime: false,
  },
};

// next.config.ts (16.4 之后，不用改配置)
// turbopackSharedRuntime 默认就是 true

这个改动影响的是 Turbopack 的构建输出，不影响 Webpack 构建路径。如果你还在用 Webpack（next build --no-turbopack），这个改动跟你无关。

实际效果是什么样的

根据 Vercel 发布的基准测试（基于 Next.js 自己的仓库），开启 Shared Runtime 之后：

• 跨页面共享的模块（React、Solid 组件库等）只打包进一个 shared chunk
• 用户在页面之间导航时，重复模块不重新下载
• 初始页面加载的 bundle 体积略有增加（约 3-5%），但页面切换的 JS 传输量明显减少

如果你有 10 个页面，其中 8 个页面共用一个表单库和一个数据展示组件，这几个组件的代码之前在每个页面的 bundle 里都有一份，现在变成只下载一次。

怎么验证自己的项目有没有受益

在本地用 Turbopack 构建一次，对比开启前后的 .next/static 目录大小：

# 用 16.4 默认构建
npm run build

# 查看 .next/static/chunks 里的 shared chunk
ls -lh .next/static/chunks/

# 如果看到类似 app-level-*.js 的 shared chunk，说明生效了

在浏览器 Network 面板里，观察首次加载和页面跳转时加载的 JS 文件大小。如果 shared chunk 大小明显比之前单个页面的 bundle 总和小，说明 Shared Runtime 在工作。

下一件该做的事：如果你的 Next.js 项目已经切换到 Turbopack（next dev --turbo），检查一下 package.json 里的 Next.js 版本，16.4 以上的项目会自动开启这个优化。还没切换的可以用 npx next@canary dev --turbo 提前试。