DEV Community

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

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

jan paul on October 22, 2018

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...
Collapse
 
iamandrewluca profile image
Andrei Luca

You can give a try to this babel plugin,

It should convert automatically

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

to

import AccountCircle from '@material-ui/icons/AccountCircle';
import Language from '@material-ui/icons/Language';
Collapse
 
matchojecky profile image
Mateusz • 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.

Collapse
 
janpauldahlke profile image
jan paul

Hi Mateusz,

thanks for clariyfying that this principle can be transfered to javascript. we should keep it in mind ;-)

Collapse
 
osadchiynikita profile image
Nikita Osadchiy

Many thanks! I had the same issue with imports of styled-icons and react-use, got dramatic performance increase after refactoring to proper import

Collapse
 
janpauldahlke profile image
jan paul

glad to halp out ;-)

Collapse
 
gbminnock profile image
gbminnock

This is great but I wonder if there is some way of finding out which imports are causing these slow builds. Maybe its just trial and error?