React丨用户体验丨hook版 lazy loading

我们都知道随着单页应用 bundle 的体积不断增大，会造成首次加载时间过长（白屏时间过长），过程中会加载了我们首页没有必要看到的一些 页面/组件 js文件，所以我们需要对 bundle 文件进行拆分来进行按需加载（懒加载），这里需要用到 webpack 支持的代码拆分（code splitting）。

React.lazy 和 React.Suspense 是一对好兄弟，它两就可以完成一个优雅的懒加载方案，让我们来看看它们在 hook 中的使用吧。

文章篇幅有一丢丢长，但请耐心品它 ~

我们先来看看 React.lazy

pages/page1.tsx

import React from "react";
const Index: React.FC = () => {
  return <div>my name is page1，i am very lazy</div>;
};
export default Index;

App.tsx

// ... 
const Page1 =   React.lazy(() => import("./pages/page1"));
// ...
export default function App() {
  return (
    <Router>
      <div id="app">
        <Switch>
          <Route path="/page1" component={Page1} />
        </Switch>
      </div>
    </Router>
  );
}

这里我们直接通过webpack支持的代码拆分写法 () => import("./pages/page1")，但是报了个错：

上面报错说的是需要与 React.Suspense 配合做 loading 或者占位符，所以说它们是好兄弟，形影不离 。那我们来满足一下它们吧~

React.lazy + React.Suspense

App.tsx

const LazyPage1 = React.lazy(() => import("./pages/page1"));

const Page1: React.FC = () => (
  <React.Suspense fallback={<div>loading</div>}>
    <LazyPage1 />
  </React.Suspense>
);

注意：Suspense 组件需要包裹 React.lazy。

上面代码我们简单用了 <div>loading</div> 作为占位符，效果如下：

为了更加看得出效果，我们可以自己模拟网络很卡的情况下懒加载的效果，添加 slow 辅助方法

// ...
const slow = (comp: any, delay: number = 1000): Promise<any> => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(comp), delay);
  });
};

const LazyPage1 = React.lazy(() => slow(import("./pages/page1"), 3000));
// ...

注意：这只是个模拟，测试完毕记得不需要调用slow哦 ~

让我们再来看看模拟延迟3s的效果：

小总结：这样就可以实现一个不错的懒加载了，我们现在已经掌握了这两个方法在hook中的基本用法了，聪明的你是否嗅到了一股可以抽象封装的味道 ~

让我们来耐心的看下如何更优雅针对这"两兄弟"进行封装吧

前面说的话

我们都知道，一般来说我们会把组件分成 页面级组件 和 真正的高可复用的组件，
所以他们的 loading / 占位符 是否也要做下区分，
我这里想让 异步页面 加载的时候，用一个页面绝对居中的loading作为fallback，
让 异步组件 加载的时候，用一个当前组件位置的loading作为fallback。

我们来封装一下，show you my code

HOCLazy/index.tsx

import React from "react";
import Loading from "./Loading";
import "./index.css";
interface IProps {
  isComponent?: boolean;
  content?: string;
}
const PH: React.FC<IProps> = ({ isComponent = false, content = "" }) => {
  return (
    <>
      <div className={`ph ${!isComponent ? "page" : ""}`}>
        <div className="loading-wrapper">
          <Loading />
          <div>{content}</div>
        </div>
      </div>
    </>
  );
};
function HOCLazy<T = {}>(chunk: any): React.FC<IProps & T> {
  const WrappedComponent: React.FC = React.lazy(chunk);
  const Comp: React.FC<any> = ({
    isComponent = false,
    content = "",
    ...props
  }) => {
    return (
      <React.Suspense
        fallback={<PH isComponent={isComponent} content={content} />}
      >
        <WrappedComponent {...props} />
      </React.Suspense>
    );
  };
  return Comp;
}
export default HOCLazy;

解释：

• 我们定义了一个”PH“占位符组件，它的内容是一个loading和loading下的一段可选文字，接收一个 isComponent 属性用来区分当前lazy对象而用不同的样式。
• 核心方法 HOCLazy，为了保证在ts下组件props的“完整性”，我们用了 泛型 <T> 来弥补这样的“完整性”。

接下来，我们就可以更加方便的 lazy loading 了

页面级 lazy loading

App.tsx

// ...
const Page1 = HOCLazy(() => slow(import("./pages/page1"), 3000));
// ...

组件级 lazy loading

pages/page1.tsx

import React from "react";
import HOCLazy from "../HOCLazy";
import slow from "../HOCLazy/slow";
import { IProps } from "../components/Comp1";
const Comp1 = HOCLazy<IProps>(() => slow(import("../components/Comp1"), 3000));
const Index: React.FC = () => {
  return (
    <>
      <div>my name is page1，i am very lazy</div>
      <Comp1 isComponent content="Comp1组件加载中..." suffix="!!!" />
      <Comp1 isComponent content="Comp1组件加载中..." suffix="!!" />
      <Comp1 isComponent content="Comp1组件加载中..." suffix="!" />
    </>
  );
};
export default Index;

最终效果图

更优化

如果我们在页面/组件每次 lazy loading 前都需要显示“占位符”，那么可能会造成在网络不错的情况下，页面闪过“占位符”，导致整体不美观。
做lazy loading的目前是为了让页面呈现更流畅顺滑，这违背了我们的初衷，
我想在网络很好的情况下，不让用户看到这个“占位符”。

我们需要改造一下

HOCLazy/index.tsx

// ...
const PH: React.FC<IProps> = ({ isComponent = false, content = "" }) => {
  const [show, setShow] = useState<boolean>(false);
  const timeoutRef = useRef<number>();
  useEffect(() => {
    const id = setTimeout(() => {
      setShow(true);
      // 延迟时间可自己拿捏
    }, 500);
    timeoutRef.current = id;
    return () => {
      clearTimeout(timeoutRef.current);
    };
  }, []);

  return (
    <>
      {show ? (
        <div className={`ph ${!isComponent ? "page" : ""}`}>
          <div className="loading-wrapper">
            <Loading />
            <div>{content}</div>
          </div>
        </div>
      ) : null}
    </>
  );
};
// ...

解释：这里通过延迟 500 毫秒显示“占位符”的方式，让页面在网络良好的情况下，不会出现“占位符”一闪而过。

打包在同个异步块 (chunk) 中

有了懒加载，我们就可以更灵活的利用 webpack 去分包，更细腻的去处理包的加载。如合并几个页面为一个异步包：

const Page1 = HOCLazy(() =>
  import(/* webpackChunkName: "page" */ "./pages/page1")
);
const Page2 = HOCLazy(() =>
  import(/* webpackChunkName: "page" */ "./pages/page2")
);

执行build之后的包名，如：page.e6075659.chunk.js

总结

SPA应用必不可少的就是懒加载，本篇提供了一个较为合理的封装思路。喜欢封装的小伙伴，可以继续深究，更细节的去处理组件与loading/占位符 样式。

如果有更好的idea也可以与我一起讨论，关注公众号：前端精 ，让我们一起进步吧 ~

戳我看完整例子