How to improve the build speed in React-Typescript, when using material ui
Tags: typescript, javascript, materialui, react
Published: 2018-10-22 09:44:47

---
title: How to improve the build speed in React-Typescript, when using material ui
published: true
description: you are using material - ui in react typescript and having trouble with the performance?
cover_image: https://images.unsplash.com/photo-1523979005193-b2a8e4316be0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=12246173cfa96f04ca257877e678948a&auto=format&fit=crop&w=1350&q=80
tags: typescript, javascript, material-ui, 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](https://i.imgur.com/3pMF0hO.png). 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](https://github.com/DefinitelyTyped/) 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](https://github.com/mui-org/material-ui/issues/11916) that point to the same problem. And i was really happy to read this [comment](https://github.com/mui-org/material-ui/issues/11916#issuecomment-429984950) 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](http://www.instant-data.com/). 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](https://unsplash.com/@emilbruckner) @unsplash.