On This Page

在 GitHub 上编辑本页
  • Pack
  • 文档
  • 性能测试

性能测试

我们创建了一个测试生成器，用于生成各种不同模块数的应用来测试冷启动和文件更新性能。生成的应用包含为以下工具提供的构建入口：

  • Next.js 11
  • Next.js 12
  • 带 Turbopack 的 Next.js 13
  • Vite

谢尔宾斯基三角形 就目前的技术而言，我们将引入 Vite 和基于 Webpack 的 Next.js 进行测试。所有这些工具都将生成相同的组件树，用于在浏览器组装一个谢尔宾斯基三角形三角形，这里面的每一个三角形都是单独的一个模块。

此截图是我们用于性能测试的所运行的应用，它代表着每个三角形都是一个组件分布于单独的文件。在这个例子中，屏幕上渲染了 3,000 个三角形。

指标

我们来拆解分析下各指标的意义，以及它们是如何影响你日常开发体验。

如果你对这些性能测试感到疑问，或想要自己执行测试，你可阅读。基于 Turbo 的性能测试套件文档。

冷启动时间

这项指标用于测量本地开发服务器启动各种规模应用的速度。这项指标根据启动时（不带缓存）至浏览器渲染应用的时间进行测算，这里不包括应用可交互或注水（hydrated）时机。

Next.js 13

turbo

Turbopack

1.1s

Next.js 12

3.4s

Vite

4.8s

Next.js 11

7.7s

React 组件数
不同模块数的启动时间。测试数据在 14” MacBook Pro 2021, M1 Max, 64GB RAM, macOS 12.6 (21G115) 上生成。

测试数据

若要自行执行性能测试，请克隆 vercel/turbo 仓库并在其根目录执行以下命令：

TURBOPACK_BENCH_COUNTS=1000,5000,10000,30000 TURBOPACK_BENCH_BUNDLERS=all cargo bench -p next-dev "startup/(Turbopack SSR|Next.js 12 SSR|Next.js 11 SSR|Vite CSR)."

以下测试数据在 14” MacBook Pro 2021, M1 Max, 64GB RAM, macOS 12.6 (21G115) 上生成：

bench_startup/Next.js 11 SSR/1000 modules              7.7±0.06s
bench_startup/Next.js 11 SSR/5000 modules             24.8±0.11s
bench_startup/Next.js 11 SSR/10000 modules            49.4±0.28s
bench_startup/Next.js 11 SSR/30000 modules           176.2±1.42s
bench_startup/Next.js 12 SSR/1000 modules              3.4±0.01s
bench_startup/Next.js 12 SSR/5000 modules             10.7±0.02s
bench_startup/Next.js 12 SSR/10000 modules            20.1±0.07s
bench_startup/Next.js 12 SSR/30000 modules            76.6±0.66s
bench_startup/Turbopack SSR/1000 modules          1125.3±44.54ms
bench_startup/Turbopack SSR/5000 modules               3.6±0.02s
bench_startup/Turbopack SSR/10000 modules              7.5±0.44s
bench_startup/Turbopack SSR/30000 modules             22.3±1.29s
bench_startup/Vite CSR/1000 modules                    4.8±0.02s
bench_startup/Vite CSR/5000 modules                   19.2±0.15s
bench_startup/Vite CSR/10000 modules                  37.2±0.29s
bench_startup/Vite CSR/30000 modules                 109.5±1.14s

文件更新 (HMR)

我们还测量了开发服务器能够以多快的速度，在文件更新时将更新事件发送至浏览器并执行。

请注意，执行更新后的代码并不意味着用户就可以看到其变化。当 React 组件发生更新，它仍然需要由浏览器重新渲染。在这种方法中，我们 仅 测量编译器所花费的时间。

针对热模块重载（HMR）的性能测试，我们首先在一个新安装的测试应用启动开发服务器，然后执行五次文件更新来预热构建工具。这一步很重要，因为它可以避免在冷启动阶段所造成的差异。

工具预热完成后，我们将测量第六次文件更新的时间，在重复十次之后，取平均值作为指标。

Next.js 13

turbo

Turbopack

15ms

Vite

87ms

Next.js 12

134ms

Next.js 11

273ms

React 组件数
根据模块数测试 Turbopack、Next.js (Webpack)、Vite HMR。测试数据在 14” MacBook Pro 2021, M1 Max, 64GB RAM, macOS 12.6 (21G115) 上生成。
根据模块数测试 Turbopack 与 Vite HMR。测试数据在 14” MacBook Pro 2021, M1 Max, 64GB RAM, macOS 12.6 (21G115) 上生成。

根据性能测试，我们发现：

  • Turbopack HMR 在应用模块数达到 30,000 时比 Vite 快 10 倍。随着模块数的增加性能提升越为显著，在模块数达到 50,000 时能够快出 20 倍。
  • Turbopack HMR 比基于 Webpack 的 Next.js 11 快 700 倍，对于模块数超过 50,000 的应用。

要点：Turbopack 的性能取决于 单次更新大小，而不是应用体积。

我们雀跃于 Turbopack 的性能，我们也期望在未来能够为中小型应用带来更多的性能提升。若要获取更多相关信息，请访问性能对比文档 Vite 和 Webpack。

测试测试

若要自行执行性能测试，请克隆 vercel/turbo 仓库并在其根目录执行以下命令：

