How to improve the build speed in React-Typescript, when using material ui

#typescript #javascript #materialui #react

Hi,
you are using material - ui in react typescript and having trouble with the performance? Well i stumpled upon the same issue.
The build takes like forever, since i started to use material-ui and i was really no fun to code against such a lame project.

But lets go in medias res and describe the scenario:

I wrote a header component like this
Header. Pretty staright forward, right?

While coding i went really unhappy, because the build and the livereolad grew pretty slow. So i played around with the Typescript compiler and found this little command
tsc --diagnostics --listFiles which i made an alias healtcheck in my package.json.

Running it was painfull and ended in results like

Files:          5598
Lines:        108833
Nodes:        453997
Identifiers:  146625
Symbols:      217251
Types:         56743
Memory used: 300772K
I/O read:      4.66s
I/O write:     0.48s
Parse time:   26.90s
Bind time:     1.62s
Check time:    9.72s
Emit time:     1.64s
Total time:   39.87s

As you guys can easily see, it takes quite some time and runs to a TON of files.

I imported the two icons for the header like this:

import {
  AccountCircle,
  Language
} from '@material-ui/icons';

And i was wondering about the mass of files that --diagnostics considered when building, especially the trillions of /node_modules/@material-ui/icons/**.d.ts.

Yes iam a typescript user, and althought i had some troubles to get into it, i really like it now. As you might know, if a package does not bring its own typings, there is a huge community in DefinitlyTyped on github, that provides typings for large packages.

For example: one would get the typings for material-ui like this: npm install --save-dev @types/material-ui, with the result of beeing able to consume material-ui in the typescript world.

But a build time of nearly 40seconds? I wanted to improve this and did some research at big brother.
Found this github issue that point to the same problem. And i was really happy to read this comment with a major improvement.

Instead of importing like above, i simply rewrote my import of the icons to:

import AccountCircle from '@material-ui/icons/AccountCircle';
import  Language from '@material-ui/icons/Language';

Lets see how much this impacts our healtcheck now:

Files:           382
Lines:         98396
Nodes:        386176
Identifiers:  130972
Symbols:      201601
Types:         56743
Memory used: 245687K
I/O read:      0.35s
I/O write:     0.37s
Parse time:    4.29s
Bind time:     0.79s
Check time:    5.16s
Emit time:     1.44s
Total time:   11.69s

Wow! Iam was speechless by such a little change, but with an impact like this. We gained nearly 30seconds by altering 2 lines, i mean it could be more lines, but by NOT IMPORTING VIA THE INDEX.

Iam glad i could share this to you, and it will maybe help the one or another.

My name is JanPaul and iam working for instant-data. We are small company, that provides internal tooling for large agencies and also data-exchange platforms.

May the code be with you :pray:
Thanks for the title image to Emil Bruckner @unsplash.

Top comments (6)

Andrei L • Oct 23 '18

You can give a try to this babel plugin,

It should convert automatically

import { AccountCircle, Language } from '@material-ui/icons';

import AccountCircle from '@material-ui/icons/AccountCircle';
import Language from '@material-ui/icons/Language';

Mateusz • Oct 22 '18 • Edited

This applies not only to ts or even react but in general to js imports. First time you have imported and compiled whole icons pckg and second time only this two icons.