我们都知道随着单页应用 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也可以与我一起讨论，关注公众号：前端精 ，让我们一起进步吧 ~
网友评论