Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Huge file size #163

Closed
mehmetkose opened this issue Sep 11, 2019 · 9 comments
Closed

Huge file size #163

mehmetkose opened this issue Sep 11, 2019 · 9 comments

Comments

@mehmetkose
Copy link

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

withsnackbar

@oliviertassinari
Copy link
Contributor

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
Copy link
Contributor

Dropping MUI v3 support

paddingLeft: typeof theme.spacing === 'function' ? theme.spacing(1) : theme.spacing.unit,

and using clsx instead of classnames could help a bit

import classNames from 'classnames';

@oliviertassinari
Copy link
Contributor

oliviertassinari commented Oct 9, 2019

@andrewmclagan
Copy link

andrewmclagan commented Nov 29, 2019

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
Copy link
Contributor

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
Copy link

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

@oliviertassinari
Copy link
Contributor

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

@D1plo1d
Copy link

D1plo1d commented Apr 30, 2020

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
Copy link
Owner

iamhosseindhv commented May 15, 2020

Of course improving bundle size is an ongoing thing and there's always room for improvement, but #268 made a good step towards a smaller bundle size.
Screenshot 2020-05-15 at 03 19 22
Closing this but always open to suggestions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants