Reduce package size

[Schwartz10]

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.

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]

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 :+1:

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]

@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]

That makes sense, thanks!

[bpierre]

Related PR: https://github.com/aragon/aragon-ui/pull/709

[ECWireless]

Planning on working on...

react-onclickout should be removed from DropDown and ContextMenu, and replaced by Popover.js.

... if it hasn't already been started by someone else (although it looks like DropDown has already been updated).

[bpierre]

Hi @ECWireless, yes that would be helpful!

DropDown has been updated indeed, but it would be nice to have ContextMenu using Popover. I opened this draft some time ago, it might be useful to have a look: https://github.com/aragon/aragon-ui/pull/652

I remember having positioning issues in this PR, that would have required to modify Popover. Now that Popper.js 2 is out, we might also want to move to this version (only Popover is using it), which might help to port ContextMenu to Popover.

Let me know if you have any question!

[ECWireless]

@bpierre I'm going through the devbox of the contextmenu-popover branch, and just want to make sure I know what the positioning issue was. Is this the problem here?