Slow page build times in development since update to Next.js 5.0

[khuezy]

Hi,

Is it normal for the dev compilation to take up to 12 seconds to compile each page?

Reproduce:
npm run dev
Click an item from the example drop down menu and wait for page to load.

Thanks!

[iaincollins]

So this is a great question, since upgrading to the very recent release of Next.js 5 it's much slower to build pages in development mode, as are all other Next.js sites I've upgraded.

If you switch it down to use the most recent 4.x release it's actually much faster:

npm i next@4.2.3 --save

You can use npm info next versions --json to get find the most recent 4.x release.

 npm info next versions --json | grep \"4 | grep -v \-

I'm considering downgrading nextjs-starter from Next.js 5 to Next.js 4 until this issue is resolved.

I'm not sure why it's slower now, I think it's down to how Next.js 5.0 works rather than something the project is doing - as other projects I have a are also impacted - but I'm not certain of that.

I am seeing the slowdown with 5.x on larger projects but not smaller ones, so it could be they have something in common that is triggering the performance or it could just be having more components makes things inherently slower.

I'll update this thread as I learn more.

[khuezy]

Cool,

Thanks for creating the issue on the nextjs repo.

Can confirm, Next.js Starter is slower building pages in development mode. I started a new Next.js 5.0 project yesterday and can confirm that it was fast (possibly due to being smaller).

[iaincollins]

I'm considering rolling back the release to Next.js 4.x later this week.

Will maintain a branch that uses Next.js 5.0 (with alternative optimisations) while the issues impacting performance are under investigation.

Would prefer if we could resolve the performance issue while continuing to use Next.js 5.0, but if a rollback is necessary, a branch for 5.0 will be good.

[iaincollins]

Thanks for the feedback. Me too, but it seems so bad now that maybe a rollback until we can resolve is best and I have a sneaking suspicion we might be able to make it better but not as fast as it currently is under 4.x (but I know I really shouldn't be pre-judging that).

Only the package dependancy needs to change as it's fine with React 16.2.0 and none of the code needs to change, so it's very small impact.

I am happy to go with whatever direction everyone is happiest with though.

[b2rsp]

I also experincing slow time in the development (12 to 20 sec) for the build.

[khuezy]

Please see the bottom of: vercel/next.js#3735

There is an open PR to include the fix in the default config, but for now just add it in your config.

module.exports = {
  webpack: (config, { dev }) => {
    /** things **/
    if (dev) {
      config.devtool = 'cheap-module-source-map'
    }
    return config
  }
}

[jenssogaard]

@khuezy awesome. I can confirm that it works. I can't believe we missed that as the solution to the problem 🤣

[khuezy]

I'm glad someone found it and nextjs has an upcoming fix. Development with 10+ second feedback loop was getting annoying.

[iaincollins]

I have upgraded the project to Next.js 6.0 and it seems much better (it had also gotten incrementally better with newer 5.x releases). There is still a delay on first render of a page, but it's much faster as is initial startup time. If anyone is still seeing issues, do let me know.