-
Notifications
You must be signed in to change notification settings - Fork 26.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slow "> Building page:" #2487
Comments
Use the webpack analyzer and see what are the packages in your app: https://github.com/zeit/next.js/tree/v3-beta/examples/with-webpack-bundle-analyzer You may be using some server side NPM modules or some unwanted modules. |
@arunoda Thanks. Any idea if incremental webpack compilation is on the horizon? |
@tashburn we already do that. BTW: Double check whether you are using the latest version of Next.js |
@tashburn I have the same problem. I just started the troubleshooting process today. |
If anyone of you can send me the repo, I can have a look at this. |
@brentmclark Super, thanks! |
hey @arunoda wanted to send you a (trimmed down) repo demonstrating what our company (@brentmclark and myself) are experiancing: repo The part I want to point out is: when running ( Now those are extremely light pages, our real app has over 600kb of styles, and a ton more components ect for each page, moving the build page time up to 5-10 seconds. However the fact that these trimmed down pages still take few seconds to load is the issue to me. Any thoughts? |
@tashburn, FWIW @chaffeqa discovered a config setting that we are trying out coupled with a healthy dose of prefetching. 24 hours may be the wrong length of time; we are fine tuning as we go. Toss this into a module.exports = {
onDemandEntries: {
// on dev, since our pages are so expensive, lets keep them for 24 hours
maxInactiveAge: 1000 * 60 * 60 * 24,
},
} Increasing the Also, we hadn't run a These things are purely anecdotal, but if they can bring you similar results that would be great! |
@chaffeqa The app build time seems pretty standard to me. See: I checked the bundle and seems like you can get rid of some of the modules which are marked in red. (I assume they are server only modules) Anyway, try to load those modules as on-demand modules with dynamic imports. As a long term solution we are looking to use the autodll plugin (#2433) or some other caching machanism to make the dev re-build time smaller. |
BTW: Apollo client seems to be pretty big too. |
It's part of our very near-term roadmap to dramatically speed up compilation performance, both for dev and prod. A big part of that is doing less work. |
(e.g..: webpack tends to redo the whole project from scratch every time you start it up. There's a lot of time to save there) |
@brentmclark Thanks for the suggestions. The I tried updating to the very latest version of Next, and i reinstalled all my modules per your suggestion (thanks). My dev build times have not really changed -- startup is still 6-9s (which happens whenever I change server code), and one of my key pages takes 9-29s. Not sure why there's so much variability in the time taken. @arunoda I used the Webpack Bundle Analyzer and was able to remove maybe 10% of my modules. A modest improvement. @rauchg said It's part of our very near-term roadmap to dramatically speed up compilation performance, both for dev and prod. Love it! That will make a huge impact. |
I assume what's happening here is webpack restarts from the scratch. |
Thanks @arunoda for looking! So that repo was an copy of our actual project, however I removed all the actual components (pages) and instead made those x3 "mock routes" (I did that to not disclose business data). I left all the dependencies in though that we used, as well as imported them, just to help demonstrate the performance with those dependencies. Unfortunately most of those dependencies are required in the So you are correct on the compilation times being "normal", however the main issue I'm referring to with that "sample" app is that: try starting at
I think thats a root route issue (route matching?). The second being: from there, go back to I saw the DLL pull request actually earlier this week and was pumped for that, that's probably the dev experience win. I did want to reach out and mention that my experience with the DLL plugin is that it's got tough edge cases to deal with (much like hot reloader). So I'd advise to do similar to what react-boilerplate did and make it opt-out-able. Mainly for you're own github issue sanity 😉 The last thing I'd like to mention in ideas is: potentially making PS feel free to use that repo for any ideas/performance testing |
@tashburn yep, the |
Our two cents - now that we're fully migrated over to next, we're seeing issues similar to @chaffeqa - particularly since every page requires most of our JS because of our mobx stores (like what is described above with redux). In addition, we get the memory fault described in #282 at least a few times a day (much more for team members with less powerful computers). We moved from base webpack + dll plugin, which did not have any of these issues. There was a longer startup cost (60s), but subsequent pages did not have to rebuild, and we did not run into memory leaks. This is a MUCH nicer dev experience imho, since we only really need to do a cold start once or twice a day, but we're constantly navigating pages. Question 1: is there a way to compile all the pages on server start (to disable the on demand page fetching)? Question 2: If there is anything that we can try to help this situation and speed up our development? DDL plugin sounds promising (and helped us before) - particularly since we load heavy dependencies like https://github.com/codemirror/CodeMirror, https://github.com/jpuri/react-draft-wysiwyg, and https://github.com/Semantic-Org/Semantic-UI-React. Above complaints aside, thanks for all the hard work that's been put into next - it's a fantastic library :). |
Any progress towards this? Just started with next, myself, and noticed this same pattern. Initial load is long (along with any loads to subsequent routes), but afterwards navigating to any route that has already loaded previously is pretty quick. If you idle on the site for awhile, the pattern repeats itself. |
@tashburn @chaffeqa @brentmclark I think I've narrowed this down to the Can you try removing that and tell me if it's faster? |
Maybe, its tough for me to tell if its much faster, but it may be! |
@pruhstal I'm not using |
We're going to integrate webpack dll in Next v5 |
I was suffering long full page refreshes. Turned out to be an issue with OSX and IPv6 and resolving addresses in the hosts file. The issue was around using This hit me recently as my local Next.js site is pulling from a locally hosted API. This is the first part of my hosts file. Adding entries to the
|
In dev mode, Next takes 26+ seconds to build a page for me.
DONE Compiled successfully in 26253ms
This has become a major pain during development, each time I change code.
I presume this is because I have lots of npm packages (48), or they are large/complex.
Do others experience this?
Can anything be done to speed this up, besides removing packages?
The text was updated successfully, but these errors were encountered: