关于前端: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也能够与我一起探讨，关注公众号：前端精，让咱们一起提高吧 ~

戳我看残缺例子