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

Reduce package size #370

Open
Schwartz10 opened this issue May 13, 2019 · 3 comments
Open

Reduce package size #370

Schwartz10 opened this issue May 13, 2019 · 3 comments

Comments

@Schwartz10
Copy link

@Schwartz10 Schwartz10 commented May 13, 2019

This is a non-urgent issue, but figured it would be an appropriate time to bring it up bc of the new incoming design system.

image

The aragon/ui bundle size is really big, seems like there should be some easy fixes to minimize this.

For comparison, react-bootstrap is 13k, gzipped 4.1k.

@bpierre

This comment has been minimized.

Copy link
Member

@bpierre bpierre commented May 13, 2019

Absolutely! This is more an ongoing effort than a specific thing, but let’s use this issue to list / keep track of the different things that could be done 👍

Here are some of the things I have in mind:

  • date-fns takes 39% of the bundle size: either find a way to tree shake it properly (we are only using a few modules), or replace it by a smaller library (Day.js?). done
  • lodash-es takes 10% of the bundle size. Find a way to tree shake it, or use the specific lodash modules instead (lodash.memoize, etc.).
  • react-onclickout should be removed from DropDown and ContextMenu, and replaced by Popover.js.
  • BreakPoint should be deprecated and react-media (0.40%) removed. done
  • onecolor (3%) might be a good candidate for being replaced by a smaller library.
  • Remove deprecated components like AragonApp.
  • Remove prop types from the production build.
  • Provide a way to import @aragon/ui in a minimal way, by facilitating tree shaking. If a component is not used by an app, it should be possible to not have it in the final build.

@Schwartz10 About react-bootstrap, would you mind explaining how you are getting these numbers? Could it be because of the way the library is packaged (using commonjs + multiple files)? Bundlephobia reports it to be 40.1k gzipped.

@Schwartz10

This comment has been minimized.

Copy link
Author

@Schwartz10 Schwartz10 commented May 14, 2019

@bpierre all of those strategies sound great!

Sorry, the calculation of react-bootstrap was completely off - I use a vscode plugin, but now just realized the 4.1k gzipped size was based solely on the size of a single component that I imported into a file. My bad!

@bpierre

This comment has been minimized.

Copy link
Member

@bpierre bpierre commented May 14, 2019

That makes sense, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.