One result of the runaway success of Webpack is the rise of multi-megabyte megabundles. Many of the React apps we write don’t make use of widespread platform improvements like CDNs, caching, and HTTP/2. But we could if we just knew how. In this lightning talk, I show you a quick trick to slash your React bundle sizes and improve your TTI.

CONTENTS

0:07 - Intro
0:57 - Disclaimer
1:20 - The problem: bundles are too big
1:28 - performance budgets
2:00 - Your JS Budget is 130kb
2:13 - Average JS per page
2:37 - Top websites are over budget
3:27 - Size of typical React app
4:34 - You already cache these
4:57 - Popularity = network effect
5:18 - 2 choices
5:46 - One weird trick
6:41 - Split React app
6:58 - 3 choices
7:13 - More choices
7:59 - Bonus tip

RESOURCES

Slides
https://slides.com/swyx/never-bundle-react-again/

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

Dynamic CDN Webpack plugin
https://github.com/mastilver/dynamic-cdn-webpack-plugin