Notistack: Huge file size

[mehmetkose]

Seems like it's even bigger than react. How can be possible?

[oliviertassinari]

Most of the bundle size seems to come from Material-UI: Compare notistack (7kB) with Snackbar (23 kB). Which, in turn, seems to come from JSS.

[oliviertassinari]

Dropping MUI v3 support https://github.com/iamhosseindhv/notistack/blob/73ecdf9cc991008f8e4cbbde6acb3102c9d4c711/src/SnackbarItem/SnackbarItem.styles.js#L41

and using clsx instead of classnames could help a bit

https://github.com/iamhosseindhv/notistack/blob/73ecdf9cc991008f8e4cbbde6acb3102c9d4c711/src/SnackbarItem/SnackbarItem.js#L2

[oliviertassinari]

• Migration from the class to the hook API (for the internal building of the library) would help.
• The usage of https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types would help

[andrewmclagan]

Yes, it is rather large: https://bundlephobia.com/[email protected]

As you can see most the size is actually the library this is where most reductions could be made. Although other areas are:

• Using babel transform to remove prop-types for production
• moving to clsx from classnames (this is what mui uses anyway, treeshaking would remove this)
• Export an esm build so tree shaking is enabled - currently its not...

Some big wins without even reducing code size where there would be ... massive ... wins

[oliviertassinari]

Another leverage I have just thought of. Instead of a custom alert component, we could explore using this one: https://material-ui.com/components/alert/.

[andrewmclagan]

Agreed. Currently for a notifications stack, its pretty huge. Its about the same size as react-router.

[oliviertassinari]

@andrewmclagan What other dependencies do you have in your package.json? (looking for opportunities of third-party libraries to reduce bundle size)

[D1plo1d]

Just installed notistack 0.9.11 and it adds ~50KB to my builds using parcel build --experimental-scope-hoisting. I'm hoping more bundle size optimizations can be done. On a small preact + material-ui page that 50KB is 20% of my 250KB bundle.

[iamhosseindhv]

Of course improving bundle size is an ongoing thing and there's always room for improvement, but https://github.com/iamhosseindhv/notistack/pull/268 made a good step towards a smaller bundle size.

Closing this but always open to suggestions.