react-loadable


basic points

  1. 基于路由的代码分割和基于组件的代码分割
    webpack可以设置多入口文件，可以通过入口文件进行代码分割，即所谓的基于路由的分割；基于路由的分割可以常见于多tab页切换等场景；
    但是由于即使是多入口文件，某个文件中的代码也未必是需要首屏全部加载的，比如弹窗等；如果可以基于组件进行代码分割，可以更加细粒度地控制首屏需要加载的代码及其他代码的加载时机，可以有效提高页面性能和用户体验；
    在这里插入图片描述
  2. 考虑自己实现一个动态载入的组件，需要考虑哪些问题

    1. 需要基于ES6新特性import()实现，然后通过states和生命周期函数共同控制组件的可见性及展示内容，直接看官方demo：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      class MyComponent extends React.Component {
        state = {
          Bar: null
        };

        componentWillMount() {
          import('./components/Bar').then(Bar => {
            this.setState({ Bar: Bar.default });
          });
        }

        render() {
          let {Bar} = this.state;
          if (!Bar) {
            return <div>Loading...</div>;
          } else {
            return <Bar/>;
          };
        }
      }

    真实场景考虑的问题会更加复杂：比如动态加载失败import()，比如SSR怎么处理，比如加载完成前的站位组件不可能只是单纯的静态文本Loading...等；

React Loadable是一个轻量级的封装库，可以实现基于组件的代码分割功能。

看下React Loadable的使用、实现及对应问题的解决方式：

  1. 使用：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    import React from "react";
    import "./styles.css";
    import Loadable from "react-loadable";

    const LoadableSub = Loadable({
      loader: () => import("./Sub"),
      loading: () => {
        return <div>Loading...</div>;
      }
    });

    export default function App() {
      return (
        <div className="App">
          <h1>Hello CodeSandbox</h1>
          <h2>Start editing to see some magic happen!</h2>
          <LoadableSub />
        </div>
      );
    }

        ```

  2. Loadable实质是一个高阶组件，形式为

    1
    2
    3
    4
    Loadable({
        loader: () => import('xxx'), // component to be loaded dynamically.
        loading: <HoldingComponent /> // 预占位组件，动态组件未加载时显示loading信息等
    })

  3. 构建高可用的Loading组件——错误处理、避免占位信息和有效信息展示交替时的闪烁、加载超时、预加载、同时加载多个资源等；

    1. loader加载失败处理：失败时loading会接收到一个error的prop对象，否则为null；

      1
      2
      3
      4
      5
      6
      7
      function Loading(props) {
        if (props.error) {
          return <div>Error! <button onClick={ props.retry }>Retry</button></div>;
        } else {
          return <dxiv>Loading...</div>;
        }
      }

    2. Loadable支持设置设置一个默认的延迟时间，超过该时间才会显示loading；对应的Loadable属性为delay默认值为200ms，超过则loading的名为pastDelay的prop为true；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      Loadable({
          loader: () => import('xxx')
          loading: Loading,
          delay: 300, // ms
      });

      const Loading = (props) => {
          if (props.error) {
              return <div>Woops! Error occured.<button onClick={props.retry}>Retry</button><div>
          } else if (props.pastDelay) {
              return <div>Loading...</div>
          } else {
              return null;
          }
      };

    3. loader因网络问题等加载失败处理——Loadable支持设置timeout，默认被禁用；对应在loading组件中可以通过props.timeout属性获取状态，超时为true；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      const LoadableSub = Loadable({
        loader: () => import("./Sub"),
        loading: Loading,
        delay: 500,
        timeout: 8000
      });
      const Loading = props => {
        if (props.error) {
          return <div>Woops, errors occurred!</div>;
        } else if (props.pastDelay) {
          return <div>Loading...</div>;
        } else if (props.timeOut) {
          return <div>Timeout, please retry</div>;
        } else {
          return null;
        }
      };

    4. 动态加载多个资源，可以使用Loadable.map({})；

    5. Loadable支持预加载，单个组件的预加载使用方法类似于LoadableSub.preload()；

    6. 客户端进行动态加载，可能会出现白屏等，所以如果SSR时能够对动态加载做一定的处理，那么可以优化该体验；

      This really sucks, but the good news is that React Loadable is designed to make server-side rendering work as if nothing is being loaded dynamically.

  4. 服务端渲染

    1. 确保渲染前对应的组件已加载就绪。预加载所有loadable component——使用Loadable.preloadAll，它返回一个promise对象，并且在所有loadable component就绪后resolve；

      1
      2
      3
      4
      5
      Loadable.preloadAll().then(() => {
        app.listen(3000, () => {
          console.log('Running on http://localhost:3000/');
        });
      });

    2. 客户端如何处理SSR APP
      a. 声明需要加载的模块，使用Loadable的opt.modules和webpack；另外，需要在babel配置中加入以下配置信息

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      Loadable({
        loader: () => import('./Bar'),
        modules: ['./Bar'],
        webpack: () => [require.resolveWeak('./Bar')],
      });

      // babel配置
      {
        "plugins": [
          "react-loadable/babel"
        ]
      }

      b. 确定当某个请求完成后，哪些组件会被渲染；Loadable.Capture应运而生，可以记录已渲染的模块；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      import express from 'express';
      import React from 'react';
      import ReactDOMServer from 'react-dom/server';
      import App from './App';
      import Loadable from 'react-loadable';

      const app =  express();

      app.get('/', (req, res) => {
          let modules = [];
         
          let html = ReactDOMServer.renderToString(
              <Loadable.Capture report={moduleName => modules.push(moduleName)>
                  <App/>
              </Loadable.Capture>
          );
          console.log({ modules });

          res.end(`${html}`);
      });

      c. 把已加载的modules映射为webpack bundles——为确保客户端能够加载到所有服务端渲染的modules，需要将其转为webpack创建的bundles；包括两步：

      首先，需要借助webpack的React Loadable Webpack plugin告知我们每个module位于哪个bundle中；react-loadable.json中存储了bundles的相关信息；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      // webpack.config.js
      import { ReactLoadablePlugin } from 'react-loadable/webpack';

      export default {
        plugins: [
          new ReactLoadablePlugin({
            filename: './dist/react-loadable.json',
          }),
        ],
      };

      然后我们回到服务端使用这些数据将modules转为bundles；这里的转换需要借助react-loadable/webpack中的getBundles方法；

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      import Loadable from 'react-loadable';
      import  { getBundles } from 'react-loadable/webpack';
      import stats from './dist/react-loadable.json';

      app.get('/', (req, res) => {
          let modules = [];
         
          let html = ReactDOMServer.renderToString(
              <Loadable.Capture report={moduleName => modules.push(moduleName)}>
                  <App/>
              </Loadable.Capture>
          )；

          let bundles = getBundles(stats, modules);       // 获取到对应的bundles
      });

      然后我们可以在html标签中使用

      Now server-side rendering should work perfectly!

      参考文献

      1. jamiebuilds/react-loadable github