javascript - 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...在页面响应前观察三 Angular 形 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