本地开发

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

本地开发与生产环境对比

使用 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 的信息。请参阅我们的升级指南和 codemods 以获取更多信息。

3. 检查您的导入

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

图标库

像 @material-ui/icons 或 react-icons 这样的库可能会导入数千个图标，即使您只使用其中的几个。尝试仅导入您需要的图标

// Instead of this:
import { Icon1, Icon2 } from 'react-icons/md'
 
// Do this:
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

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

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

pi (Phosphor Icons)
md (Material Design Icons)
tb (tabler-icons)
cg (cssgg)

它们加起来将有数万个模块，即使您仅从每个模块导入一个，编译器也必须处理这些模块。

Barrel 文件

“Barrel 文件”是指从其他文件导出许多项的文件。它们会减慢构建速度，因为编译器必须解析它们，以通过使用导入来查找模块范围中是否存在副作用。

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

优化包导入

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

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

4. 检查您的 Tailwind CSS 设置

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

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

Tailwind CSS 3.4.8 或更新版本将警告您有关可能减慢构建速度的设置。

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

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // Good
    // This might be too broad
    // It will match `packages/**/node_modules` too
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

避免扫描不必要的文件

module.exports = {
  content: [
    // Better - only scans the 'src' folder
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

5. 检查自定义 webpack 设置

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

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

6. 优化内存使用

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

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

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

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

实验性的 serverComponentsHmrCache 选项允许您在本地开发中跨热模块替换 (HMR) 刷新缓存服务器组件中的 fetch 响应。这可以加快响应速度并降低计费 API 调用的成本。

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

查找问题的工具

详细的 fetch 日志记录

使用此命令可以查看有关开发期间发生情况的更详细信息

next dev --verbose

仍然有问题？

如果您已尝试所有方法但仍然有问题

创建一个显示问题的简化版本应用程序。
生成一个特殊文件，显示正在发生的事情
```
NEXT_CPU_PROF=1 npm run dev
```
在 GitHub 上以新 issue 的形式分享此文件（在您的项目主文件夹中找到）和 .next/trace 文件。