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)

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?

Thank you

@swyx

click for bonus tip =>

Bonus Tip

Made with Slides.com