Paste Bundle Size

[hharnisc]

In a recent build of the new Console we've got a tool that fails the build if any bundle gets larger than 150KB (gzipped). Today it failed and I added some tooling to visualize all the dependencies and noticed that Paste was the largest bundle (~380KB unzipped):

We've got all icons loading as separate chunks -- but was wondering if there's more that could be done on our end or possibly in Paste to get the size down so the vendor bundle that includes Paste could be reduced in size?

[SiTaggart]

Hi @hharnisc, we'll have a chat internally and see if we can think of some actions, but I'll drop initial brain dump here for now.

Obviously we take bundle size pretty seriously, we track it for each package on every Pull Request, and for Core itself I'm actually pretty impressed it's still under 40kb Gzipped for the amount of components in there, ~40 ish. But of course, the problem comes with our venders. You're basically using all the pretty chunky components, Combobox requires Downshift, Modal requires Reach Modal and React-spring, Menu, Disclosure, maybe Popover requires Reakit (A sub-set as we don't include what we're not using), not to mention the styling library which is essentially Emotion and styled system.

They're complex components and unfortunately pretty sizable (though the most sizeable is roughly 15kb gzipped, so not dramatically wildly sized).

The initial intention of individually versioned components, was so that you would create a bundle with just the stuff you require for your product. That might have a limited run on the Navigation project though because of the components you're using and their requirement on venders.

Each module is tree shakable, though I am no expert of front end infra I'm afraid so I don't know exactly how far you'd get with that either.

We'll have a think though and see what we think as a team.

[TheSisb]

Hey @hharnisc!

In a recent build of the new Console we've got a tool that fails the build if any bundle gets larger than 150KB (gzipped). Today it failed and I added some tooling to visualize all the dependencies and noticed that Paste was the largest bundle (~380KB unzipped):

I must admit, seeing a 380kb unzipped bundle made me do a bit of double take. I’m surprised Paste grew so much in a single year! My first reaction had me comparing to other design systems, and it looks like we aren't too bad!

https://bundlephobia.com/result?p=@chakra-ui/[email protected] (101kb gzipped)
https://bundlephobia.com/result?p=@twilio-paste/[email protected] (40kb gzipped)
https://bundlephobia.com/result?p=@material-ui/[email protected] (92kb gzipped)
https://bundlephobia.com/result?p=@shopify/[email protected] (106kb gzipped)

Of course, these numbers are subject to change as all these systems are still under active development and some deps are omitted from each.

Here’s a breakdown of my high level thoughts on where the kbs are going in your screenshot:

Core bundle

137kb is large, but this is loading everything in Paste. You may only need a subset of core. This is why we bundle each package separately. For example, if you’re only using Buttons, Anchors, and Cards you can just load those packages and omit the rest of core. So you can gain some savings here. If comparing Paste to a system like Bootstrap, please do keep in mind that since Paste uses CSS-in-JS the JS bundle also includes the CSS (but just the CSS you need!).

Reakit-Library

This library gzips pretty well and allows us to deliver a lot of component value very quickly. Down the line, we might investigate removing this dependency, but only if we think we can maintain the underlying components just as well. Gonna punt on trying to optimize this package for now.

Styling-Library

This also gzips pretty well, and this is the backbone of our entire system. This enables CSS-in-JS, locally scoped CSS, theming, tokens passed via props, and more. Styled-system is pretty minimal, so most of this size comes from emotion. Lots of teams are already using emotion, so swapping over to this dependency should simplify things for folks.

🤔 Because we wrapped this package, we can always swap out emotion down the line to a leaner CSS-in-JS solution without any downstream breaking changes. Punting work on this for now though.

Animation-Library

Currently only used by the Modal component, but we plan on making this a key player for all animations in Paste. This is just a wrapper around react-spring, one of the best solutions available for React today. If teams are trying to build animations, this is the library to use. Not much we can do here. Overall this should reduce bundle sizes for teams that are using a bunch of alternate animation solutions.

Dropdown-Library

A wrapper for Downshift, which is the de facto standard for dropdowns and comboboxes in React. Comboboxes are very complex to build correctly with accessibility. This was a reasonable import on our end. We’re open to alternatives if they seem better.

Theme

Our tokens and provider. This gzips well. Might be some light improvements here, but the main gain will come from consolidating into one theme in the future.

---

Upon review this all doesn't seem too bad for the power we get out of these packages. However, this probably doesn't help you much today.

We've got all icons loading as separate chunks -- but was wondering if there's more that could be done on our end or possibly in Paste to get the size down so the vendor bundle that includes Paste could be reduced in size?

Things you can do to improve performance

• Don't use core, import packages you need directly. If you aren't using Modal, this already removes the animation-library dependency.
• Make sure your bundles are tree-shaken. All of Paste's packages are sideEffect free, so if your configs are doing the right thing (harder said than done, I know), lots of Paste will be shaken out of the final package.
• Don't bundle everything into one JS file. With HTTP2 and browser caching, it might be more effective if you sent over many tiny JS files rather than 1 big one. Bundling was cool pre-HTTP2 but it is no longer necessary. Also, it's less strain on users if you update your code because they would only need to refetch a smaller JS file and most should remain cached.
• All of Paste supports SSR, so that may be another venue to investigate for your team if you’re noticing any slowness for TTFR / TTI.

---

I also spent some time investigating our architecture generally. It’s likely that Paste is just going to grow over time as teams need more components for their UIs. What are things we can do at Twilio - other than what I listed above - that would solve large bundle sizes down the line?

Interestingly, two React frameworks that are renown as being very performant load boatloads of JS. Gatsby’s website loads 1.9mb of JS (550kb gzipped), NextJS loads 530kb (161kb gzipped). They still load blazing fast, because they leverage SSR and bundle splitting. (sidebar: relevant Tweet)

At a high level, Paste might be bigger than what an individual team’s project might’ve been if they allocated a bunch of resources to optimizing their JS. However, when you take disparate teams solving similar problems at Twilio scale, having a common base resource reduces the total load on users jumping from product to product. For example, we have one supported animation library now. In the past we may have used react-motion, jquery, anime.js, greensock and more all in the same product.

I’d love for some internal web infrastructure team to host versioned Paste packages on a CDN, and provide tooling to load Paste from the CDN when imported in product code. This would make the load negligible because everything would be aggressively cached and shared between products.

---

If you observe any inefficiencies in Paste do let us know. Performance is a feature (old school cool) and we will prioritize fixing any reported measurable performance issues.

[diegohaz]

Dropdown-Library

A wrapper for Downshift, which is the de facto standard for dropdowns and comboboxes in React. Comboboxes are very complex to build correctly with accessibility. This was a reasonable import on our end. We’re open to alternatives if they seem better.

FYI, we're working on a Combobox module on Reakit that will hopefully save up to 10 kB (gzipped) on projects that are currently using both Reakit and Downshift (considering that they would remove Downshift). This will be possible because Combobox will reuse a lot of code from other modules like Menu and Popover.

[SiTaggart]

Let us know if we can help in anyway @diegohaz

[TheSisb]

I'm subbed to the newsletter and saw the email about that a few weeks ago! Looking forward to it 👍