Never Bundle React Again

@swyx

ReactNYC ⚡ Feb 2018

https://github.com/sw-yx/react-unpkg/

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)

https://sw-yx.github.io/react-unpkg/bigbundle/bundleSizeStats.html

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)

https://sw-yx.github.io/react-unpkg/smallbundle/bundleSizeStats.html

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

https://github.com/sw-yx/react-unpkg/

click for bonus tip =>

Bonus Tip

webpack -p

https://www.codementor.io/drewpowers/high-performance-webpack-config-for-front-end-delivery-90sqic1qa