Library doesn't support tree shaking, as well as breaks material-ui's own tree shaking
CodySchaaf opened this issue · comments
As you can see here:
https://github.com/CodySchaaf/material-ui-formik
When you include any of this libraries components it ends up pulling in all of material-ui
's components that are imported into formik-material-ui
because of how the library builds all of the exports into a single dist/index.js file.
Just material-ui:
After adding material-ui-formik
does the issue still happen if you import the components directly without using the index?
You will have the same isue if you import directly from the material ui top level
@cliedeman No you won't. In my first screen shot I am importing the components from the top level (as you can see in the linked repo CodySchaaf/material-ui-formik@b0a81b2), and only the ones I use are in the bundle. Most modern libraries are bundled in a way that that is supported without issue. See https://material-ui.com/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking
If you're using ES6 modules and a bundler that supports tree-shaking (webpack >= 2.x, parcel with a flag) you can safely use named imports and still get an optimised bundle size automatically:
import { Button, TextField } from '@material-ui/core';
Idk if it as simple as adding "sideEffects": false
to your package.json like material-ui has, or if you need additional rollup config.
It also doesn't look like you can actually hit anything but the index for this project because the package doesn't have anything else (the other files are just type files without any code).
Not sure if you would have better luck using the es6 one, but like with other packages it should pick that one automatically if it is more appropriate.
ah just kidding webpack already intuitively picks the es6 module one https://github.com/webpack/webpack/blob/52184b897f40c75560b3630e43ca642fcac7e2cf/lib/WebpackOptionsDefaulter.js#L337
@CodySchaaf try
import { Checkbox } from 'formik-material-ui/dist/Checkbox';
Edit: this does not work
if you confirm that works then you can use an eslint rule like
"no-restricted-imports": ["error", "formik-material-ui"],
to ban the top level import.
And we can add a FAQ entry about this
@CodySchaaf try formik-material-ui@4.0.0.alpha.1