react Lazy Loading

Improving Frontend Performance with Lazy Loading and Code Splitting in React

Improving Frontend Performance with Lazy Loading and Code Splitting in React

Performance is essential for creating a flawless user experience in the web framework for the development of today. High bounce rates and unhappy users might result from slow-loading online applications. In this article, we will be using react components lazy and code splitting which effectively helps in enhancing the frontend performance.

Understanding Lazy Loading and Code Splitting

Lazy Loading

Lazy loading is a strategy that holds off on loading some materials until they are required, such as JavaScript files or photos. Lazy loading enables you to load assets only when a user requests them, speeding up initial page load times and conserving bandwidth.

Utilizing React’s React. lazy() function, lazy loading generally entails dynamically importing components or modules in a React environment. Your application will run more efficiently if you use this function to load components only when they are needed.

Syntax:const MyComponent1 = React.lazy(() => import(‘./MyComponent1’));

Practical Examples

Let’s get started with some real-world examples to show how Lazy loading is used in a React application.

Consider a React application with many views or pages that you want to lazy load one at a time to reduce the initial load time. How to do this is as follows:

import React, { lazy, Suspense } from 'react';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Suspense>
    </div>
  );
}

In this example, the Home, About, and Contact components are dynamically imported only when their respective routes are called using the React.lazy() function. Users see a loading indicator while the <Suspense> component is being fetched thanks to the component’s fallback loading feature.

Code Splitting

Code splitting is the process of splitting up the codebase of your program into smaller, more manageable portions, or “bundles.” The initial bundle size can be decreased, and load speeds can be improved, by loading these bundles independently based on user interactions or routes.

Code splitting is already supported by React thanks to a feature called “dynamic imports.” You can divide your program into smaller, separately loadable pieces using dynamic imports. The necessary code is fetched and run, improving the user experience, when a user navigates to a specified route or interacts with a feature.

Syntax

import { sub } from './math';

console.log(sub(x, y));  // Here x, y are two numbers

Practical Examples

Let’s get started with some real-world examples to show how code splitting is used in a React application.

Code Splitting Routes

Let’s now examine code splitting for routes. Consider a huge application with many routes that you wish to load code chunks for. Here’s how we can do it:

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

In this example, code splitting is used to load the Home, About, and Contact components only when the corresponding routes are accessed. This strategy reduces the initial bundle size and speeds up how quickly the application loads.

Benefits of Lazy Loading and Code Splitting

Including lazy loading and code splitting in your React application has a number of benefits:

  • Faster Initial Load: The faster users can access your application is due to the upfront loading of only the necessary code.
  • Improved User Experience: Users benefit from a smoother experience, particularly on slower connections or devices, with smaller initial bundles.
  • Optimized Bandwidth: By loading only what is required, lazy loading and code splitting save data for consumers with limited data plans.
  • Better SEO: Faster will be the load time of the website. The search ranking of that website will also be high.SEO helps in the ranking of the website to come first in search.

Conclusion

Two effective methods for enhancing frontend performance in React apps are lazy loading and code splitting.We can improve the user experience by increasing the speed of load time and optimize our application.
Lazy Loading and code splitting must be used while creating project as it helps in enchancing user epxerience and provides more responsive website.

If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Follow: CodewithRandom
Author: Arun



Leave a Reply