博客

React.lazy 按需引入资源

Vue 中的动态按需引入组件

Vue 中路由可以使用回调的方法动态按需加载，如下：

// router.js
  {
    path: "/Callback",
    component: () => import("../components/admins/directories/GsuiteCodeCopy.vue")
  },

这样在运行的时候加载页面不会全部加载而是根据路由按需加载，这样对首页加载速度的优化有很大的帮助。

React 动态按需引入组件

那么在 React 中，从 react 的官方文档中我们也找到了 react 提供的解决方案

React.lazy

。

按照 React 官方文档：

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

这里我为了能够为所有的通过 lazy 引入的组件设置同一个 Suspense，因此这里对 lazy 做了简单的封装：

import { lazy, ReactNode, Suspense } from "react";
import CommonLoading from "./CommonLoading";

export default function LazyImport(cb: () => Promise<any>): ReactNode {
  const LazyComponent = lazy(cb);

  return (
    <Suspense fallback={<CommonLoading title={null}></CommonLoading>}>
      <LazyComponent></LazyComponent>
    </Suspense>
  );
}

使用

import LazyImport from "../components/common/tools/LazyImport";
const TenantManagement = LazyImport(() => import("../pages/TenantManagement"));
const Dashboard = LazyImport(() => import("../components/dashboard/Dashboard"));
const MainLayout = LazyImport(() => import("../components/layouts/MainLayout"));

这样动态引入之后，进入路由之后才回去请求对应的 js 文件（打包后的）然后渲染页面，并且在加载完成之前渲染 Suspense 组件的 fallback 属性传入的加载中页面。