next.js 构建时间很慢。我怎样才能让它们更快？

Question

我已经调查了Next JS 文档以及类似的问题，例如使用 Next.js 和 TypeScript 开发中的慢页面构建时间（这是 TypeScript 特定的 - 这个问题涉及 JavaScript，不涉及编译 TypeScript）

我正在使用 next.js 10.0.9 并且运行后next，我的应用程序需要大约 50 秒来构建并开始响应 HTTP 请求。

进行更改后，还需要 12 秒才能重建。与其他流行的 JS 框架相比，这似乎要慢得多。

更多详情：

• npm run dev简单地运行next，接下来需要大约 50 秒才能响应（就在compiled successfully打印之后。

这意味着诸如git bisect查找错误引入位置之类的任务非常缓慢，因为在检查每个提交后，接下来必须进行整整 1 分钟的重建。

$ npm run dev

> hl-alpha-frontend@1.0.0 dev /home/mike/Code/myapp/alpha/frontend
> next

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.local
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env.development
info  - Loaded env from /home/mike/Code/myapp/alpha/frontend/.env
warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

info  - Using external babel configuration from /home/mike/Code/myapp/alpha/frontend/babel.config.json
event - compiled successfully
event - build page: /
wait  - compiling...
event - compiled successfully

• 对文件进行小的更改需要大约 12 秒的时间compiling...观察三角形，然后页面才会在compiled successfully.

如何加快 next.js 构建时间？

更新

运行有@next/bundle-analyzer帮助 - 谢谢@juliomalves - 我可以看到我们正在加载所有react-heroicons（index.js图片中最大的部分）~我可以使用更具体的导入轻松修复。~更新- 现在通过代码库完成

老的：

> import * as Icon from "@graywolfai/react-heroicons";

新的：

import { BellOutline } from "@graywolfai/react-heroicons";

这加快了我的构建时间（运行后next，compiling任务完成得更快）。然而，我的捆绑包似乎仍然是相同的大小。

Answer 1

我在 next.js 版本 12.1.5 中遇到了同样的问题。

我的问题是我忘记了服务器npm run dev仍在运行 - 关闭npm run dev并再次运行构建后，构建在近 3 分钟内完成。

Answer 2

这个问题已经有几个月了，但我建议升级 Next.js。

Next.js 的最新版本（11 和 12）在启动时间、热重载和编译方面有很大的性能改进。而且它们往往具有很强的向后兼容性。

版本 11 博客文章：https ://nextjs.org/blog/next-11

第 12 版博客文章：https ://nextjs.org/blog/next-12