Material-ui: Bundle size is way too big

[kof]

Despite the fact that I am importing specific components only and those are maybe 5. I see in my bundle analyzer this huge dependency. Lets find out why that is so and what can we do about it. Also 60kb of lodash inside sounds like an overkill.

[oliviertassinari]

Are the stats coming from the production build? The documentation of the propTypes is pretty large in dev mode.

[kof]

Dev, lets see whats in production.

[kof]

Now minified (parsed size) version looks much better, but still way too much for those components I use.

[kof]

Potentially something is still importing the entire lib. I checked my code, I am def. only importing specific files.

[oliviertassinari]

I can't see the Dialog, nor the Avatar being imported.

[kof]

Hmm, I am not using Paper for e.g. but probably its a hardcoded dependency of some other components like a Menu or something. I am using List, ListItem, Button, Divider, LinearProgress, Chip, IconButton, Input, Menu, Form, MuiThemeProvider.

[kof]

Its quite a number of components, but still, 115kb minified ... React-DOM is 110kb for e.g. React 15kb.

[kof]

For e.g. that lodash dependency 60kb, is it really worth it?

[oliviertassinari]

I have something pretty close to you:

First finding lodash.isEqual https://github.com/STORIS/react-scrollbar-size/issues/2. I think that we can greatly reduce the size of the Tabs component by not depending on it.

For e.g. that lodash dependency 60kb, is it really worth it?

We use very few functions of lodash, I'm surprised that we depend on 60 kB of it!

[kof]

We use very few functions of lodash, I don't think that material is depending on 60kb of loadash.

Then its either the core or not specific imports.

[kof]

Btw. why is lodash not in your stats? Probably because the same version is used in the project globally. I am still on lodash 3 globally, thats why it shows me the cost of lodash within material-ui scope.

[oliviertassinari]

To put some perspective on my common.js bundle:

[kof]

And here is mine ... now you know why I am digging, thats insane.

[kof]

Just started optimizing though.

[oliviertassinari]

Wow, I can't even see Material-UI in your bundle. You can start with supertest and all the moment locales :happy:. Also, I have only share the common.js of my app. I have also many more chunk for each page.

[kof]

You can))) second column at the bottom. Yes, moment locales and other monsters are on my kill list.

[oliviertassinari]

I'm gonna address the lodash.isEqual STORIS/react-scrollbar-size#2 issue, but I don't know what you could do aside that to improve the bundle size.

[kof]

Yeah, I think for material-ui is worth considering removing lodash if its trivial things and review all imports to make sure nothing unneeded is imported.

[oliviertassinari]

Oh, we might have another lodash function messing the bundle size. I'm gonna look into that.

[oliviertassinari]

Oh and a last one, we should split the colors file.

[oliviertassinari]

Here we are #7306. That should help, a lot.

[mehrdad-shokri]

@kof @oliviertassinari I'm facing this exact problem. I'm importing components like import Button from 'material-ui/Button' way. any hints?

[maciej-gurban]

I believe there could still be some issues with components importing too much. I've got a bunch of components in my output bundle that don't seem to be in any way related to the components I've imported. For reference, here are all import statements from material-ui within my app and my vendor bundle:

import List, { ListItem } from 'material-ui/List';
import List, { ListItem, ListItemText, ListItemSecondaryAction } from 'material-ui/List';
import { TableBody, TableRow, TableCell } from 'material-ui/Table';
import { TableHead, TableRow, TableCell } from 'material-ui/Table';
import Typography from 'material-ui/Typography';
import Card from 'material-ui/Card';
import Table from 'material-ui/Table';
import Hidden from 'material-ui/Hidden';

If you have ideas how to investigate what actually imports Input, Modal, Form, Select etc, I'd love to get some pointers.

[oliviertassinari]

@maciej-gurban All the extra imports come from material-ui/Table. The issue will be addressed with #9673. We are going to flatten the imports.

[maciej-gurban]

@oliviertassinari Thanks for a quick reply and the explanation! For now I've changed all my imports to point directly to the files they import, so instead of

Foo, { FooBar } from 'material-ui/Foo'

I'm doing

Foo from 'material-ui/Foo/Foo'
FooBar from 'material-ui/Foo/FooBar'

This removed all the unnecessary modules from my bundle. Big props for creating those standalone modules.

[kennblvnp]

what app are u using guys? those squares that indicates the size

[mehrdad-shokri]

@kennblvnp it's webpack bundle analyzer