var mui = require('material-ui'); increses bundle size by 3MB

[liesislukas]

Hi, I'm testing best way to include stuff to my project. My plain ReactJs "Hello world" example is 123KB if i include material-ui it becomes 3.3MB. I use gulp with browserify to make a bundle.

How should I include material-ui for production?

Now I've did:

npm install material-ui --save

and in my code:

var mui = require('material-ui');

this line adds 3MB. Any way to make it smaller?

[izeau]

Did you try excluding the react and material-ui packages and bundling them in a 'vendor.js' file? You could also minify them using minifyify.

[liesislukas]

Thanks for you answer :)

There is nothing in project just one single line:

var mui = require('material-ui'); 

After compiling i get 3201 KB in filesize with debug flag: true after switching debug to false filesize is 1332 KB, a lot better, but still too much.

after deleting caching settings for watchify:

var bundler = browserify({
    entries: ['./app/index.js'], // only entry file required.
    transform: [reactify], // JSX to JS
    debug: false, // sourcemapping
    cache: {}, packageCache: {}, fullPaths: false // watchify
});

to

var bundler = browserify({
    entries: ['./app/index.js'], // only entry file required.
    transform: [reactify], // JSX to JS
    debug: false // sourcemapping
 });

It saves 134KB more, now filesize: 1198 KB Added minifcation saves another 693 KB, now filesize: 505KB

Any more suggestions?

[izeau]

Yeah, you should definitely exclude your vendor libs (such as react and material-ui) from your build and bundle them in a separate file. This won't reduce the total / initial load, but the vendor file will be cached and your actual application code file won't be that large.

Also have you tried GZip'ing your assets (incl. JS)? You can get quite a discount on the file size!

React and material-ui are not lightweight and there's only so much minification / compression you can do :)

[jkruder]

@liesislukas If you still want sourcemaps, there are gulp (maybe grunt/webpack too) plugins (sourcemaps) that you can use to create the sourcemap for your JS external to your application code. Your application file size will be about the same and you'll have sourcemaps available to you if/when you need them.

[liesislukas]

I've already added sourcemaps, filesize increased by 98 KB, now 603 KB + 1743 KB map I was testing all this with http-server and it had no compression option, now i use serve with --compress option and i think this is the end of this journey.

Minified & compressed:

• Material-ui: 131 KB :+1:
• React with addons: 38.5 KB

It's not that heavy. Thanks for your time :)

[izeau]

If I may add some tips, don't bother minifying / compressing for development. Both take time and we all love a snappy live reload, don't we?

[liesislukas]

Of course, for development there is no need to minify or compress, just waste of time. Not even talking about caching. That would be even a disaster while debugging. With this experiment was trying to check what I will have in production with this lib, where everything will be enabled to optimize for load speed and cache.

[oliviertassinari]

@liesislukas You can still reduce the size by not using var mui = require('material-ui');. Rather, only include components you need. In my use case, I win 50%.

[liesislukas]

@oliviertassinari I'm thinking about using almost all of those elements, so this is not going to work, only more job to be done to save fraction of size. If only several components are needed would be crazy to include all other too. Totally agree with you :+1:

[liesislukas]

repository for this conversation No success to bundle vendors in a separate file, can you guys make it happen and send me pull request?

[jasan-s]

@oliviertassinari i'm using commonsChunk plugin in webpack, and my vendor.js size doesn't change if i only import one material-ui component import FlatButton from 'material-ui/FlatButton' or the enier lib import {FlatButton} from 'material-ui'. is tha expected in code splitting?

[oliviertassinari]

@jasan-s You only get the benefit of specific import if you are doing it everywhere. A simple import mui from 'material-ui'; and it's over, at least with webpack@v1.

[jasan-s]

I have confirmed i'm only using component based import through my entire app. But I think because I'm using my entry as vendor: Object.keys(pkg.dependencies) the vendor build includes all dependencies in its entirety listed in the package.json file.

[mwq27]

Here are some bundle-size print outs of some of the material-ui components:

material-ui/Toggle
env  bundle  minify  gzip
--   822 kB  454 kB  125 kB

material-ui/Slider
env  bundle  minify  gzip
--   793 kB  432 kB  122 kB

material-ui/styles/MuiThemeProvider
env  bundle  minify  gzip
--   347 kB  201 kB  58.3 kB

I also was using the Object.keys(pkg.dependencies) method. I tried to instead only include these individual packages, but it's still pretty large.

[oliviertassinari]

@mwq27 Do you have a more detail view on the graph dependency? I'm wondering what's taking soo much space. Could it be React?

[mwq27]

Here's the dependencies of material-ui/Slider.js

Here's the deps for Toggle

[oliviertassinari]

@mwq27 Looks like React is the culprite for that size. We can't do much about it.

[nitish24p]

@oliviertassinari i'd really recommend using https://github.com/siddharthkp/bundlesize . In your build systems. 430Kb is really high reference here

[oliviertassinari]

We are already using https://github.com/ai/size-limit. v1-beta is at around 130kB gzip and minified.