search

dev-plusplus / coding-docs

4 stars 2 forks source link

Import components by default imports in Material-UI #53

Open Rodasac opened 3 years ago

Rodasac commented 3 years ago

Problem

In projects where material-ui is used I suggest to avoid bulk named imports in manner:

import { Button, Grid } from '@material-ui/core';

This is because NodeJS parses all imports in index.ts on '@material-ui/core' before return the needed component or functionality, on projects with Material-UI this behavior is unacceptable due to the overhead on compile and test times.

Solution

Instead of bulk named imports the best option is to import components one by one to theirs component index file directly, ex:

import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';

By doing this the tests can be executed in 0-5 minutes, before, with the first approach the test could last more than 10 minutes (in lower specs machines).

kikeztw commented 3 years ago

This is important I leave the documentation below

https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking