React 懒加载让你的代码模块飞起来！

前端

2023-12-05 11:21:33

在软件开发中，我们经常会遇到需要加载大量资源的情况，例如图片、视频、音频等。如果所有资源都在页面加载时一次性加载，那么页面加载速度就会非常慢。为了解决这个问题，我们可以使用懒加载技术。

懒加载是一种按需加载的技术，它可以将资源分成多个块，只有当用户需要使用这些资源时才会加载它们。这可以大大减少页面初始加载时间，提升用户体验。

React 中的路由懒加载是一种特殊的懒加载技术，它可以将代码模块分成多个块，只有当用户访问对应的路由时才会加载它们。这可以大大减少页面初始加载时间，尤其是当你的项目中有许多代码模块时。

React 中的路由懒加载可以使用两种方式实现：

使用 React.lazy() 函数
使用 Suspense 组件

React.lazy() 函数可以让你在代码中定义一个懒加载组件。这个组件在第一次渲染时不会加载，只有当用户访问对应的路由时才会加载。

Suspense 组件是一个特殊的组件，它可以用来包裹懒加载组件。当 Suspense 组件第一次渲染时，它会显示一个加载指示器。当懒加载组件加载完成后，Suspense 组件就会渲染懒加载组件的内容。

以下是使用 React.lazy() 函数实现路由懒加载的示例代码：

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

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

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

export default App;

在上面的示例代码中，我们使用了 React.lazy() 函数定义了三个懒加载组件：Home、About 和 Contact。这些组件在第一次渲染时不会加载，只有当用户访问对应的路由时才会加载。

我们还使用了 Suspense 组件来包裹这些懒加载组件。当 Suspense 组件第一次渲染时，它会显示一个加载指示器。当懒加载组件加载完成后，Suspense 组件就会渲染懒加载组件的内容。

以下是使用 Suspense 组件实现路由懒加载的示例代码：

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

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

const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Home />
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <About />
      </Suspense>
      <Suspense fallback={<div>Loading...</div>}>
        <Contact />
      </Suspense>
    </div>
  );
};

export default App;