bundles.md

Separated frontend bundles

• Status: active
• Date: 2020-09-22

Context and Problem Statement

Most web browsers have good support for es6+ features while serving legacy/polyfills will increase and harm our user experience. According to our google analytics

Browsers	Sessions
Chrome	60.48%
Safari	23.34%
Edge	7.91%
Firefox	5.50%

Benchmark for our current bundles

	Modern	Legacy	Summary
Before gzip	7.51 MB	8.07 MB	6.94 %
After gzip	1.94 MB	2.04 MB	5.15 %

Considered Options

There are two popular approaches

• Using <script type="module"> (pure frontend)
• Based on useragent, backend decides which bundle, modern or legacy, to serves

Pros and Cons of the Options

Option 1

Pros

• is easier to implement because of purely frontend

Cons

• limited by how browsers support module/nomodule (safari 10.1 doesn't work well)
• module/nomodule draws a split only between es5 and es2015+, any newer standards still need polyfills
• we cannot control which browser is "modern" or "legacy"
• <script type="module"> is deferred, if you want to load polyfill scripts before regular bundle script, you have to add defer to that regular bundle script

Option 2

Pros

• we can control which browser is "modern" or "legacy"
• bundle size is smaller

Cons

• involving backend to parse useragent

Links

• https://3perf.com/blog/polyfills/
• https://twitter.com/CharlieCroom/status/129147810401628979