为什么我重新写了一个 "react-lodable" ?

站长

2023年09月03日 03:24 · 阅读数 56

简单来说是为了通过配置 webpack 插件及少量业务代码即可实现Code Splitting + 组件懒加载 + 预加载。

虽然react官方提供了一个 lazy API用于 react 组件的Code Splitting(代码拆分)及组件懒加载

const LazyComponent = React.lazy(() => import('./OtherComponent'))

但lazy有一个局限就是必须放在<Suspense>组件内。为什么我重新写了一个 "react-lodable" ?

import React, { Suspense } from 'react';
function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  );
}

同时，由于懒加载的关系，组件资源加载存在异步耗时，会导致<LazyComponent />在实际业务渲染中，存在较长的耗时，以至于组件渲染过程中出现闪烁、体验卡顿等情况，影响用户体验，虽然<Suspense>有提供一个 fallback属于用于组件等待过程中进行渲染，但是交互体验相对于不使用lazy的情况下，体验是有变差的。

而react社区提供的react-lodable 解决了以上两个问题：

不强依赖 react-lodable，可独立渲染<LazyComponent />
提供了preload预加载方案，减少异步加载耗时，保证用户体验。

let LoadableMyComponent = Loadable(
  () => import('./another-component'),
  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>
    )
  }
}

但是有个问题是模块过多时，侵入式的代码也变多了，同时被预加载的模块并没有进行统一管理，后续维护也不会很方便，不直观。

那么是不是可以在webpack plugin层面对预加载的模块进行统一维护，同时减少了项目中的侵入式代码。

于是便有了 route-resource-preload，其具备的特性: