What is code splitting in react

What is code
splitting in React?

What is code splitting in React?
• Code-Splitting is a feature supported by bundlers like Webpack,
Rollup, and Browserify. So, in this article, we will see what is code
splitting in React.
• As websites grow larger and go deeper into components, it becomes
heavier. Therefore, code Splitting is a method that helps to generate
bundles that can run dynamically. It also helps to make the code
efficient. Because the bundle contains all required imports and files.

Bundling and its efficiency:
• Bundling is the method to combine imported files with a single file.
Moreover, it is done with the help of Webpack, Rollup, Browserify.
Also, with the help of code splitting, ‘lazy load’ can be implemented.
It means just using the code which is currently needed.
• The default way of importing as follows:
import { add } from './math';
console.log(add(x, y));
// Here x, y are two numbers

• Using code-splitting this can be done as follows:
import("./math").then(math => {
console.log(math.add(x, y));
});
// Here x, y are two numbers
As soon as Webpack gets this type of syntax, code-splitting is started
automatically. And when using the Create React App, it is already set
up and can be used immediately.

React.lazy and Suspense:
• React.lazy is helpful for rendering dynamic import as a regular
component.
• Before:
import Component from './Component';
• After:
const Component = React.lazy(() => import('./Component'));

• The Bundle will be loaded on its own which contains the Component
when this component is rendered first. So, the Lazy component
should then be rendered inside Suspense Component. It will help to
reflect some fallback content meanwhile the lazy component loads.
import React, { Suspense } from 'react';
const Component = React.lazy(() => import('./Component'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
</div>);
}

• The fallback prop can accept any React item that is processed while
waiting for the component to load. So, Suspension components can
be placed anywhere above inert components. In addition, a
suspension component can be used to wrap various inert
components.
const ComponentOne =
React.lazy(() => import('./ComponentOne'));
const ComponentTwo =
React.lazy(() => import('./ComponentTwo'));
function MyComponent() {
return (
<div><Suspense fallback={<div>Loading...</div>}></div>);
}

• But when some modules cannot be loaded due to some problem, an
error will be triggered. So, using the proper error pages, these errors
can be handled correctly. It will provide users with a good experience.
import ErrorBoundary from './ErrorBoundary';
const ComponentOne = React.lazy(() =>
import('./ComponentOne'));
const ComponentTwo = React.lazy(() =>
import('./ComponentTwo'));
const MyComponent = () => (
<div>
<Suspense fallback={<div>Loading...</div>}>
</div>
);

• It can be difficult to implement code-splitting in code. So, the bundles
can be split evenly, improving the experience for the user.
import React from 'react';
import Suspense from 'react';
import lazy from 'react';
import {Route, Switch, BrowserRouter }
from 'react-router-dom';
const HomePage = lazy(() =>
import('./routes/HomePage'));
const AboutUs = lazy(() =>
import('./routes/AboutUs'));
const App = () =>
(<Suspense fallback={<div>Loading...</div>}>
);

• Also, React.lazy supports only default exports. Also an intermediate
module that re-exports as default has to be created if you want to
import a module. Moreover, this ensures the working of tree shaking
and prevents the pulling in of unused components.
// Components.js
export const Component = /* ... */;
export const MyUnusedComponent = /* ... */;
// Component.js
export { Component as default } from "./Components.js";
// MyApp.js
import {React, lazy} from 'react';
const Component = lazy(() => import("./Component.js"));

Conclusion:
• So, in this article, we have been through what is code splitting in
React. Also, feel free to comment with your suggestions and
feedback. Moreover, at BOSC Tech Labs, we have a team of highly
experienced React JS developers. They can assist you in developing
your customized web app. So contact us to hire experienced React JS
developers.

What is code splitting in react

More Related Content

Similar to What is code splitting in react

More from BOSC Tech Labs

Recently uploaded

What is code splitting in react