next.js构建时间很慢。我怎样才能让它们更快?
我已经调查了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任务完成得更快)。然而,我的捆绑包似乎仍然是相同的大小。