If you know about web performance, then you might be familiar with the concept of Lazy Loading.As the name suggest, this technique is used to load website data lazily or with some sort of delay.
According to mdn web docs - "Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times."
I know , the definition is bit hard to understand. In simple terms it says that only those resources are loaded to browser that are needed to render the page, all other resources are blocked away. It gives two major advantages, first , it reduces the loading time and storage of the web browser and second, it also reduces the bandwidth of your internet.
Now that you are conscious with the primary understanding of the Lazy Loading, we will explore how this concept is utilised in React. As you are familiar, React uses component approach to render the webpage. For smaller websites, loading all the components at once may not affect the performance, but for large websites, loading all the resources at once can be a nightmare. So in react we use lazy
and Suspense
to apply this strategy.
Lets learn how to apply in our app. But wait, first I'll show you what does it mean to load resources at once.
I have created 3 routes for my app using react-router-dom
App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Angular from "./pages/Angular";
import Vue from "./pages/Vue";
import "./App.css";
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/angular" element={<Angular />} />
<Route path="/vue" element={<Vue />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
I have create three routes for my app. Each webpage has heading and a image.
- - Run the React server and open your browser.
- - On your server port , open
chrome-dev-tools
by inspecting the page or pressctrl+shift+i
. - - Navigate to
sources
tab . - - In your
localhost
folder you can verify that, although we have no use of other routes data to displayHome
component. But still it is loading all the resources.
Now you can see that all extra resources are using web storage and bandwidth that can be reduced.
Lets try to implement Lazy Loading Strategy in our app.We will create a 'loading' screen for our app.
Loader.jsx
import React from "react";
const Loader = () => {
return (
<>
<div>
<h1>...</h1>
</div>
</>
);
};
export default Loader;
For developers sake , React provide inbuilt tool lazy
and Suspense
We have to make some changes in the App.jsx
where we define our routes.
App.jsx
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { lazy, Suspense } from "react";
import Loader from "./Loader";
import "./App.css";
const Home = lazy(() => import("./pages/Home"));
const Angular = lazy(() => import("./pages/Angular"));
const Vue = lazy(() => import("./pages/Vue"));
function App() {
return (
<>
<BrowserRouter>
<Suspense fallback={<Loader />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/angular" element={<Angular />} />
<Route path="/vue" element={<Vue />} />
</Routes>
</Suspense>
</BrowserRouter>
</>
);
}
export default App;
And that's it. We have added lazy loading in our react app.
Voila!.
To verify that our lazy loading is working properly, lets again check our sources
tab in chrome dev tools
.
As it is visible, our app load only those resources that are needed to render Home page.
This is just a small app, so this doesn't seem to effect much performance, but as your app grows managing resources become crucial.
We can apply lazy-loading concept to any component , not just on routes.Also, for Loader
we can use any spinner, progress, text, image as per our requirement.
For this tutorial I have used Vite for building my react app , but it works similar to create-react-app
.
I hope you got get the better understanding of lazy loading and how we can use it in out react app.
Feel free to comment if you have any doubt.
References -
mdn
react docs
Thank you for reading.
Connect me on sidme.tech
Top comments (0)