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)

• This is a v1.x issue.
• 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.

[nganbread]

Here's a js code shifter for those wishing to use full path imports

> jscodeshift ./src -t ./mui-icons-import-shifter.ts --extensions=tsx --parser=tsx -d -p

//mui-icons-import-shifter.ts
export default function (
  fileInfo: FileInfo,
  api: API,
  options: Map<string, any>
) {
  const j = api.jscodeshift;
  const root = j(fileInfo.source);

  root
    .find(j.ImportDeclaration, { source: { value: "@mui/icons-material" } })
    .forEach((importDeclaration) => {
      j(importDeclaration).replaceWith(() => {
        const importDeclarations = [];

        importDeclaration.node.specifiers.forEach((memberSpecifier) => {
          if (memberSpecifier.type === "ImportSpecifier") {
            const module = memberSpecifier.imported.name;
            const modulePath = `@mui/icons-material/${module}`;

            importDeclarations.push(
              j.importDeclaration(
                [j.importDefaultSpecifier(j.identifier(module))],
                j.literal(modulePath)
              )
            );
          }
        });

        return importDeclarations;
      });
    });

  return root.toSource({ quote: "single" });
}

[SreejithNS]

jscodeshift ./src -t ./mui-icons-import-shifter.ts --extensions=tsx --parser=tsx -d -p

Got this error while trying to run your jscodeshifter script : Transformation error (transform is not a function)