Compilation time extremely slow (Next > 12.0.9)

[R1ZEN]

trafficstars

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 20.6.0: Tue Feb 22 21:10:42 PST 2022; root:xnu-7195.141.26~1/RELEASE_ARM64_T8101
Binaries:
  Node: 16.14.2
  npm: 8.5.0
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.2.3-canary.4
  eslint-config-next: 11.1.3-canary.7
  react: 17.0.2
  react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

After updating the next package from version 12.0.9 to 12.2.0 and above, the next dev compilation time extremely slow. I tried to use compilation with SWC and with babel, the result is the same.

nextjs 12.0.9: compiled client and server successfully in 3.4s (577 modules) trace: https://gist.github.com/R1ZEN/2d032dba11947ac3b48ecfe9a4e1008d

nextjs 12.2.0: compiled client and server successfully in 46.8s (667 modules) trace: https://gist.github.com/R1ZEN/36445c707eb0e50a58cccd05af2ac19f

Expected Behavior

Compilation time would be the same or faster

Link to reproduction

I don't have a reproduction that I can share at the moment

To Reproduce

I don't have a reproduction that I can share at the moment, but might have some time to come up with one.

[balazsorban44]

I've looked at the trace files (thanks) and could not immediately see the cause of the issue. One idea is that you have a custom webpack configuration that might play a role (if that's the case, keep in mind that modifying the webpack config is not covered by semver, hence the unexpected results). Could you attach your next.config.js or invite me to the private repo so I can investigate further?

[R1ZEN]

@balazsorban44, I created a repo with the same next.config.js , package.json, babel.confing.js, tsconfig.json as in my project: https://github.com/R1ZEN/next-compilation-issue

[balazsorban44]

Thanks. I tried your reproduction locally. The repo had version 12.1.6, but I tested (using SWC) with both canary and 12.0.9 for completeness:

12.0.9: 13.17s 12.1.6: 13.81s canary: 12.38s

So I cannot reproduce the significant decrease that is described. Being able to look at the actual repository might be more useful.

As pointed out though, based on the reproduction there are some modifications to the webpack config either directly or through plugins, so a good starting point would be to rip out everything and slowly adding them back, see if any of the modifications make a difference.

[R1ZEN]

@balazsorban44 thanks. I run building the project on Archlinux and Ubuntu, the compilation time on 12.2.0 is the same as 12.0.9. It seems the problem is in macOS. Perhaps this will be useful information)

[balazsorban44]

I cannot check on macOS right now, but let me know if the suggested debugging method helps, so we can at least confirm if the issue comes from one of the extensions in next.config.js.

[R1ZEN]

Used next.config.js without plugins and webpack decoration, the compilation result was also slow.

[R1ZEN]

@balazsorban44, I added you to a repo where the issue is consistently reproduced.

[R1ZEN]

@balazsorban44 any updates on this issue?

[sebastienbarre]

I noticed the exact same thing running dev now. I upgraded from 12.1.5 to 12.2.5, I now see two " compiled client and server successfully", the second one much MUCH slower than the first -- we are talking more than x50 to x100 times slower, almost 2 minutes, my build takes only about 7 seconds in comparison.

@balazsorban44 This is also on MacOS. More specifically, MacOS 12.3.1 (Monterey) with a MacBook Pro (16-inch, 2021) M1 Max.

Essentially the exact same thing as reported in Why does it compile twice? (second time always much slower) · Discussion #39901 · vercel/next.js

event - compiled client and server successfully in 241 ms (193 modules)
wait  - compiling...
event - compiled client and server successfully in 113s (193 modules)

UPDATE: I downgraded and locked to 12.2.4 and this slowdown is gone, so this "issue" seems to have been introduced in 12.2.5

[sebastienbarre]

I just tested v12.3.0 and sadly, this is even worse now, because running dev no longer shows the huge (almost 2 minutes for me) pause between events, but it's very much still there. For reference, running build takes about 8 seconds.

event - compiled client and server successfully in 1286 ms (194 modules)
> Ready on http://localhost:3000

The huge pause occurs (for me) in between these 2 lines above. There is no longer a second Event - compiled client and server successfully in 113s which was actually timing the big slowdown (see my comment above). So essentially I am left dangling without any feedback for about 1 or 2 minutes.

[sebastienbarre]

The issue has been identified by a user and linked to a recent PR, see my comment here. Feel free to share your experience as well. Hopefully the Next.js people can provide a workaround.

[timkindberg]

Seeing this as well after updating to 12.2.5.

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:41 PST 2021; root:xnu-8019.61.5~1/RELEASE_ARM64_T6000
Binaries:
  Node: 14.18.3
  npm: 6.14.15
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.2.5
  eslint-config-next: 11.0.1
  react: 17.0.2
  react-dom: 17.0.2

MacOS 12.1 - M1

[ijjk]

@timkindberg could you try v12.3.1-canary.1 of Next.js and see if the issue is alleviated there?

[sebastienbarre]

@ijjk Thanks, this is solving the issue for me

[R1ZEN]

For me, the issue is reproduced in v12.3.1-canary.1, compilation time is also slow

[timkindberg]

@ijjk canary.1 seemed to solve it for me but I rolled back to 12.2.4 instead.

[R1ZEN]

I found out that in my case, the problem was in tailwind v3. Directives used in css files slowed down the build. I solved the problem by replacing the glob in tailwind.config.js for content field ['./{pages,features,components}/**/*.{ts,tsx}'] to an array of globs ['pages/**/*.{ts,tsx}', 'components/**/*.{ts,tsx}', 'features/**/*.{ts,tsx}'] and the compilation time became fast as it was.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.