Code Splitting in React

Code-Splitting is a feature supported by bundlers like Webpack, Rollup, and Browserify which can create multiple bundles that can be dynamically loaded at runtime.

As websites grow larger and go deeper into components, it becomes heavier. This is especially the case when libraries from third parties are included. Code Splitting is a method that helps to generate the bundles which are able to run dynamically. It also helps to make the code efficient.

Bundling and its efficiency: Bundling is the method of combining imported files with a single file. It is done with the help of Webpack, Rollup, Browserify as they can create many bundles that can be loaded dynamically at runtime.

With the help of code splitting, ‘lazy load’ can be implemented, which means just using the code which is currently needed.

    Using code-splitting:



  • The default way of importing as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import { add } from './math';
    console.log(add(x, y));
      
    // Here x, y are two numbers

    chevron_right

    
    

  • Using code-splitting this can be done as follows:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import("./math").then(math => {
      console.log(math.add(x, y));
    });
      
    // Here x, y are two numbers

    chevron_right

    
    

As soon as webpack gets this type of syntax, code-splitting is started automatically. When using the Create React App, it is already set up and can be used immediately.

The Webpack guide on code splitting should be followed if using Webpack. The instructions can be found here.

When Babel is being used, it has to be made sure that Babel is not transforming the import syntax, but can parse it dynamically. This can be done using this package.

React.lazy and Suspense: As both React.lazy and Suspense are not available for rendering on the server yet now, it is recommended to use Loadable Components for code-splitting in a server-rendered app. 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 Component when this component is rendered first.
The Lazy component should then be rendered inside Suspense Component which helps to reflect some fallback content meanwhile the lazy component loads.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Suspense } from 'react';
const Component = React.lazy(() => import('./Component'));
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
    </div>);
}

chevron_right


The fallback prop can accept any element of React which will be rendered while waiting for the loading of Component. The Suspense Component can be placed anywhere above lazy component. Moreover, multiple lazy components can be wrapped with a single Suspense Component.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Suspense } from 'react';
  
const ComponentOne =
 React.lazy(() => import('./ComponentOne'));
const ComponentTwo =
 React.lazy(() => import('./ComponentTwo'));
function MyComponent() {
  return (
<div><Suspense fallback={<div>Loading...</div>}></div>);
}

chevron_right


Error Boundaries: When some modules fail to load due to any issue, an error will be triggered. These errors can be handled properly and provide a good experience to the user by the use of a suitable error page.

filter_none

edit
close

play_arrow

link
brightness_4
code

import React, { Suspense } from 'react';
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>
);

chevron_right


Route based code splitting: It can be difficult to implement code-splitting in code, the bundles can be split evenly, which will improve the experience for the user.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

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>}> 
);

chevron_right


Named Exports: React.lazy currently supports only default exports. An intermediate module which re-exports as default has to be created if one wants to import a module that uses named exports. This ensures the working of tree shaking and prevents the pulling in of unused components.

filter_none

edit
close

play_arrow

link
brightness_4
code

// 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"));

chevron_right


react-js-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.