Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Leveraging code-splitting in React apps

Glenn Reyes
September 22, 2017

Leveraging code-splitting in React apps

Dynamic imports have arrived! With the new import() proposal we have got a convenient capability to load React components whenever rendered. Our mission now is to build faster web apps and deliver as less code as needed. But how? In this talk we will leverage code-splitting with minimal effort and discuss the page speed impact.

Glenn Reyes

September 22, 2017

More Decks by Glenn Reyes

Other Decks in Programming


  1. Good reads •Straightforward code splitting with React and Webpack

    webpack •ES proposal: import() – dynamically importing ES modules
 http://2ality.com/2017/01/import-operator.html •Tree Shaking vs Code Splitting: A Real-World Benchmark
 https://medium.com/outreach-engineering/tree-shaking-vs-code-splitting-a- real-world-benchmark-bbbf36245db3 •Progressive Web Apps with React.js: Part 2 — Page Load Performance
 https://medium.com/@addyosmani/progressive-web-apps-with-react-js- part-2-page-load-performance-33b932d97cf2 •The PRPL Pattern
  2. Recap ✨ import(); ✨ Load code as needed ✨ Up

    to 5x faster page load ✨ Split vendor, at route & component ✨ create-react-app & Next.js @glnnrys glennreyes