Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React JS Code Splitting - Why and How?

React JS Code Splitting - Why and How?

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

Arun Michael Dsouza

June 30, 2019
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

  1. React JS Code Splitting - Why and How?

    View full-size slide

  2. bit.ly/react-delhincr

    View full-size slide

  3. Speakers/Mentors
    Arun Michael Dsouza

    @amdsouza92
    Kartik Agarwal

    @kartikag01

    View full-size slide

  4. Why Code Splitting?

    View full-size slide

  5. ⚠ Performance

    View full-size slide

  6. • Multiple HTTP requests to complete
    • Large payload to download
    • Site load speed becomes slow
    • Multiple files for the browser to process

    View full-size slide

  7. hobo-web.co.uk (2018)

    View full-size slide

  8. • Lesser HTTP requests to complete
    • Large payload to download
    • Site load speed improves
    • Lesser files for the browser to process

    View full-size slide

  9. ⚠ Shipping too much too soon!

    View full-size slide

  10. washingtonpost.com

    View full-size slide

  11. Every byte counts!

    View full-size slide

  12. developers.google.com

    View full-size slide

  13. What if we ship our JavaScript on demand?

    View full-size slide

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

    View full-size slide

  15. • Limited HTTP requests to complete
    • Less payload to download
    • Site load speed improves drastically
    • Limited files for the browser to process

    View full-size slide

  16. How Code Splitting Works?

    View full-size slide

  17. Dynamic import

    View full-size slide

  18. • Route-level Code-Splitting
    • Component-level Code-Splitting

    View full-size slide

  19. Code Splitting Codelab

    View full-size slide

  20. • 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

    View full-size slide

  21. • 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

    View full-size slide