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.

Transcript

1. Code Splitting in React Apps Leveraging @glnnrys
2. Witaj Warszawa!
3. Glenn Reyes @glnnrys
4. Glenn Reyes ! Source: Stefan Steinbauer at unsplash.com @glnnrys
6. Code Splitting
7. What is
 Code Splitting? ✂
8. – webpack.js.org “Splits your code into various bundles which can then be loaded on demand.”
10. /home
11. /home /profile
12. bundle.js
13. /home /profile
14. /home /profile ✂ snip! ✂ snap!
15. bundle.js home.js profile.js
16. /home /profile
17. /home
18. bundle.js home.js profile.js
19. Why should I care?
24. Why should I care?
25. it’s simple
26. How does Code Splitting increase performance?
27. Caching
28. Load code 
 asynchronously
29. Load code on demand
30. Load code as needed
31. How does it work?
32. glennreyes/code-splitting-example
34. bundle + home
37. bundle + home + profile
39. A Beginner's Guide to Code Splitting Your React App
 https://youtu.be/bb6RCrDaxhw?t=5m51s Before
40. Dynamic import import();
41. Function-like syntactic form
42. tc39/proposal-dynamic-import
43. syntax-dynamic-plugin
44. https://webpack.js.org/guides/code-splitting https://survivejs.com/webpack/building/code-splitting
45. Sync vs async imports
46. Synchronous import
48. Asynchronous import
49. Async functions and import();
51. How with React?
58. react-loadable https://github.com/thejameskyle/react-loadable
59. sync async
60. Only 3 more lines of code
61. create-react-app https://github.com/facebookincubator/create-react-app
62. What about SSR?
63. Next.js https://github.com/zeit/next.js
65. Where to code split?
66. Split app and vendor #1
69. Split at route level #2
70. webpack chunk names /home.360c0ce7.chunk.js /profile.8b26492e.chunk.js
71. Split at component level #3
72. Chart.js
73. Predict user intent and prefetch
74. Where to code split ✂ App and vendor ✂ Routes ✂ Components
75. Good reads •Straightforward code splitting with React and Webpack
 https://hackernoon.com/straightforward-code-splitting-with-react-and- 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
 https://developers.google.com/web/fundamentals/performance/prpl-pattern/
77. Recap ✨ import(); ✨ Load code as needed ✨ Up to 5x faster page load ✨ Split vendor, at route & component ✨ create-react-app & Next.js @glnnrys glennreyes