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 編譯速度很慢。 您需要應用程序中的清晰數據來修復它！