Ba la la la ~ 读者朋友们，你们好啊，又到了冷锋时间，话不多说，发车！
React 组件代码分割和加载
当你的应用足够庞大时，把所有代码简单地打成一个 bundle，启动时间会很长。你需要将 app 分割成几个 bundle，按需加载。
A single giant bundle vs. multiple smaller bundles
Browserify 和Webpack 等工具可以很好地解决如何将一个大 bundle 分割的问题。
那么你就需要决定在哪儿可以分离出另一个 bundle 进行异步加载。App 还需要在加载时给用户提示。
基于路由的分割 vs 基于组件的分割
通常的建议是将 app 分成独立的路径，然后每个异步加载。这对大多 app 都适用，点击链接然后加载一个新的页面，这种体验还可以。
但是我们可以做得更好。
React 的多数路由工具都是一个路径就是一个组件。没什么特别的。如果我们在组件上进行优化而不是让路径来负责这个任务会怎样呢？
Route vs. component centric code splitting
显然组件的方式更好些。你可以轻松地在更多地方分割 app，Modals、tabs以及很多用户触发才展示内容的 UI 组件等，而不仅是路径。
更不用说那些延迟加载直到高优先级的内容加载完的地方。页面底部的组件加载一堆库：为什么在顶部时就要加载那些库呢？
你也可以简单地按路由分割，因为它们也是组件。看哪种方式更适合你的 app 了。
但是我们需要让组件级分割和路由一样简单。新的分割应该改几行代码就可以了，其它都会自动完成。
React Loadable 介绍
大家都说组件分割很难实现，然后我就写了一个小库——React Loadable。
Loadable 是一款可以轻松分割组件级 bundle 的高阶组件（创建组件的函数）。
假设有两个组件，其中一个引入并渲染另一个。
import AnotherComponent from './another-component';
class MyComponent extends React.Component {
render() {
return <AnotherComponent/>;
}
}
目前通过 import 同步引入 AnotherComponent 这个依赖。我们需要一种可以异步加载的方式。
dynamic import（目前处于第 3 阶段的 tc39 提议）可以使组件异步加载 AnotherComponent。
class MyComponent extends React.Component {
state = {
AnotherComponent: null
};
componentWillMount() {
import('./another-component').then(AnotherComponent => {
this.setState({ AnotherComponent });
});
}
render() {
let {AnotherComponent} = this.state;
if (!AnotherComponent) {
return <div>Loading...</div>;
} else {
return <AnotherComponent/>;
};
}
}
但是这需要一系列的人为操作，而且有许多不同的场景无法适用。import() 失败了怎么办呢？服务端渲染呢？
这个问题可以用 Loadable 进行抽象。Loadable 使用起来很简单，只要传入加载组件的函数和加载组件过程中展示的“Loading”组件就可以了。
import Loadable from 'react-loadable';
function MyLoadingComponent() {
return <div>Loading...</div>;
}
const LoadableAnotherComponent = Loadable({
loader: () => import('./another-component'),
LoadingComponent: MyLoadingComponent
});
class MyComponent extends React.Component {
render() {
return <LoadableAnotherComponent/>;
}
}
但是如果组件加载失败了呢？我们还需要有 error 状态。
为了给你最大的控制权，决定什么时候展示什么，error 只会简单地作为 LoadingComponent 的属性抛出。
function MyLoadingComponent({ error }) {
if (error) {
return <div>Error!</div>;
} else {
return <div>Loading...</div>;
}
}
import() 自动分割代码
import() 的一个优点是增加新代码时，Webpack 2 可以自动分割代码。
也就是说你只要使用 React Loadable、改用 import()，就可以轻松地用新的代码分割点进行试验，来看看哪种方法最适合你的应用。
此处可以查看示例项目，或者查阅 Webpack 2 文档（注：一些相关文档位于 require.ensure() 章节）。
Loading 组件避免一闪而过
有时组件加载很快（<200ms），loading 屏只在屏幕上一闪而过。
一些用户研究已证实这会导致用户花更长的时间接受内容。如果不展示任何 loading 内容，用户会接受得更快。
所以 loading 组件有一个 pastDelay 属性，仅在组件加载时间超过设置的 delay 时值为 true。
export default function MyLoadingComponent({ error, pastDelay }) {
if (error) {
return <div>Error!</div>;
} else if (pastDelay) {
return <div>Loading...</div>;
} else {
return null;
}
}
delay 默认是 200ms，可以向 Loadable 传递第 3 个参数自定义 delay。
Loadable({
loader: () => import('./another-component'),
LoadingComponent: MyLoadingComponent,
delay: 300
});
预加载
你也可以在组件渲染前预加载进行优化。
例如需要在点击按钮时加载新的组件，就可以在用户悬浮在按钮上时预加载组件。
Loadable 创建的组件会暴露一个 preload 静态方法用来实现上述效果。
let LoadableMyComponent = Loadable({
loader: () => import('./another-component'),
LoadingComponent: MyLoadingComponent,
});
class MyComponent extends React.Component {
state = { showComponent: false };
onClick = () => {
this.setState({ showComponent: true });
};
onMouseOver = () => {
LoadableMyComponent.preload();
};
render() {
return (
<div>
<button onClick={this.onClick} onMouseOver={this.onMouseOver}>
Show loadable component
</button>
{this.state.showComponent && <LoadableMyComponent/>}
</div>
)
}
}
服务端渲染
Loader 通过最后一个参数支持服务端渲染。
向正在异步加载的模块传递精确路径，Loader 就会在服务端运行时同步地 require() 模块。
import path from 'path';
const LoadableAnotherComponent = Loadable({
loader: () => import('./another-component'),
LoadingComponent: MyLoadingComponent,
delay: 200,
serverSideRequirePath: path.join(__dirname, './another-component')
});
也就是说经过异步加载、代码分割的 bundle 可以在服务端同步渲染。这样客户端获取备份会有问题。我们可以在服务端渲染全部应用，但是在客户端需要一个个加载 bundle。
但是如果我们可以指定哪些 bundle 需要加入服务端的 bundle 进程呢？那么我们就可以一次性向客户端装载那些 bundle了，客户端就可以准确获取服务端渲染的状态了。
在 Loadable 中我们能够拿到服务端需要的全部路径，所以我们可以增加一个 flushServerSideRequires 函数，返回最后在服务端渲染的所有路径。然后通过 webpack --json 命令可以匹配文件和该文件结束所在的 bundle（此处查看代码）。
以上为个人意见，如有雷同，纯属巧合，欢迎大家多提意见！Bey 了 个 Bey ~
网友评论