React Loadable 介绍

 

React 组件代码分割和加载

当你的应用足够庞大时,把所有代码简单地打成一个 bundle,启动时间会很长。你需要将 app 分割成几个 bundle,按需加载。

A single giant bundle vs. multiple smaller bundles

BrowserifyWebpack 等工具可以很好地解决如何将一个大 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 这个依赖。我们需要一种可以异步加载的方式。

dynamic import(目前处于第 3 阶段的 tc39 提议)可以使组件异步加载 AnotherComponent

但是这需要一系列的人为操作,而且有许多不同的场景无法适用。import() 失败了怎么办呢?服务端渲染呢?

这个问题可以用 Loadable 进行抽象。Loadable 使用起来很简单,只要传入加载组件的函数和加载组件过程中展示的“Loading”组件就可以了。

但是如果组件加载失败了呢?我们还需要有 error 状态。

为了给你最大的控制权,决定什么时候展示什么,error 只会简单地作为 LoadingComponent 的属性抛出。

import() 自动分割代码

import() 的一个优点是增加新代码时,Webpack 2 可以自动分割代码。

也就是说你只要使用 React Loadable、改用 import(),就可以轻松地用新的代码分割点进行试验,来看看哪种方法最适合你的应用。

此处可以查看示例项目,或者查阅 Webpack 2 文档(注:一些相关文档位于 require.ensure() 章节)。

Loading 组件避免一闪而过

有时组件加载很快(<200ms),loading 屏只在屏幕上一闪而过。

一些用户研究已证实这会导致用户花更长的时间接受内容。如果不展示任何 loading 内容,用户会接受得更快。

所以 loading 组件有一个 pastDelay 属性,仅在组件加载时间超过设置的 delay 时值为 true

delay 默认是 200ms,可以向 Loadable 传递第 3 个参数自定义 delay

预加载

你也可以在组件渲染前预加载进行优化。

例如需要在点击按钮时加载新的组件,就可以在用户悬浮在按钮上时预加载组件。

Loadable 创建的组件会暴露一个 preload 静态方法用来实现上述效果。

服务端渲染

Loader 通过最后一个参数支持服务端渲染。

向正在异步加载的模块传递精确路径,Loader 就会在服务端运行时同步地 require() 模块。

 

也就是说经过异步加载、代码分割的 bundle 可以在服务端同步渲染。这样客户端获取备份会有问题。我们可以在服务端渲染全部应用,但是在客户端需要一个个加载 bundle。

但是如果我们可以指定哪些 bundle 需要加入服务端的 bundle 进程呢?那么我们就可以一次性向客户端装载那些 bundle了,客户端就可以准确获取服务端渲染的状态了。

现在离实现已经很接近了。

因为在 Loadable 中我们能够拿到服务端需要的全部路径,所以我们可以增加一个 flushServerSideRequires 函数,返回最后在服务端渲染的所有路径。然后通过 webpack --json 命令可以匹配文件和该文件结束所在的 bundle(此处查看代码)。

仅存的问题是让 Webpack 在客户端完美运行。我会在发布这个 Sean 后等着你们的消息。

可以完美整合的话,我们可以构建各种各样的炫酷工具。React Fiber 让我们更了解哪些 bundle 是想要立即装载的,哪些是等待高优先级的任务完成后再装载的。

最后请安装 Loadable,给仓库颗星星吧

也可以在 twitter 上找到我 。

打赏支持我翻译更多好文章,谢谢!

打赏译者

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

1 1 收藏 评论

关于作者:古鲁伊

立志做一名有格调的程序媛 个人主页 · 我的文章 · 34

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部