How to Add 🦄LazyLoading to the react🔔 using React Loadable

React Loadable makes lazy loading very easy so that you will need not to worry about downloading a large number of bytes. React Loadable splits your code into chunks so that you only serve required bytes.

First clone my React-Router Boilerplate

git clone [e-mail]:saigowthamr/React-router-v4-boilerplate.git reactlazy

cd reactlazy

npm  i // to install dependencies

npm start // to start dev server

I have made a clear separation of header and router config files so that it is easy to read.

App folder structure should be like above image.

Now let's install ReactLoadable package

npm i --s react-loadable

In our Boilerplate, I have added two routes.

But there is no content in that two routes so that I'm adding now some
dummy content in the app.js file.

	import React, { Component } from "react";
	class App extends Component {
	render() {
	return (
	<div style={{ textAlign: "center", marginTop: "10rem" }}>
	<h1>App is there</h1>
	<p>
	What is Lorem Ipsum?
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
	<h1>Why do we use it?</h1>
	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
	<p>
	What is Lorem Ipsum?
	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
	<h1>Why do we use it?</h1>
	It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
	</div>
	);
	}
	}
	export default App;

view raw app.js(lazy) hosted with ❤ by GitHub

Without Lazy Loading there is the single bundle.js file.

Let's add Lazy loading to our Home route.

For these, I created a lazy.js file in router folder

Now in the lazy.js file, we need to import the react-loadable package and Loading Component.

	import Loading from '../components/Loading';
	import Loadable from 'react-loadable';
	export const App=Loadable({
	loader:()=>import('../components/App'),
	loading:Loading
	})
	export const Posts =Loadable({
	loader: () => import('../components/Posts'),
	loading: Loading,
	})

view raw lazy.js hosted with ❤ by GitHub

ReactLoadable function takes options which are loader property and loading

loader: we need to tell the which component you need to load lazily.

loading: Meantime load this loading component So that user does not see the white screen for a long time.

Now lets update router.js.

	import React from "react";
	import { Route } from "react-router-dom";
	import Header from "../header";
	import {App,Posts} from './lazy'
	class ReactRouter extends React.Component {
	render() {
	return (
	<React.Fragment>
	<Header />
	<Route exact path="/" component={App} />
	<Route path="/posts" component={Posts} />
	</React.Fragment>
	);
	}
	}
	export default ReactRouter;

view raw router.js(lazy) hosted with ❤ by GitHub

Let's see what is happening now when we a load home route. For these, I enabled network throttling.

Have you seen we are now loading in chunks instead of single bundle.js file and meantime we are showing loading component.

CodeRepostiory

Comments

[Marvan N]

when i run build my project i can see the splitted chunk files but while loading its not loading the splitted chunk

[Theofanis Despoudis]

Ideally, we want this on create-react-app!