Huge file size - Githubissues

iamhosseindhv / notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

https://notistack.com

Other

3.91k stars 299 forks source link

Huge file size #163

Closed mehmetkose closed 4 years ago

mehmetkose commented 5 years ago

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

withsnackbar

oliviertassinari commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

Yes, it is rather large: https://bundlephobia.com/result?p=notistack@0.9.6

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 commented 4 years ago

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 commented 4 years ago

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

oliviertassinari commented 4 years ago

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

D1plo1d commented 4 years ago

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 commented 4 years ago

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.