Tips on reducing bundle-size due to material-ui

help
1

My app is quite heavily invested in material-ui, and I love the package! However, I’m by far not using most of the components, which are all imported into my app, adding a crazy 450kB to my bundle size.

Has anyone been able to reduce this to only the components that are used in the app?

I’m also really unsure about how meteor handles imports in subdirectories:

import RaisedButton from 'material-ui/RaisedButton';

Isn’t this supposed to only import the files necessary to make that component work?

2

@florianbienefelt
EDIT: Sorry, but I gave bad info. We are actually importing as per the MUI documentation.

Importing using the destructuring method is not going to work as you found out so don’t do this!

import { RaisedButton } from 'material-ui/RaisedButton';

Looks like @XTA has found a potential solution for you.

3

Well, I just tried to dig into this problem.

@skirunman, I tried what you suggested but it does not work, the browser returns a nasty error, material-ui components can’t be imported like that.

I spun up a new project, tried to import only a RaisedButton the original way, and I saw that the module size was only 80kB, much better. So somewhere in my large app I’m doing something wrong, as it imports all of the components regardless. I’ll update this if I find out what it is.

4

OK, report back.

EDIT: Whoops, sorry for bad information, but we don’t actually import Material UI components in the fashion I mentioned above.

As we are using pretty much all of MUI we are importing just as per their documentation

import RaisedButton from 'material-ui/RaisedButton';
5

We use:

import RaisedButton from "material-ui/RaisedButton/RaisedButton";

I don’t know if there is any technical difference between the {RaisedButton} syntax, but in our case it works and we get a reduced bundle size.

6

@florianbienefelt In one of our project we are using https://github.com/umidbekkarimov/babel-plugin-material-ui, you can check this out. Be aware that it is notable to look at https://github.com/umidbekkarimov/babel-plugin-direct-import also. We will probably migrate soon.

7

I double checked, and can’t get a simple example to work, here is a webpackbin that shows the same error I get:
https://www.webpackbin.com/bins/-KptDaKN-SkPNZZQE5Ao