TURBOPACK_BENCH_COUNTS=10,100,200,500,1000,2000,3000,4000,5000,10000,20000,30000,50000 TURBOPACK_BENCH_BUNDLERS=all cargo bench -p next-dev "hmr_to_eval/(Turbopack SSR|Next.js 12 SSR|Next.js 11 SSR|Vite CSR)"

以下测试数据在 14” MacBook Pro 2021, M1 Max, 64GB RAM, macOS 12.6 (21G115) 上生成：

bench_hmr_to_eval/Next.js 11 SSR/10 modules         77.9±21.03ms
bench_hmr_to_eval/Next.js 11 SSR/100 modules        100.5±2.04ms
bench_hmr_to_eval/Next.js 11 SSR/200 modules         98.7±4.48ms
bench_hmr_to_eval/Next.js 11 SSR/500 modules       140.0±14.06ms
bench_hmr_to_eval/Next.js 11 SSR/1000 modules      273.2±17.11ms
bench_hmr_to_eval/Next.js 11 SSR/2000 modules      404.0±24.81ms
bench_hmr_to_eval/Next.js 11 SSR/3000 modules      498.3±22.10ms
bench_hmr_to_eval/Next.js 11 SSR/4000 modules      698.8±54.46ms
bench_hmr_to_eval/Next.js 11 SSR/5000 modules      849.7±14.64ms
bench_hmr_to_eval/Next.js 11 SSR/10000 modules    1713.9±32.96ms
bench_hmr_to_eval/Next.js 11 SSR/20000 modules         5.0±0.12s
bench_hmr_to_eval/Next.js 11 SSR/30000 modules         6.9±1.75s
bench_hmr_to_eval/Next.js 11 SSR/50000 modules        11.6±0.50s
bench_hmr_to_eval/Next.js 12 SSR/10 modules          50.2±5.68ms
bench_hmr_to_eval/Next.js 12 SSR/100 modules         45.7±2.99ms
bench_hmr_to_eval/Next.js 12 SSR/200 modules         50.6±8.27ms
bench_hmr_to_eval/Next.js 12 SSR/500 modules        93.9±19.93ms
bench_hmr_to_eval/Next.js 12 SSR/1000 modules      133.9±12.69ms
bench_hmr_to_eval/Next.js 12 SSR/2000 modules      147.4±24.38ms
bench_hmr_to_eval/Next.js 12 SSR/3000 modules      210.7±33.00ms
bench_hmr_to_eval/Next.js 12 SSR/4000 modules      295.0±21.65ms
bench_hmr_to_eval/Next.js 12 SSR/5000 modules      386.2±84.54ms
bench_hmr_to_eval/Next.js 12 SSR/10000 modules    1067.1±133.67ms
bench_hmr_to_eval/Next.js 12 SSR/20000 modules         2.8±0.09s
bench_hmr_to_eval/Next.js 12 SSR/30000 modules         5.4±0.50s
bench_hmr_to_eval/Next.js 12 SSR/50000 modules         8.5±0.32s
bench_hmr_to_eval/Turbopack SSR/10 modules           13.3±0.49ms
bench_hmr_to_eval/Turbopack SSR/100 modules          13.8±1.10ms
bench_hmr_to_eval/Turbopack SSR/200 modules          14.5±2.18ms
bench_hmr_to_eval/Turbopack SSR/500 modules          14.3±1.63ms
bench_hmr_to_eval/Turbopack SSR/1000 modules         15.3±0.27ms
bench_hmr_to_eval/Turbopack SSR/2000 modules         14.1±0.14ms
bench_hmr_to_eval/Turbopack SSR/3000 modules         15.1±0.37ms
bench_hmr_to_eval/Turbopack SSR/4000 modules         16.0±0.31ms
bench_hmr_to_eval/Turbopack SSR/5000 modules         16.5±0.41ms
bench_hmr_to_eval/Turbopack SSR/10000 modules        14.9±1.35ms
bench_hmr_to_eval/Turbopack SSR/20000 modules        15.3±1.52ms
bench_hmr_to_eval/Turbopack SSR/30000 modules        15.1±1.03ms
bench_hmr_to_eval/Turbopack SSR/50000 modules        16.7±3.73ms
bench_hmr_to_eval/Vite CSR/10 modules                94.8±5.24ms
bench_hmr_to_eval/Vite CSR/100 modules              102.4±2.32ms
bench_hmr_to_eval/Vite CSR/200 modules              101.7±2.39ms
bench_hmr_to_eval/Vite CSR/500 modules              100.1±4.24ms
bench_hmr_to_eval/Vite CSR/1000 modules              86.5±9.13ms
bench_hmr_to_eval/Vite CSR/2000 modules             111.6±3.76ms
bench_hmr_to_eval/Vite CSR/3000 modules             105.0±2.51ms
bench_hmr_to_eval/Vite CSR/4000 modules             99.0±12.26ms
bench_hmr_to_eval/Vite CSR/5000 modules             92.5±22.77ms
bench_hmr_to_eval/Vite CSR/10000 modules           110.4±32.82ms
bench_hmr_to_eval/Vite CSR/20000 modules           204.4±61.72ms
bench_hmr_to_eval/Vite CSR/30000 modules           256.2±67.72ms
bench_hmr_to_eval/Vite CSR/50000 modules          509.8±137.92ms

若对性能测试有其它疑问，请在 GitHub 创建 issue。

Turbopack vs. Webpack从 Webpack 移植