Material-ui-pickers: reduce bundle size

[sakulstra]

When using material-ui-pickers it seems like the complete material-ui lib is bundled into my package.
I suspect is due to the use of import { * } from 'material-ui'; https://material-ui-next.com/guides/minimizing-bundle-size/

Environment

| Tech | Version |
|---------------------|---------|
| material-ui-pickers | latest |
| material-ui | latest |
| React | latest |
| Platform | isobuild |

Steps to reproduce

1. npm install material-ui-pickers and start using it :)

Expected behavior

The bundle size shouldn't increase that much

Actual behavior

It does :)

Fix

We could either use one of the packages suggested or transform the imports(would prefer the latter). Are you open for a pr in that direction?

[cherniavskii]

I confirm this issue.
I even tried to add babel-plugin-direct-import plugin, but with no success :/

[dmtrKovalenko]

There is no material-ui inside the bundle. It should not be - we are using material-ui as external through rollup and it doesnt bundles inside esmodules, you can check it if you will build a local copy.
Pleas provide more info about bundle size, perfectly use https://www.npmjs.com/package/webpack-bundle-analyzer

[dmtrKovalenko]

FYI here is the last release build report
│ Destination: build/dist/material-ui-pickers.cjs.js │
│ Bundle size: 130.98 KB, Gzipped size: 25.8 KB │

Here are just our code and moment-range bundled. And moment range would be replaced if you are using esmodules instead of commonjs.

[cherniavskii]

@dmtrKovalenko it's not about material-ui-pickers bundle size, but the way how material-ui-pickers imports material-ui components

[cherniavskii]

@dmtrKovalenko this guide describes it very good

[dmtrKovalenko]

Yep, I understood you, but actually I have tried - and nothing works from that. I mean babel-plugin-import but we should change absolute imports to relative. :anguished:

[ValentinH]

Indeed, I just profiled my app an the whole material-ui is bundled. If I remove material-ui-pickers from my app then material-ui is correctly tree-shaken.

The best solution for now would be to use the absolute imports.

[danieljuhl]

Indeed it should be absolute imports. Also consider exposing EACH of the pickers, so that I as a developer can choose just to import DatePicker and not the DateTimePicker and TimePicker. Right now, there is only one entry, which loads ALL of the pickers.

[danieljuhl]

Will you accept a PR if fixed?

[cherniavskii]

@danieljuhl sure!

[sakulstra]

just tried with current master and it seems to work :+1: @danieljuhl thanks for the efforts.

There is no material-ui inside the bundle. It should not be - we are using material-ui as external through rollup and it doesnt bundles inside esmodules, you can check it if you will build a local copy.

You are right, the problem is more our build system then material-ui-pickers. node_modules aren't compiled as i get it which leads to the problem(otherwise we could use the babel package ourselves).
Anyways now with absolute imports it shouldn't be a problem any more.

[danieljuhl]

@sakulstra but there is still the other improvement. I'm not fully in to your build system, but if the build would expose each of the components standalone, we could avoid loading the whole package/module, in cases where you simply need e.g the date picker (and not the time picker). Right now there is only made a single full module.

It could for cases as above decrease the bundle size to approx 1/3.

[dmtrKovalenko]

Already in master 😄

[sakulstra]

reducing bundle size by ~100kb for us :+1: gj!

@danieljuhl sry missed that message, true that would be another improvement for some parts of the userbase(we're using all 3 components so it wouldn't change anything for us).

[jeffvandyke]

I just tried using version 1, importing just the button, and it seems that this is still a problem. I started with create-react-app, and analyzed bundle size before and after the Button component from Material UI was used.

| | Parsed | Gzipped |
|-|-|-|
| Initial create-react-app: | 114.87 KB | 36.71 KB |
| After Material UI Button: | 241.60 KB | 70.75 KB |

(This issue really helped using Webpack Bundle Analyzer with create-react-app)

Code in src/App.jsx:

import Button from '@material-ui/core/Button';
...
    <Button variant="raised" color="default">Default</Button> {' '}
    <Button variant="raised" color="inherit">Inherit</Button> {' '}
    <Button variant="raised" color="primary">Primary</Button> {' '}
    <Button variant="raised" color="secondary">Secondary</Button>

This is a size increase of 126.73 KB, 34.04 KB Gzipped, but the docs on minimizing bundle size said this difference should be ~20 KB Gzipped. I'm investigating using Material UI in an embedded environment where size really matters, and serving Gzipped is difficult at the moment, so is there any way to make this smaller, or to trim out some fat?

[jeffvandyke]

Ah forgive me, I may have posted this is the wrong repository, silly google results :(

[snaumov]

There is no material-ui inside the bundle. It should not be - we are using material-ui as external through rollup and it doesnt bundles inside esmodules, you can check it if you will build a local copy.

as a side note, thanks to your config, managed to strip @material-ui from library bundle!