116 - 《Umi 4 Client Loader 原理》

今天刚把 Client Loader 的 PR 合了，这是个大功能，准备对内发 Bigfish 框架的 4.1（mirror） 版更新，在此介绍下他是什么以及背后的原理。

Client Loader 是适用于 CSR（Client Side Render）的基于路由的数据加载策略，解 React 请求瀑布的问题。开发者要做的只有两步，1）在路由组件上通过 export function clientLoader() 声明数据获取，2）在路由组件及子组件通过 useClientLoader() hook 获取数据。

export default () => {
 const { data } = useClientData();
 // render with data
}

export async function clientLoader() {
 return await fetch('/path/to/api');
}

效果如下。左边通过 Client Loader 里获取数据，右边则是在 useEffect 里获取数据。可以看出，Client Loader 的版本，三个请求是同时发起的，这让页面渲染的时间大大缩短。

实现原理分 4 步。

1、识别有 export clientLoader 的路由组件。办法是通过 esbuild + es-module-lexer 分析出 exports，如果包含 clientLoader，即判定为 true。需要注意的是 es-module-lexer 不支持 jsx 语法，所以遇到 .tsx 或 .jsx 文件，需先用 esbuild 做一次 transform 消灭 jsx 语法。代码见 https://github.com/umijs/umi-next/blob/8e148bc24b90e3fc93e4fd67899be80c0995057c/packages/pre