Create-react-app: I found react-script build is slow, and way to improve the speed?!

[dotku]

I'm using react-script to build the project. It takes about 20 secs which is a little bit slow. I'm worrying it will growing as project getting large.

I found each build will go through the testing step, I just wonder if we can turn testing off during the build, since test already done during the development step. But I haven't find any article on turning build off by using react-script.

Or any solution to improve the packaging speed, let me know.

Thanks,

[Timer]

You can try the new 2.0 beta which improves tons of performance tuning, but be aware it may have some issues and isn't considered production-ready.

You can find it by searching the issues for 2.0 roadmap, or by installing react-scripts@next.

[dotku]

I think again on the release process. I think maybe we should have a server side release service, having a bot once the build is ready.

[DrecDroid]

Today I've found something interesting. While working with material-ui I was importing the icons in a silly way. I was importing using 'require' inside the components using the passed props. Because the components aren't know before hand, It will try to add every icon to the final bundle( or perhaps it splits in many files). So figuring this out I moved from importing this way to importing like this

import { Home, InsertDriveFile } from '@material-ui/icons'

It will take forever to compile, like more than 20 seconds in my modest i3 with HDD laptop.
Without exploring further I believed that this happened because that module imports and re-exports a huge amount of icons and in a development environment there is no tree-shaking (or is it? anyways, It will be an expensive operation)

So, then I tried importing with the suggested method from material-ui documentation.

import Home from '@material-ui/icons/Home'
import InsertDriveFile from '@material-ui/icons/InsertDriveFile'

It recompiles blazingly fast.
Do this also for your other material-ui components

import Drawer from '@material-ui/core/Drawer'
import Toolbar from '@material-ui/core/Toolbar'
import List from '@material-ui/core/List

And remove any unused import ( this really makes things even faster, even when the imports aren't used).

I was really worried because with the previous way of importing even in a PC with SSD, the bundling took really long time ( like the same amount of time), even it breaks CodeSandbox(which relies also in create-react-app setup) in just one second.

So my suggestion are:
1.- Have your components in separate files ( and hope the libs you use do the same).
2.- Import the components directly from its file.
3.- Remove every unused imports.
4.- Be patient.

BTW. It would be cool to have a --debug flag that shows how the bundle is made.

[yebrahim]

@DrecDroid I just ran into this as well, BIG difference, and keeps getting bigger the more I add other components, even if they're importing the same files over and over.

[squeedee]

My issue with

4.- Be patient.

Is that we build to test in a large scale microservice driven app. We run our tests with every change, so fast feedback is important, keeps the test-driven flow rolling along.