Code splitting in react js

What is code splitting in React js?

Code Splitting in react js  simply spilt your bundle generated by Wepack or Browserify into multiple and load them dynamically.

 

Why splitting is important: We develop react app. Our code imports many third-party libraries. Bundle generated by web pack or Browserify also gets fatter and fatter.  This fat budle.js file takes time to get downloaded in the browser and user feel the uneasiness with the web application.

 

Advantages: Though you have not reduced code writing you have reduced the code needed to be downloaded. This lazy load can improve the performance of your web application dramatically.

 

Ways to implement Code-Splitting:

  1. import as a function:
    // math.js
    export function add(a, b) {
      return a + b;
    }
    
    import("./math").then(math => {
      console.log(math.add(16, 26)); 
    });

     

     

When Webpack comes across this syntax, it automatically starts code-splitting your app. If you’re using Create React App, this is already configured for you and you can start using it immediately.

If you’re setting up Webpack yourself, you’ll probably want to read Web packs guide on code splitting. Your Webpack config should look vaguely like this.

 

  1. React Loadable Library: React Loadable wraps dynamic imports in a nice, React-friendly API for introducing code splitting into your app at a given component.
    //without code splitting
    
    import OtherComponent from './OtherComponent';
    
    const MyComponent = () => (
      <OtherComponent/>
    );

     

    //with code splitiing
    
    import Loadable from 'react-loadable';
    
    const LoadableOtherComponent = Loadable({
      loader: () => import('./OtherComponent'),
      loading: () => <div>Loading...</div>,
    });
    
    const MyComponent = () => (
      <LoadableOtherComponent/>
    );

     

    React Loadable helps you create loading stateserror statestimeoutspreloading, and more. It can even help you server-side render an app with lots of code-splitting.

  2. Code Splitting in React Router: Though an Idea of splitting the code seems awesome, where to split the code is a tricky decision. The route is the best place to lazy load the things.
    
    import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
    import Loadable from 'react-loadable';
    
    const Loading = () => <div>Loading...</div>;
    
    const Home = Loadable({
      loader: () => import('./routes/Home'),
      loading: Loading,
    });
    
    const About = Loadable({
      loader: () => import('./routes/About'),
      loading: Loading,
    });
    
    const App = () => (
      <Router>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About}/>
        </Switch>
      </Router>
    );

Looking for ReactJS Development Company, hire our dedicated developers!

Also, Read:

Chrome Developer Tools: Editing  and Debugging

How Diff Algorithm is implemented in Reactjs?

On-demand Service: Uber for X prototype| Uber Clone App| Uber Application

An overview of React Portal

React Portal: Portals in react js

Hapi js, Mongoose, MongoDB, Angular.js: A quick way to work

Server-Side Rendering JavaScript – React Js

Higher Order Components(HOCs): Understanding react

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.