Never Bundle React Again
Disclaimer
I am not a perf expert
just sharing some stuff I learned
but I care
and so should you
(its easy)
The Problem:
Bundles are Too big
PERFORMANCE budgets
Your JS budget is 130kB
Average JS per page?
Average JS per page
504kb
httparchive.org/trends.php?s=All&minlabel=Nov+15+2010&maxlabel=Jan+15+2018
>70% of websites are over BUDGET
- 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
Let he who is without sin...
Size of Typical react App?
- React
- prop-types
- ReactDOM
- React-Router-DOM
- Redux
- Redux-Thunk
- React-Redux
- Axios
Typical REact App
189kb (61kb gzipped)
You already Cache these
Popularity = network effect
2 choices
- Big Bundle but no CDN
- Small Bundle but No ES Modules
One weird trick
One weird trick
One weird trick
One weird trick
CDN + ES Modules = 💰💰💰
Split REact App
5kb (2kb gzipped)
3 choices?
- Big Bundle but no CDN
- Small Bundle but No ES Modules
- Small Bundle with CDN
More choices?
- Big Bundle but no CDN
- Small Bundle but No ES Modules
- Small Bundle with CDN
- Vendor.js code using Webpack CommonsChunkPlugin
- Async Loading e.g. React Router Route Splitting
- ESM in the Browser?
- ...
Thank you
@swyx
click for bonus tip =>
Bonus Tip
