Slow page build time in development with Next.js 5.0 (compared to Next.js 4.2.3)

[iaincollins]

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Using previous releases of Next.js build time for pages in development mode as been more or less instant (taking at most a second or two to build a page for the first time, with changes being hot reloaded instantly).

Current Behavior

When using Next.js 5.0 build times for pages in development mode are much slower, often taking several (e.g. 5-10) seconds both for initial page build and for a change to be hot reloaded.

I am seeing this same issue across multiple codebases, and someone has raised it as a performance issue against nextjs-starter project, which recently upgraded to 5.0: iaincollins/nextjs-starter#67

Steps to Reproduce

1. Clone example project 'https://github.com/iaincollins/nextjs-starter' and start with npm run dev.
2. Observe performance building pages with Next.js 5.
3. Stop it and run npm i next@4.2.3 --save and start again with npm run dev.
4. Observe much better performance building pages.

Context

I don't see this issue on very small sites (4-5 pages, no components) but I see it across all production Next.js sites I run, so it's not just project specific for me.

I appreciate it might still be something specific I am doing in those projects, or perhaps just because they all have more components involved.

I'm not sure how best to investigate what's causing this (and was a bit uncomfortable raising an issue without a better understanding of how to diagnose it) but as the performance is fine with Next.js 4, it seemed worth raising as an issue as I assume I'm not the only one impacted and if there are things I'm doing that can be avoided to improve performance then it's good to know what they are for others too.

Your Environment

Tech	Version
next	5.0
node	7.10.1
OS	macOS 10.13.2
browser	Chrome, Safari

[jimmylee]

I am also running into this issue on a site with a custom server, 20+ pages, in local development. Some of my build times have taken over 8000ms, and sometimes they hang and nothing happens at all.

Switching back to NextJS 4.2.3 resolved the issue for me, thanks for posting this @iaincollins.

[timneutkens]

@iaincollins https://github.com/iaincollins/nextjs-starter/blob/master/next.config.js#L4-L19
Note that webpack is ran twice, once for the server, and once for the client. You can distinguish them using isServer. This means that all styles are compiled twice in this case.
Also, you're importing things like bootstrap into the sass entrypoint, sass-loader/webpack doesn't cache @imports in sass files, causing every change you make to compile bootstrap twice.
I'd like to further investigate this, but this is a starting point 🙏

[iaincollins]

Thanks Tim, that's super helpful as ever! :)

I'll start with that and follow up with what @jimmmylee was saying by comparing performance with a non-custom server to see if that makes a difference too.

I'd tried using the new approach for sass but didn't like the flash on initial load, but I see from another issue there is a fix for that in a call release already.

I'm sure you are busy and I don't want to make an issue about any specific project of mine, but rather just try and figure out general things that might be better handled differently now, so I will do some digging with the info I have and update with what I find.

[timneutkens]

Happy to help! Maybe we can make an upgrade guide from next 4 to next 5. There's probably more people running into this.

One idea I had is to move bootstrap into a different entrypoint, and importing it in _document.js using my SSR css imports work (in an open PR on next-plugins). Not sure if it'll work, but it'd solve the issue where bootstrap is compiled every single time.

[khuezy]

I don't think the sass imports are root issue. I'm still getting long compile times after removing them :(

[albinekb]

I'm seeing super slow build times in dev mode, it there a way we could cache stuff like styles and components (like my layout that doesn't change much)? That would help a lot.

[develomark]

I'm also running into this issue. It's become really slow with each hot reload. I have sass being imported into styled jsx. Is that the root cause?

[plag]

@develomark same issue, but have sass imported as module into style-loader.
Can not rollback to branch 4, because separate server and client config makes possible import sass files as modules without styled components. Like it.
Tried enable ignore-loader on sass files instead another loaders (it does on server-side config, but i manually try enable it in front config), hot reloading time still bigger than 4.2.3 and same than before.
Wait for main contributors ideas.

[khuezy]

try out the latest next release: canary 6

canary < 6: hot reload build time was between 4-12 seconds
canary 6: hot reload build time: 2-3 seconds.

edit: nvm, it's still slow

[plag]

@khuezy hot reload simply broken and not working in canary6 :)

[khuezy]

@plag hmm, hot reload is working for me in 6.

Try canary.7, dev compile times are more reasonable. ~2-4 seconds on complete build and < 2 seconds on file change.

[bryan]

Still taking me 15+ seconds to compile on my project on canary.7. Not even close to 4.2.3 yet.

[timneutkens]

@plag @bryan it's impossible to debug it's slow or it's broken. Note that it can be numerous factors. So please provide a minimal reproduction, besides the one @iaincollins already provided 😄 Then I can have a look into it 👍 Thanks 🙏