Speed up npm run build

[ivosabev]

This is not a bug, but more like a request to speed up the build times. Even on a clean project it takes a good 15 seconds to build and on a medium-sized project it goes to 3-4 minutes. Any effort in this direction will be greatly appreciated.

Thanks!

[gaearon]

It's most likely due to linting. We should enable cache for ESLint loader because I think it's disabled right now.

If you could supply a larger project reproducing it, that would be helpful for figuring out the root cause.

[thien-do]

@gaearon I can supply a real life large project (a trading app), which takes about 3 minutes to build. However, it uses a fork react-scripts. Can it help?

[gaearon]

@dvkndn Yea it would be helpful.

[godmar]

Would like to second @ivosabev 's request.

On a 2-core, 2GB Digital Ocean instance, npm run build on a null-CRA 0.7.0 project takes 11s.
It takes similarly long for the webpack dev server to start.

Adding 15-20 .js files for components, etc. expands this to 20s.

I'm not sure whether CRA is to blame, though - I've seen similarly catastrophic build times in other projects with similar, but indepedently created webpack configurations.

[gaearon]

Can you debug why this happens? I don’t have the time to look into it right now. But if you put a few logs here and there you’ll likely see the overall picture of where the time is being spent.

As I noted above it might help to enable caching for ESLint loader. Have you tried this?

[godmar]

A big contributor is UglifyJSPlugin. Disabling it reduces the build time for an empty project from 11.9s to 6.7s on my machine (that's 44%).

Removing eslint from preloaders, by contrast, reduces the build time from 11.9s to 10.5s (that's 11%).

[godmar]

I tried your idea by setting 'cache: true' in the eslint config.
This shaved about .5s of subsequent runs (provided no files were changed.)
Only src/index.js and src/App.js made it into the cache (for an empty project).

For non-empty project (2,249 lines of JavaScript in 45 files)
Build time: 66s
Build time without UglifyJS plugin: 27s
Build time without eslint: 62s
Build time on 2nd and subsequent builds when eslint cache turned on: 61s
Time between npm start and development server reporting ready: 16s

This is what the early 1990s were like when we waited for our TurboPascal or TurboC project to compile on our 80386 33 MHz desktops. It kind of takes the fun out of development, especially considering that we're using a language that fundamentally shouldn't need any compilation.

The only redeeming fact here is that a hot rebuild (touching a .js file) takes "only" 4-5 seconds - as long as HMR doesn't get stuck. Although even that is hampered by the fact that I usually make changes to multiple .js files when developing (2-3 files), and each file save triggers a separate rebuild, so a total of 12-15s.

I'm seeing similarly abysmal performance with webpack 1.x on a project that doesn't use CRA, so I don't think CRA is to blame. Are you not seeing that?

[gaearon]

It kind of takes the fun out of development, especially considering that we're using a language that fundamentally shouldn't need any compilation.

Do you perform production builds often? What is your use case for this?

[godmar]

Production builds I generally don't do often, although I did find myself having to do it frequently when I debugged issues related to the PUBLIC_URL setting (in development empty string "" but a path in "production"). I also had to frequently rebuild to debug websocket related issues (since there development and production use different settings; although I understand that 0.8.0 can proxy websockets.)

For websockets, it was an issue of debugging the right combination of { path : }, nginx forwarding rules, etc. which required frequent production builds.

Having to wait 5-8s in development is however still an order of magnitude more than in other work flows. For instance, a static HTML page takes generally under 1s to update and reflect a new version of the code.

I would love to have a solution for the "multiple file" update problem. Something that tells webpack: "I'm about to update multiple files", followed by "I have updated multiple files, please rebuild"

[gaearon]

Tagging this so I remember to get back to it.

[godmar]

PS: also remember pure development use cases where hot reloading doesn't work, for one reason or another (frequently having to run 'npm start' for development is slow too.)

[gaearon]

Not sure what you mean by hot reloading in this case and when it doesn't work. Whenever you save a file development server should rebuild. If not it's a bug and you should file it along with any details. The "reloading" part of this triggers a reload via web sockets but it's non-essential. You can still refresh and get a fresh development build. If not it's a bug and you should file it with any details. You are not supposed to ever have to restart npm start once it's running..