This is an exercise to explore the real world performance improvements from simply using unpkg for bundling popular packages rather than shipping a megabundle. Inspired by Michael Jackson's 2017 React Rally talk: https://www.youtube.com/watch?v=2rhkgB8Cohc
Our web apps, developed on localhost, constantly bump up against Real World Web Performance Budgets when deployed.
- 45% of mobile connections occur over 2G
- 75% of mobile connections are over 2G or 3G
Alex Russell's recommended constraints:
- <5s first load TTI
- 400kbps link with 400ms RTT
This translates to ~130kb of critical resources, including JS. >70% of websites are over this limit
Average JS per page:
- Nov 2010: 113kb
- Nov 2016: 420kb
Other real sites:
- Squarespace.com WYSIWYG client: 3mb
- Facebook.com: 2.1mb
- GraphQL Tutorial (bundles GraphiQL): 1.5mb
- Youtube.com: 902kb
- Reddit.com: 890kb
- Ecommerce site: 826kb
- Twitter.com: 579kb
- Squarespace.com site: 506kb
- Google.com: 327kb
- Amazon.com: 307kb
The very minimalist webapp included here is 189kb (bundled with the big bundle methodology), 61kb gzipped.
Swapping dependencies out for CDN resouces brings this down to 5kb.
Using the platform means: HTTP/2 concurrent load and clientside caching of CDN resources.
We put together a single page site that has a bunch of libraries that might be found on a modern react app. This would include popular libraries like
- redux
- redux thunk
- react-redux
- axios
- react-router
All together the minified Javascript for this came up to 189kb.
Once we load these commonly used libraries from a CDN (using dynamic-cdn-webpack-plugin, it is just a few lines), the bundle size falls to 5kb.
With the parallel loading of Http/2 and caching of modern browsers that have visited other sites that have these packages, the load times should be significantly faster for only a few minutes of work.
These are of course very small wins. Further easy wins are:
- code splitting your routes
- code splitting via webpack in particular making a
vendors.jsfor bundling dependencies without relying on a CDN. - Use webpack bundle visualizer to see where your biggest imports are. Sometimes you can import specific modules instead of entire libraries.