Next.js localhost slow build
Unanswered
Sandwich Tern posted this in #help-forum
Sandwich TernOP
Having significant latency issues with Next.js in localhost; pages taking up to a minute to compile and several tens of seconds to refresh. How can I resolve this problem?
It's only on localhost, i'm using antd, tailwind but i didn't have any problem till now.
I found this post in github : https://github.com/vercel/next.js/discussions/17977 and this one https://github.com/vercel/next.js/issues/48748
I tried some of the solutions shared by other people but didn't work (clear site data, trying with another web browser, clearing browser cache, reducing content setting in tailwindcss, etc).
Do you have any idea ?
It's only on localhost, i'm using antd, tailwind but i didn't have any problem till now.
I found this post in github : https://github.com/vercel/next.js/discussions/17977 and this one https://github.com/vercel/next.js/issues/48748
I tried some of the solutions shared by other people but didn't work (clear site data, trying with another web browser, clearing browser cache, reducing content setting in tailwindcss, etc).
Do you have any idea ?
20 Replies
Sandwich TernOP
Hello all, so after many tests, i found that it seems to be antd that slow the refresh and load of the page.
You can see the compiled time without antd near 750 ms and with antd 5.6s.
You can see the compiled time without antd near 750 ms and with antd 5.6s.
yeah antd is very huge, you need to make sure you aren't importing the entire library when using a few components. its been years since I used it so I don't know if they got any better
Sandwich TernOP
found this solution with modularizeImports and mui but can't it seems that the property modularize import has changed
So i tried this solution :
it doesn't work better
you definitely don't want to transpile their library yourself
I am pretty sure
modularizeImports has been removed, you only need to use experimental.optimizePackageImportsif that still doesn't work it might be a bug
Sandwich TernOP
Yeah modularizeImports has been removed that's why i tried experimental.optimizePackageImports but maybe i did smth wrong
Sandwich TernOP
Just opened this issue to antd team : https://github.com/ant-design/ant-design/issues/47646
again, you should not add the antd libraries in
transpilePackages, if you do this you are explicitly asking Next.js to go through everything in the library and transpile it again, which will certainly take a long timeSandwich TernOP
oh didn't understand, but without i got this error : Cannot use import statement outside a module
Sandwich TernOP
ok it's so much better for the refresh but it still take like 35 s to compile the first time and 15 sec to compile another page
but thx a lot Rafael the solution i found on github for the error Cannot use import statement outside a module wasn't that good^^
Sandwich TernOP
Ok sad news it isn't so much better, it's better like 2.5s to refresh but not 500 ms
Sandwich TernOP
Just to see the difference i tried nextUI with global import and nextUI in single import and it give me same results like 10s to refresh or more
Sandwich TernOP
So antd just pointing next js issues on dev performance
The only hope i found is trying to remove antd/icons from transpilePackages but if i removed it i'm getting the error : Cannot use import statement outside a module
So it's worse and seems an infinite loop to me lol
So it's worse and seems an infinite loop to me lol