React JS Code Splitting - Why and How?

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

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?
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)
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
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!