[docs] Update minimizing-bundle-size.md

[kazazor]

• PR has tests / docs demo, and is linted.

[oliviertassinari]

Hey, thanks for submitting that PR! We have an open issue for that point #5625.
I think this point worth a sub section in that page of the documentation.
I'm not 100% sure this is the best solution available. Maybe @umidbekkarimov can guide us regarding how we should document that point. I believe that we can close the linked issue once it's well documented :).

[avocadowastaken]

Any babel plugin (including babel-plugin-material-ui) should be a short term workaround, tree shaking should be a solution. And it works. It disables imports and makes components unused, but uglifyjs doesn't count them as dead code. Mostly it's because of propTypes and another statics in classes.

Try to uglify this code (https://skalman.github.io/UglifyJS-online/)

var Component = (function() {
   // Unused component without any statics.
   function Foo () {}
 
   // Unused component with prop types.
   function Bar() {}
   Bar.propTypes = { children: PropTypes.node }

   // Used component.
   function Baz() {}

   return Baz;
})();

See this issue babel/babel#5632 for more details.

[kazazor]

I agree tree shaking is the right solution looking forward. But this Doc doesn't say anything about it. For example tree shaking does work in Rollup.js

I will edit the page to include also tree shaking information

[kazazor]

@umidbekkarimov - I committed a new proposal that IMO gives the users the most information about the different options to optimize the bundle. Please review it and let me know what you think :)

[avocadowastaken]

@kazazor thank you for your time 👍. I have no problems with this.

But as @oliviertassinari mentioned, it's not the only one solution, also another babel plugins could be mentioned.
e.g:

babel-lodash-plugin: #5625 (comment)
babel-plugin-import: #5625 (comment)

But I didn't use them, so I can't help you any further 😓.

P.S. just checked micro example in rollup and it's surprisingly works.

[avocadowastaken]

Oh, just notice that it's for next branch, I didn't test babel-plugin-material-ui with material-ui@1 yet, it's awesome if it works out of the box with next 😄.

[kazazor]

I actually used the two plugins you mentioned, and it works :)
I did not mention it in this doc cause I assumed we're only talking here about optimizing the material-ui imports.. If this is a general optimizations tricks I have plenty more, just think it's not the job of material UI to specify all the ones that doesn't related to itself :)

Please let me double check babel-plugin-material-ui and I'll comment here if we can merge it or not 👯‍♂️

[oliviertassinari]

@kazazor I much prefer the new version :).

I did not mention it in this doc cause I assumed we're only talking here about optimizing the material-ui imports.. If this is a general optimizations tricks I have plenty more, just think it's not the job of material UI to specify all the ones that doesn't related to itself :)

@umidbekkarimov Right, thanks for linking the two other plugins!
I think that we can link the 3 babel plugins. They have different tradeoffs, I would rather make the documentation less opinionated.

• babel-plugin-material-ui target specifically Material-UI
• babel-plugin-import is quite customizable and with enough tweaks works with Material-UI.
  They even have a unit test for it.

[
  {
    "libraryName": "antd",
    "libraryDirectory": "lib",
    "style": true
  },
  {
    "libraryName": "material-ui",
    "libraryDirectory": "components",
    "camel2DashComponentName": false
  }
]

• babel-plugin-lodash, on the other hand, aims to work with all the package.json out of the box.
  People are already using it with Material-UI.

[avocadowastaken]

Just published next version (https://github.com/umidbekkarimov/babel-plugin-material-ui/tree/next).

Had to replace regexp lookup with babylon parser (https://github.com/umidbekkarimov/babel-plugin-material-ui/blob/next/src/utils.js#L34).

So basically it works now (all tests passed, test PRs are welcomed), but without support of material-ui/svg-icons, I guess it's have own package now.

---

P.S. maybe I should add few changes and make it index-file shape agnostic, but it would be hard coded smarter analogue of babel-plugin-import.

[kazazor]

@oliviertassinari so I didn't understand if you want me to also add lodash plugin? :)

Also regarding the import plugin, isn't that what the material-ui plugin brings you..? Why should we use both?

[oliviertassinari]

@umidbekkarimov I'm happy to hear that babel-plugin-material-ui is supporting the next branch :).

so I didn't understand

@kazazor I think that it would be good to document the three babel alternatives available as they have different tradeoffs. They are not supposed to be used at the same time, people will have to pick one if that's something they are interested in. I would rather let the community decide what's the best solution for them.

[oliviertassinari]

@kazazor I'm merging, thanks for the update.