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

Question

I've investigated both the Next JS documentation as well as similar questions like Slow page build time in development with Next.js and TypeScript (which is TypeScript specific - this question concerns JavaScript and does not involve compiling TypeScript)

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

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

更多详情：

• npm run dev只需运行next ，下一个大约需要 50 秒才能响应（在compiled successfully后打印。

这意味着像git bisect这样的任务来查找引入错误的位置非常慢，因为 next 在检查每个提交后必须进行整整 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 。

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

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

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

Answer 2

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

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

Answer 3

我基本上面临同样的问题。 就我而言，我刚刚杀死了它正在运行的端口，使用以下命令对其进行清理：

npx kill-port 3000

Answer 4

在我尝试使用 pwa 进行测试后，NextJS 编译速度很慢。 您需要应用程序中的清晰数据来修复它！