React JS Code Splitting - Why and How? 

bit.ly/react-delhincr 

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

Why Code Splitting? 

No content

No content

⚠ Performance 

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

hobo-web.co.uk (2018) 

No content

No content

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

⚠ Shipping too much too soon! 

washingtonpost.com 

Every byte counts! 

developers.google.com 

What if we ship our JavaScript on demand? 

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

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

How Code Splitting Works? 

Dynamic import 

No content

• Route-level Code-Splitting • Component-level Code-Splitting 

github.com 

Code Splitting Codelab 

• 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 

• 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 

Thank you!