How to use lazy loading in react to reduce the first screen loading time

Recently I'm writing a react-ant-admin integration framework for quickly launching mid- and back-end projects. There are many problems encountered, the most important of which should be the access speed. I just wonder if React can use lazy loading of routes like Vue to reduce the time spent on home page rendering.

So I found a very useful wheel: @loadable/component

use

Install

npm install @loadable/component -D
# or use yarn
yarn add @loadable/component -D

How to use it in routing?

In the src/router/index.js file, write as follows:

import React from "react";
import { Route, Switch } from "react-router-dom";
import routerList from "./routes";

const router = () => {
  return (
    <Switch>
      {routerList.map((item) => {
        const { component: Component, key, path, ...itemProps } = item;
        return (
          <Route
            exact={true}
            key={key}
            path={path}
            render={(allProps) => <Component {...allProps} {...itemProps} />}
          />
        );
      })}
    </Switch>
  );
};

export default router;

In src/router/routes.js file, write as follows:

import loadable from "@loadable/component";

const Error404 = loadable(() => import("@/pages/err/404")); // Corresponding file src/pages/err/404.js
const Home = loadable(() => import("@/pages/home"));
const Demo = loadable(() => import("@/pages/demo"));

const routerList = [
  {
    path: "/",
    key: "home",
    components: Home,
  },
  {
    path: "/demo",
    key: "demo",
    components: Demo,
  },
  {
    path: "*",
    key: "404",
    components: Error404,
  },
];

export default routerList;

In the src/App.js file, write as follows:

import React from "react";
import { BrowserRouter as Router } from "react-router-dom";
import Routes from "./router";
export default function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );
}

At this point, you can go to the page to check whether the js file is dynamically loaded when switching routes. If the js file is loaded after switching the route, it means the lazy loading route is successful!

Loading speed comparison

Before using @loadable/component the server bandwidth was 1M, gzip compression, the file size was about 2MB, and the server request loading time was about 4.3s

Use routing lazy loading. The server bandwidth is 1M, gzip compression, the file size is about 1MB, and the server request loading time is about 1s.

The above is the details of how React uses lazy loading to reduce the first screen loading time. For more information about how React lazy loading can reduce loading time, please pay attention to other related articles on 123WORDPRESS.COM!