Material-ui: Destructured imports for @material-ui/icons slow down live reloading

[nikoladev]

Ever since version 2 of @material-ui/icons my live reloading is reaaaaaally slow (from less than a second to more than 5 seconds). The fix for this is to change how I import the icons:

Slow:

import { Check } from '@material-ui/icons'

Quick:

import Check from '@material-ui/icons/Check'

I guess a quick fix would be to mention somewhere in the docs that destructured imports slow down live reloading in certain cases.

(I've bootstrapped my project with create-react-app)

• [x] This is a v1.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Quick live reloading (<1 second)

Current Behavior

Slow live reloading (>5 seconds)

Steps to Reproduce

Here's the code that I changed that fixed this issue for me:

(Slow live reloading)

import {
  Check,
  Close,
  Info,
  NavigateBefore,
  NavigateNext,
  Star,
  StarBorder
} from '@material-ui/icons'

(Quick live reloading)

import Check from '@material-ui/icons/Check'
import Close from '@material-ui/icons/Close'
import Info from '@material-ui/icons/Info'
import NavigateBefore from '@material-ui/icons/NavigateBefore'
import NavigateNext from '@material-ui/icons/NavigateNext'
import Star from '@material-ui/icons/Star'
import StarBorder from '@material-ui/icons/StarBorder'

Context

Now that I've figured out how to fix this it isn't really a problem for me. But others who don't know about this might be stuck trying to figure out why their live reloading is slow all of a sudden.

Your Environment

| Tech | Version |
|--------------------|---------------------|
| @material-ui/core | v1.4.3 |
| @material-ui/icons | v2.0.1 |
| React | v16.4.2 |
| react-scripts | v1.1.4 |
| Browser | Chrome 68.0.3440.84 |

[mbrookes]

@nikoladev This is sort of alluded to in the icons package README where import options are discussed

If your environment support tree-shaking you can also import the icons that way:

import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

Note: Importing named exports in this way will result in the code for every icon being included in your project, so is not recommended unless you configure tree-shaking.

But we could repeat that in the main docs page and be more explicit about the performance implications.

[oliviertassinari]

@mbrookes How do you think we can improve the documentation? I'm having a hard time seeing how we can do better. The section you linked looks enough to me. The more code you use the slower everything is.

[mbrookes]

@oliviertassinari That's only in the README. I've added it to the main docs along with a note about HMR performance in both.