Effective Code Splitting in React: A Practical Guideby@aakashns
32,627 reads
32,627 reads

Effective Code Splitting in React: A Practical Guide

by Aakash N S5mApril 9th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

Large bundle sizes and slow startup is a common problem faced by single-page applications. The goal is to keep individual chunks under 100–150 KB, so that the application becomes interactive within 4–5 seconds. The open source library react-loadable provides a React-friendly API for code splitting. The modules and its dependencies are no longer a part of the main JavaScript bundle and are loaded asynchronously when rendered for the first time. If you're using create-react-app, Webpack automatically takes care of splitting the bundle and loading chunks on demand.

Company Mentioned

Mention Thumbnail
featured image - Effective Code Splitting in React: A Practical Guide
Aakash N S HackerNoon profile picture
Aakash N S

Aakash N S

@aakashns

Share Your Thoughts

About Author

Aakash N S HackerNoon profile picture
Aakash N S@aakashns

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
L O A D I N G
. . . comments & more!