共计 3954 个字符，预计需要花费 10 分钟才能阅读完成。
咱们都晓得随着单页利用 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 也能够与我一起探讨，关注公众号：前端精，让咱们一起提高吧 ~
戳我看残缺例子
