乐趣区

关于前端:React丨用户体验丨hook版-lazy-loading

jiezi

咱们都晓得随着单页利用 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 也能够与我一起探讨，关注公众号：前端精，让咱们一起提高吧 ~

戳我看残缺例子

退出移动版