React 中的 suspense 和 lazy

react

我们通过 webpack 或是 rollup 这样工具可以将项目多个 JavaScript 文件最终打包成为一个 bundle 文件。加载一个 js 文件速度要快于加载多个 JavaScript 文件。不过随着 bundle 的体积不断增大，最终造成首次加载时间过长，还有就是加载一些不必要的 javascript 文件。
所以我们想是否可以对 bundle 文件进行拆分来进行按需加载，就此需求 webpack 和 rollup 都给出自己解决方案，支持代码拆分，也就是 code splitting。

在 react 我们可以用 import('./Foo.js').then() 方式进行 code 的懒加载。

下面我们代码简单实现一下如何使用 lazy 和 suspense 来实现懒加载组件。

import Foo from '../components/Foo';
import Bar from '../components/Bar'
export default class LazyPage extends Component {
    render() {
        return (
            <div>
             
                    <Bar/>
                    <Foo/>
              
            </div>
        )
    }
}

import('../components/Bar')

通过 React.lazy 实现组件的懒加载

const Foo = React.lazy(() => import('../components/Foo'));

这是会提醒错误，让我们配合 lazy 来使用 suspense，第一次听到 suspense 这个词还是在 kotlin 中听到的。

export default class LazyPage extends Component {
    render() {
        return (
            <div>
                <Suspense fallback={<div>loading...</div>}>
                    <Bar/>
                    <Foo/>
                </Suspense>
            </div>
        )
    }
}

通过使用 Suspense 标签将要进行 lazy（懒加载）的组件进行包裹，然后在 callback 函数中给出加载过程中处理方式，也就是加载过程中的行为。
由于是本地加载，所以加载速度太快不利于我们观察加载过程，我们可以通过自己写一个函数来模拟延时加载

export function slowImport(value, ms = 1000){
    return new Promise(resolve=>{
        s
etTimeout(()=> resolve(value),ms);
    })
}

在下面代码中通过 slowImport 可以模拟加载时间，我们会注意到通常会按最长时间为基准进行加载。

const Foo = React.lazy(
    () => slowImport(import('../components/Foo'), 1000 ));

const Bar = React.lazy(
    ()=> slowImport(import('../components/Bar'),500)
)

lazy