Scribd
Upload
22 views

Code Splitting: React - Lazy and Suspence

Code splitting in React allows splitting code into different bundles that can be dynamically loaded at runtime using features like lazy loading and dynamic imports. This improves performance by loading code on demand. React.lazy and Suspense allow lazy loading components. Libraries like react-loadable provide APIs for component-level code splitting. Code can be bundled and split using tools like Webpack. Source map explorer helps analyze bundles and identify areas for code splitting to reduce size.

Uploaded by

Sheikh Muhammed Shoaib
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
22 views

Code Splitting: React - Lazy and Suspence

Code splitting in React allows splitting code into different bundles that can be dynamically loaded at runtime using features like lazy loading and dynamic imports. This improves performance by loading code on demand. React.lazy and Suspense allow lazy loading components. Libraries like react-loadable provide APIs for component-level code splitting. Code can be bundled and split using tools like Webpack. Source map explorer helps analyze bundles and identify areas for code splitting to reduce size.

Uploaded by

Sheikh Muhammed Shoaib
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 3

Code Splitting

-> is a feature supported by bundlers like Webpack, Rollup, and


Browserify, which can create mulitple bundles that can be dynamically
loaded at runtime.

-> Bundling is the method of combining imported files with a single file. It
is done with the help of webpack, rollup etc.

-> With the help of code splitting lazy load can be implemented just using
the code which is currently needed.

React.lazy and suspence


-> React.lazy method makes it easy to code-split a React application on a
component level using dynamic imports

-> const AvatarComponent = lazy(() => import(‘./AvatarComponent’));

Component based code splitting in react


-> react-loadable provide api for code splitting.
-> if you are using create react app, webpack automatically takes care of
splitting the bundle and loading chunks on demand under the hood.

-> Suppose we want to load and render the component Example on


demand.
-> When a user click or navigate to the particular route
-> all we need to do is to under react-loadable.
-> Now we can use Example just like a normal React component. The
module Example.js and its dependencies are no longer a part of the main
JS bundle and are loaded asynchronously.
Chunking multiple component together.

-> The key change here is dynamic import, instead of a single component,
we are importing all of index.js and extracting the required component in
the promise callback.

CHUNK NAMING AND OPTIMIZATION

-> When we build application for the production after implementing the
code splitting, we get many chunks of JS
-> After looking at this output, we might want to remove some of the last
few chunk since they’re really small.
->But we don’t know which split is causing which chunk to be created.
This is where chunk naming can helpful.

-> we can use a magic comment inside the import that tells Webpack to use
the given name for a specific chunk.

-> cosnt AsyncSettingPage = Loadable({


loader: () => import(‘./SettingsPage” /* webpackChunName: “
settings” */,
loading: Loader
});

-> Once all the chunks are named, we can identify the splits that lead to
smaller chunks.

-> At this point, we can choose to remove or combine some of the smaller
chunks ( < 20-30KB in size), since the overhead of loading a 5KB chunk
might be higher than combining with one of the larger chunks.
-> Play around with different splits and see what works best for you.

Analyzing the Bundle Size


-> Source map explorer analyzes JS bundles using the source maps.
-> This helps you understand where code bloat is coming from.
-> To add Source map explorer to a Create React App project, run the
following command:
npm install –save source-map-explorer

-> Then in package.json, add the following line to scripts.

“scripts”: {
“analyze”: “source-map-explorer build/static/js/main.*”,
}

-> Then to analyze the bundle run the production build then run the
analyze script.
Npm run build
npm run analyze

Source map explorer


-> Look for the largest contributors to the bundle size as possible
candidates for code-splitting.
-> Also consider removing or pruning large dependencies from
node_modules.

You might also like