Save 37% off PRO during our Black Friday Sale! »

Leveraging code-splitting in React apps

3261558e341cf0c94af163c3a0f06ad9?s=47 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.

3261558e341cf0c94af163c3a0f06ad9?s=128

Glenn Reyes

September 22, 2017
Tweet

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

  5. None
  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.”
  9. None
  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?

  20. None
  21. None
  22. None
  23. None
  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

  33. None
  34. bundle + home

  35. None
  36. None
  37. bundle + home + profile

  38. None
  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

  47. None
  48. Asynchronous import

  49. Async functions and import();

  50. None
  51. How with React?

  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  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

  64. None
  65. Where to code split?

  66. Split app and vendor #1

  67. None
  68. None
  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/
  76. None
  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