the lazy Loader for

@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 语句所在的文件，无法通过工具包进一步封装。

Simple Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";

import { lazy, loadable } from "@ozo/lazy-loader";
import Loader from "react-loader-spinner";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Demo from "./Demo";

const LazyDemo = lazy(
  () => import("./Demo"),
  <Loader type="Triangle" color="#fff" height={50} width={50} />
);

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

function randomString(len) {
  len = len || 32;
  var $chars =
    "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678"; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = "";
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

class App extends Component {
  state = {
    list: randomString(64).split("")
  };
  render() {
    const { list } = this.state;
    return (
      <div>
        <AsyncLoad path="./Demo" list={list} />
        <LazyDemo list={list} />
        <Demo list={list} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);