@ozo/lazy-loader

lazy loader for React

环境

• React v16.3+
• webpack 4.6+

Install

npm install @ozo/lazy-loader

API

该库可用于动态加载 React 组件或其他工具库。

React 组件动态导入，支持自定义加载动画

• @param {Function} func 返回动态引入的函数, 如 ()=>import('./a/b/c')
• @param {Function} spinner 加载的的 loading, 默认为 loadSpinner
• @returns {Component} React 组件

采用 React 原生的 Suspense，lazy 实现 lazyload

lazy (function, spinner)

React.lazy 的具体用法：https://reactjs.org/docs/code-splitting.html#reactlazy

采用@loadable/component 组件实现

• lazyX (function, spinner)
• loadable (function, spinner)
• loadableDelay (promise, delay = 200, spinner) ：支持延时加载
• loadableTimeout (promise, time = 5000, spinner) ：支持加载超时

lib 动态导入

可以延迟加载指定库,当库加载完后需要通过 render props called 或 ref 来取值。

• @param {Function} func 返回动态引入的函数, 如 ()=>import('./a/b/c')
• @returns {Component} React 组件

• lazyLib (func)：需要采用包裹。

const Moment = lazyLib(() => import("moment"));

function FromNow({ date }) {
  return (
    <Suspense fallback={<div>loading</div>}>
      <Moment fallback={date.toLocaleDateString()}>
        {({ default: moment }) => moment(date).fromNow()}
      </Moment>
    </Suspense>
  );
}

<FromNow date={new Date()} />;

• loadableLib (func)：具体用法请参考： https://www.smooth-code.com/open-source/loadable-components/docs/library-splitting/

@loadable/component 支持服务端渲染，具体用法请参考：https://www.smooth-code.com/open-source/loadable-components/

React.lazy 和@loadable/component 组件的区别

https://www.smooth-code.com/open-source/loadable-components/docs/loadable-vs-react-lazy/

webpack 的 动态导入特性

Magic Comments：https://webpack.js.org/api/module-methods/#magic-comments

扩展使用

利用 loadable 进一步封装

利用 loadable 进一步封装生成 AsyncLoad 组件，通过组件方式加载，可以避免繁琐的变量定义。适合在项目本地封装使用，例如路由统一配置表中（统一引入路径），注意使用场景及组件的路径匹配。

// ./src/App.js

import { loadable } from "@ozo/lazy-loader";

// 动态加载组件的组件,支持自定义加载动画
const AsyncLoad = loadable(({ path }) => import(path));

function MyComponent() {
  return (
    <div>
      <AsyncLoad path="./Home" />
      <AsyncLoad path="./Contact" />
    </div>
  );
}

import()中的相对路径相对于 import 语句所在的文件，无法通过工具包进一步封装。