利用React v16.6 Lazy&Suspense提升应用性能
本篇文章示例代码
前言
利用懒加载(Lazy Loading)优化页面性能不是什么新概念，不过React 16.6可以使用React.lazy与Suspense让原生React实现Lazy Loading大大的简化。
本篇文章也会拓展多种类似解决方案，见拓展部分
主要关键词说明
动态导入（Dynamic Import）
动态导入目前只是TC39的一个提案，不是JS（ES）标准的一部分。该功能可以动态化加载我们分割的组件/页面/文件，具体提案见下方链接： TC39 proposal-dynamic-import提案
目前要使用动态导入，需要使用到babel插件：
babel-plugin-syntax-dynamic-import
React.lazy
lazy函数提供了一种非常简便的方法动态导入组件，实现按需加载与代码分割
React.lazy使用方式非常简单，示例：
// lazy 接受一个函数作为参数
const MyComponent = React.lazy(() => import('path/MyComponent'));
// 展示时才加载（可以自定义一些条件）
const App = () => (
<div>
<MyComponent />
</div>
)
复制代码Suspense
Suspense组件用于包装lazy组件，在lazy组件还没有完全加载时，将fallback内容呈现给用户。
用动态加载，编译时会将文件分割，从加载文件到呈现会有时间延迟，此时可以使用Suspense展示一个loading。
使用示例
import React, { Suspense } from 'react';
const MyComponent = React.lazy(() => import('path/MyComponent'));
const Loading = (
<h3>loading...</h3>
);
const App = () => (
<div>
<Suspense fallback={Loading}>
<MyComponent />
</Suspense>
</div>
)
复制代码ErrorBoundary
ErrorBoundary（错误边界），可以使用ErrorBoundary包装Suspense，当Suspense出错时，统一处理错误。当然ErrorBoundary不止可用于Suspense，可以包装任意组件，然后统一处理错误。
实际场景中，可以自己先写一些通用错误页/组件继承自ErrorBoundary，然后包装要处理的组件。
也可以在组件的componentDidCatch生命周期中单独处理错误。
应用
性能优化说明
针对React加载的优化，可以分为两类：
- 页面加载优化
- 组件加载优化
很明显，React.lazy + Suspense可以很方便的应用于组件加载优化场景。
示例场景
CSR(客户端渲染)应用多页面的中某个耗时组件的加载
路由层
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Header from './header';
import Index from '../pages';
import Welcome from '../pages/welcome';
export default () => (
<Router>
<div>
<Header />
<Route exact path="/" component={Index}/>
<Route path="/welcome" component={Welcome}/>
</div>
</Router>
);
复制代码某个存在耗时组件的页面
// welcome.js
import React, { Suspense } from 'react';
// 使用Suspense + React.lazy动态加载的耗时组件
const Content = React.lazy(() => import('../components/content'));
export default () => (
<div>
<h1>Welcome</h1>
<Suspense fallback={<div>loading...</div>}>
<Content/>
</Suspense>
</div>
);
复制代码说明
假设用webpack编译上面代码产出bundle.js。当进入首页时，加载的bundle.js不会包含Welcome Content部分的代码，切换页面到Welcome时会走网络加载需要的文件。
利用这种方法拆分多个组件时，可以显著的提升首屏时间。
完整示例项目
说明：该项目主要用于React一些新功能及有意思的用法示例，会持续更新，后面会涉及到hooks及最新源码相关，有兴趣的可以star。
拓展
针对SSR（服务端渲染）应用导入性能优化
可以使用 Next.js ，Next.js已支持直接使用dynamic import，并且可以指明什么时候动态导入（服务端/客户端），Next.js对首屏做了很多优化，首屏时，服务端会寻找到最简依赖渲染，具体可以点击前面链接查看文档。示例：
// Next.js 动态导入
const MyComponent = dynamic(import('../components/MyComponent'), {
ssr: false,
loading: () => false,
});
复制代码针对组件的动态加载
针对图片的lazy loading
针对动态请求
- react-request：对于CSR应用，在不用hooks的情况下，也可以不在componentDidMount中处理请求，让请求更加的优雅。
- react-async：利用
Render Props + React hooks + Context API统一处理请求，支持SSR使用
封装react-request示例（统一请求处理）
import React from 'react';
import PropTypes from 'prop-types';
import { Fetch } from 'react-request';
// import ReactLoading from 'react-loading';
import config from '../../config';
const CustomFetch = (props) => {
const { url, children } = props;
return (
<Fetch
{...props}
url={config.serverUrl + url}
transformData={data => data.data}
>
{({ fetching, failed, data }) => {
if (fetching) {
// 正在请求：可以展示loading动画
// return <ReactLoading type="cylon" color="#2db53f" height="10%" width="10%" />;
}
if (failed) {
// 当前组件请求失败
// return <h1 className="home">请求失败...</h1>;
}
if (data) {
// 请求成功
return children(data);
}
return null;
}}
</Fetch>
);
};
CustomFetch.propTypes = {
url: PropTypes.string.isRequired,
};
export default CustomFetch;
复制代码在组件中使用CustomFetch
buildLinks = () => (
<div className="links">
<CustomFetch
url="/getLinks"
>
{data => data.map((item, index) => (
<a className="item" href={item.url} key={`link-${index}`}>
<img src={item.icon} className="icon" alt={item.name} />
<p>{item.name}</p>
</a>
))}
</CustomFetch>
</div>
);
复制代码