Why you need bundle size monitoring

Recently translations for Brazilian Portuguese reached the point where we could enable them inside the Outline interface (as a rule I wait until there is at least 90% translation coverage before enabling the option in language settings).

This seemingly small task ended up being a fantastic example of how working on the web with it’s black hole of dependencies can often spiral in ways that are mostly unpredictable.

To enable a new language, it’s also important to enable the locale in the date-fns library to ensure that dates and times through the UI are formatted correctly. Unfortunately date-fns was out of date enough that pt_BR didn’t exist and an updated version was needed. Maybe you can see where this is going?

Oh crap – upon upgrading we were struck with a 12% increase in overall application size (big thanks to RelativeCI for so usefully exposing this info directly within pull requests). And so began a week of experiments, changing of import styles, auditing of async chunks, and more.

We were able to finally get this down to a reduction in the original bundle size through a combination of:

• Restore the webpack config for mainFields to the default value so that it properly considered dependencies exporting es6 modules
• Ensuring the components imported as an async chunk in one place are also imported async elsewhere
• Changing the import syntax from import format from "date-fns/format" to import { format } from "date-fns"
• Re-configuring webpack splitChunks to reuse existing chunks

I think this really speaks to the importance of having bundle size exposed in the PR process!