Bundle-Visualizer is Awesome

1

I ran Bundle-Visualizer and was surprised to see that I was loading 2GB of fonts. Checking, I found that my code included the line:

import {Facebook} from 'mdi-material-ui;

…which (in the absence of tree-shaking) is the wrong way to do it – it was loading all of ‘mdi-material-ui’. I updated it to:

import Facebook from 'mdi-material-ui/Facebook';

…and saved all that page weight. That, plus applying the same syntax to a few other import statements in my code, increased my Chrome audit score from 24 to 85 - a very fast page load speed. :slight_smile:

6 Likes
2

…I really wish Meteor did tree-shaking, though! Feature request here.

1 Like
3

Yes @vikr00001, I also have projects using mdi-material-ui and I also had to change to specific imports to avoid this issue.

BTW, for @material-ui imports I’m also doing the same, always getting the specifics that I need:
import { default as Search } from '@material-ui/icons/Search';

In general in every library we need to do this, unfortunately some libraries do not expose each module in isolation.

and yes @arggh, tree-shaking would be amazing to have this benefit automatically.

4 Likes