跳到主要内容

如何优化本地开发环境

Next.js 旨在提供出色的开发体验。随着应用程序的增长，您可能会注意到本地开发期间编译时间变慢。本指南将帮助您识别和修复常见的编译时性能问题。

本地开发 vs 生产环境​

使用 next dev 的开发过程与 next build 和 next start 不同。

next dev 在您打开或导航到应用程序中的路由时编译它们。这使您能够启动开发服务器而无需等待应用程序中的每个路由编译，这既更快又使用更少的内存。运行生产构建会应用其他优化，如压缩文件和创建内容哈希，这些在本地开发中不需要。

提高本地开发性能​

1. 检查您计算机的防病毒软件​

防病毒软件可能会减慢文件访问速度。

尝试将您的项目文件夹添加到防病毒排除列表中。虽然这在 Windows 机器上更常见，但我们建议任何安装了防病毒工具的系统都这样做。

2. 更新 Next.js 并启用 Turbopack​

确保您使用的是最新版本的 Next.js。每个新版本通常都包含性能改进。

Turbopack 是集成到 Next.js 中的新打包工具，可以提高本地性能。

npm install next@latest
npm run dev --turbopack

了解更多关于 Turbopack 的信息。查看我们的升级指南和代码修改工具以获取更多信息。

3. 检查您的导入​

您导入代码的方式会极大地影响编译和打包时间。了解更多关于优化包打包的信息，并探索 Dependency Cruiser 或 Madge 等工具。

图标库​

像 @material-ui/icons、@phosphor-icons/react 或 react-icons 这样的库可以导入数千个图标，即使您只使用几个。尝试只导入您需要的图标：

// 而不是这样：
import { TriangleIcon } from '@phosphor-icons/react'

// 这样做：
import { TriangleIcon } from '@phosphor-icons/react/dist/csr/Triangle'

您通常可以在您使用的图标库的文档中找到要使用的导入模式。此示例遵循 @phosphor-icons/react 的建议。

像 react-icons 这样的库包含许多不同的图标集。选择一个集合并坚持使用该集合。

例如，如果您的应用程序使用 react-icons 并导入所有这些：

  • pi（Phosphor Icons）
  • md（Material Design Icons）
  • tb（tabler-icons）
  • cg（cssgg）

即使您只从每个集合中导入一个图标，组合起来也将是编译器必须处理的数万个模块。

桶文件​

"桶文件"是从其他文件导出许多项目的文件。它们可能会减慢构建速度，因为编译器必须解析它们以查找模块范围内是否有副作用。

尽可能尝试直接从特定文件导入。了解更多关于桶文件的信息以及 Next.js 中的内置优化。

优化包导入​

Next.js 可以自动优化某些包的导入。如果您使用利用桶文件的包，请将它们添加到您的 next.config.js 中：

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopack 自动分析导入并优化它们。它不需要此配置。

4. 检查您的 Tailwind CSS 设置​

如果您使用 Tailwind CSS，请确保它设置正确。

一个常见的错误是以包含 node_modules 或其他不应扫描的大文件目录的方式配置您的 content 数组。

Tailwind CSS 3.4.8 或更新版本会警告您可能减慢构建的设置。

  1. 在您的 tailwind.config.js 中，明确指定要扫描的文件：

    module.exports = {
      content: [
        './src/**/*.{js,ts,jsx,tsx}', // 好
        // 这可能太宽泛
        // 它也会匹配 `packages/**/node_modules`
        // '../../packages/**/*.{js,ts,jsx,tsx}',
      ],
    }

  2. 避免扫描不必要的文件：

    module.exports = {
      content: [
        // 更好 - 只扫描 'src' 文件夹
        '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
      ],
    }

5. 检查自定义 webpack 设置​

如果您添加了自定义 webpack 设置，它们可能会减慢编译速度。

考虑您是否真的需要它们进行本地开发。您可以选择仅在生产构建中包含某些工具，或探索迁移到 Turbopack 并使用加载器。

6. 优化内存使用​

如果您的应用程序非常大，它可能需要更多内存。

了解更多关于优化内存使用的信息。

7. 服务器组件和数据获取​

对服务器组件的更改会导致整个页面在本地重新渲染以显示新更改，这包括为组件获取新数据。

实验性 serverComponentsHmrCache 选项允许您在本地开发中的热模块替换（HMR）刷新期间缓存服务器组件中的 fetch 响应。这导致更快的响应和减少计费 API 调用的成本。

了解更多关于实验性选项的信息。

8. 考虑本地开发而不是 Docker​

如果您在 Mac 或 Windows 上使用 Docker 进行开发，您可能会体验到比本地运行 Next.js 慢得多的性能。

Docker 在 Mac 和 Windows 上的文件系统访问可能导致热模块替换（HMR）需要几秒钟甚至几分钟，而同一应用程序在本地开发时具有快速 HMR。

这种性能差异是由于 Docker 在 Linux 环境之外处理文件系统操作的方式。为了获得最佳开发体验：

  • 在开发期间使用本地开发（npm run dev 或 pnpm dev）而不是 Docker
  • 将 Docker 保留用于生产部署和测试生产构建
  • 如果您必须使用 Docker 进行开发，请考虑在 Linux 机器或 VM 上使用 Docker

了解更多关于 Docker 部署的信息用于生产用途。

查找问题的工具​

详细的 fetch 日志记录​

在您的 next.config.js 文件中使用 logging.fetches 选项，以查看开发期间发生的情况的更详细信息：

module.exports = {
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
}

了解更多关于 fetch 日志记录的信息。

Turbopack 跟踪​

Turbopack 跟踪是一个工具，可以帮助您了解应用程序在本地开发期间的性能。 它提供有关每个模块编译所需时间以及它们如何相关的详细信息。

  1. 确保您已安装最新版本的 Next.js。

  2. 生成 Turbopack 跟踪文件：

    NEXT_TURBOPACK_TRACING=1 npm run dev

  3. 在您的应用程序中导航或编辑文件以重现问题。

  4. 停止 Next.js 开发服务器。

  5. 一个名为 trace-turbopack 的文件将在 .next 文件夹中可用。

  6. 您可以使用 next internal trace [path-to-file] 解释文件：

    next internal trace .next/trace-turbopack

    在 trace 不可用的版本中，命令名为 turbo-trace-server：

    next internal turbo-trace-server .next/trace-turbopack

  7. 一旦跟踪服务器运行，您可以在 https://trace.nextjs.org/ 查看跟踪。

  8. 默认情况下，跟踪查看器将聚合时间，为了查看每个单独的时间，您可以在查看器右上角从"按顺序聚合"切换到"按顺序跨度"。

仍然有问题？​

分享在 Turbopack 跟踪 部分生成的跟踪文件，并在 GitHub Discussions 或 Discord 上分享。

最后于 更新