React JS Code Splitting - Why and How?

React JS Code Splitting - Why and How?

Slides for "React JS Code Splitting - Why and How?" workshop.

C00289a7b57c00bb0ab55d5e04cc3345?s=128

Arun Michael Dsouza

June 30, 2019
Tweet

Transcript

  1. React JS Code Splitting - Why and How?

  2. bit.ly/react-delhincr

  3. Speakers/Mentors Arun Michael Dsouza
 @amdsouza92 Kartik Agarwal
 @kartikag01

  4. Why Code Splitting?

  5. None
  6. None
  7. ⚠ Performance

  8. • Multiple HTTP requests to complete • Large payload to

    download • Site load speed becomes slow • Multiple files for the browser to process
  9. hobo-web.co.uk (2018)

  10. None
  11. None
  12. • Lesser HTTP requests to complete • Large payload to

    download • Site load speed improves • Lesser files for the browser to process
  13. ⚠ Shipping too much too soon!

  14. washingtonpost.com

  15. Every byte counts!

  16. developers.google.com

  17. What if we ship our JavaScript on demand?

  18. /home vendor.js home.js /settings settings.js /messages messages.js /profile profile.js

  19. • Limited HTTP requests to complete • Less payload to

    download • Site load speed improves drastically • Limited files for the browser to process
  20. How Code Splitting Works?

  21. Dynamic import

  22. None
  23. • Route-level Code-Splitting • Component-level Code-Splitting

  24. github.com

  25. Code Splitting Codelab

  26. • Clone the repo • > git clone https://github.com/React-Delhi-NCR/workshop-02-react-js-code-splitting.git •

    Install dependencies • > npm install • Build project and start server • > npm start • This will start the project server on http://localhost:5000
  27. • https://developers.google.com/web/fundamentals/performance/optimizing- javascript/code-splitting/ • https://webpack.js.org/guides/code-splitting/ • https://reactjs.org/docs/code-splitting.html • https://github.com/jamiebuilds/react-loadable •

    https://medium.com/front-end-weekly/webpack-and-dynamic-imports- doing-it-right-72549ff49234 • https://www.youtube.com/watch?v=0jB4YWgAxUo Further Reading
  28. Thank you!