[英]next.js build times are slow. How can I make them faster?
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)
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)
I am using next.js 10.0.9 and after running next
, my app takes around 50 seconds to build and begin responding to HTTP requests.我正在使用 next.js 10.0.9 运行
next
后,我的应用程序需要大约 50 秒来构建并开始响应 HTTP 请求。
After making a change, it takes another 12 seconds to rebuild.进行更改后,需要另外 12 秒才能重建。 This seems much slower compared to other popular JS frameworks.
与其他流行的 JS 框架相比,这似乎要慢得多。
More detail:更多详情:
npm run dev
simply runs next
and next takes around 50 seconds to become responsive (just after the compiled successfully
is printed. npm run dev
只需运行next
,下一个大约需要 50 秒才能响应(在compiled successfully
后打印。 This means tasks like git bisect
to find where a bug was introduced are very slow, as next has to do a full 1 minute rebuild after checking out each commit.这意味着像
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
compiling...
watching the triangle before the page becomes responsive at compiled successfully
.compiling...
在页面变为响应之前观察三角形已compiled successfully
。 How can I speed up next.js build times?如何加快 next.js 构建时间?
Running @next/bundle-analyzer
helped - thanks @juliomalves - I can see we're loading all of react-heroicons
(that's the big index.js
in the picture) which ~I can easily fix with more specific imports.~ Update - this is now done though out the codebase运行
@next/bundle-analyzer
帮助 - 感谢 @juliomalves - 我可以看到我们正在加载所有react-heroicons
(这是图片中的大index.js
)~我可以通过更具体的导入轻松修复。~更新-现在已经在代码库中完成了
Old:老的:
> import * as Icon from "@graywolfai/react-heroicons";
New:新的:
import { BellOutline } from "@graywolfai/react-heroicons";
This has speed up my build times (after running next
, the compiling
task finishes faster).这加快了我的构建时间(运行
next
后, compiling
任务完成得更快)。 However my bundles still seem to be the same size.然而,我的捆绑包似乎仍然是相同的大小。
This question is a few months old, but I'd recommend upgrading Next.js .这个问题已经有几个月了,但我建议升级 Next.js 。
The most recent versions of Next.js (11, and 12) have large performance improvements to start-up time, hot reloading, and compilation.最新版本的 Next.js(11 和 12)在启动时间、热重载和编译方面有很大的性能改进。 And they tend to be very backward-compatible.
而且它们往往非常向后兼容。
Version 11 blog post: https://nextjs.org/blog/next-11版本 11 博客文章: https://nextjs.org/blog/next-11
Version 12 blog post: https://nextjs.org/blog/next-12版本 12 博客文章: https://nextjs.org/blog/next-12
I've faced the same issue with next.js version 12.1.5.我在 next.js 版本 12.1.5 中遇到了同样的问题。
My problem was that I was forgetting the server npm run dev
was still running - after closing npm run dev
and running the build again the build completed in almost 3 minutes.我的问题是我忘记了服务器
npm run dev
仍在运行 - 关闭npm run dev
并再次运行构建后,构建在近 3 分钟内完成。
I faced the same issue basically.我基本上面临同样的问题。 In my case I just killed the port which it was running, to clean it up by using this command:
就我而言,我刚刚杀死了它正在运行的端口,使用以下命令对其进行清理:
npx kill-port 3000
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.