React JS Code Splitting - Why and How?

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!