如何激活 Turbo 模式以获得极快的 Next.js 13 性能

Next.js 13 带有一个新的构建工具：Turbopack。Turbopack 是 Webpack 的继任者，它是用 Rust 构建的，具有极快的构建性能。目前，Next.js 13 的 Turbopack 集成处于 Alpha 模式。在下面的文章中，您将了解如何激活 Turbopack 并显着加快 Next.js 开发服务器的速度。

到目前为止，在 Next.js 中用作标准的构建和捆绑工具是 Webpack。Webpack 是一种基于 JavaScript 的工具，它是 Web 应用程序优化和交付给客户端方式的重大变化。如何安全地执行 Windows Installer 文件夹清理Webpack 根据它在站点中的使用方式分离 Web 应用程序的代码，构建相应的包并优化提供给客户端的代码块。

但是，由于 Webpack 是使用 JavaScript 构建的，因此在最大化构建过程的性能优化方面受到限制。这就是为什么 Next.js 正在切换到使用 Rust 构建的 Turbopack，从而可以显着加快构建过程。根据 Vercel (https://nextjs.org/blog/next-13#introducing-turbopack-alpha) 提供的声明，当使用 Next.js 13 切换到 Turbopack 构建模式时，预计会有以下改进：

• 更新速度比 Webpack 快 700 倍

• 更新速度比 Vite 快 10 倍

• 比 Webpack 快 4 倍的冷启动

Turbopack 确保只提供包含最少资产集的捆绑包。这导致开发模式下的超快启动时间。

“在具有 3,000 个模块的应用程序中，Turbopack 需要 1.8 秒才能启动。Vite 需要 11.4 秒，Webpack 需要 16.5 秒。”

创建 Next.js 13 项目

如果您想使用 Next.js 13 测试 Turbopack，您首先需要设置一个新的 Next.js 13 项目。在命令行中输入：

$ npx create-next-app@latest

然后您会在命令行上收到一些问题。您可以在此处指定项目设置的详细信息。此外，系统会要求您输入项目名称，例如 next13turbo：

成功创建项目后，您应该能够看到成功消息。接下来进入新建的项目目录：

$ cd next13turbo

项目目录应包含以下项目结构：

使用 Turbopack 启动开发 Web 服务器

Next.js 13 中的 Turbopack 支持目前仅支持 Web 服务器的开发模式。为了激活 Turbopack，我们需要打开 package.json 并添加选项

-- turbo

到“脚本”部分中的“开发”命令：

  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

接下来输入以下命令启动开发 Web 服务器：

$ npm run dev

在命令行上，您现在可以看到服务器正在使用 Turbopack 而不是 Webpack 启动：

您现在可以更新 Next.js 应用程序的每个部分（例如 app/page.js）并立即看到开发服务器更新网站：