Code-spitting is a feature
supported by bundling tools like web-pack to split the React Application bundle
into multiple bundle files to improve the performance. To understand bundles this
we should first go to the basics of how React applications are bundled and
rendered to the browser.
In the React Environment we see how the React components are compiled and bundled before being rendered to the browser. We use Bable to compile the react Application and web-pack to bundle the compiled JavaScript into a bundle.js file.
If the Application grows bigger and uses many 3rd part components then the size of the bundle will grow larger thereby increasing the initial load time of the Application. To avoid this we can use code-splitting to create multiple bundle files, this way only the bundle required to load the initial set of components will be loaded at first, when the user navigates across the application additional bundles will be loaded dynamically. This lazy loading helps loading the initial component / screen quickly.
To indicate web-pack to create multiple bundle files is to use the dynamic import with the .then clause. This creates a promise and when the promise is resolved we can have access to the imported module.
We can use dynamic imports using the following syntax.
import("./dynamicModule").then(myDynamicModule => {
In the React Environment we see how the React components are compiled and bundled before being rendered to the browser. We use Bable to compile the react Application and web-pack to bundle the compiled JavaScript into a bundle.js file.
If the Application grows bigger and uses many 3rd part components then the size of the bundle will grow larger thereby increasing the initial load time of the Application. To avoid this we can use code-splitting to create multiple bundle files, this way only the bundle required to load the initial set of components will be loaded at first, when the user navigates across the application additional bundles will be loaded dynamically. This lazy loading helps loading the initial component / screen quickly.
To indicate web-pack to create multiple bundle files is to use the dynamic import with the .then clause. This creates a promise and when the promise is resolved we can have access to the imported module.
We can use dynamic imports using the following syntax.
import("./dynamicModule").then(myDynamicModule => {
// Use the myDynamicModule here
});
Notice that the import statement is wrapped inside a then(..) clause which creates the promise to dynamically load the module from different bundle files. Once web-pack notices the dynamic import it will create a separate bundle file for the dynamicModule.
In the context of React applications, we can use the react.lazy to enable code-splitting and lazy load React components from different bundle files as follows.
import React, {Suspense} from 'react';
Notice that the import statement is wrapped inside a then(..) clause which creates the promise to dynamically load the module from different bundle files. Once web-pack notices the dynamic import it will create a separate bundle file for the dynamicModule.
In the context of React applications, we can use the react.lazy to enable code-splitting and lazy load React components from different bundle files as follows.
import React, {Suspense} from 'react';
const ChildComponent =
React.lazy(() => import('<dependent component path>'));
class App extends React.Component {
render() {
return (
<div>
<Suspense fallback={<Fallback
UI text>>
<Dependent
Component/>
</Suspense>
</div>
);
};
}
No comments:
Post a Comment