Umi項目通過配置 dynamicImport loadingComponent 實現子頁面加載效果

轉載：https://www.jianshu.com/p/14609ad96780

在前端單頁面應用中，子頁面的代碼都是當用戶訪問到的時候，才會異步去加載子頁面的代碼。

如果子頁面代碼較大，那么會給用戶一段時間的卡頓感，很影響使用體驗。

所以，我們想在加載子頁面代碼時，顯示 loading 組件，從而優化體驗。

在 Umi 中，可以通過簡單的配置，即可實現。

1、編寫 loading 組件：

（src/components/PageLoading/index.js）

import React from 'react';
import { Spin } from 'antd';

// loading components from code split
// https://umijs.org/plugin/umi-plugin-react.html#dynamicimport
export default () => (
  <div style={{ paddingTop: 100, textAlign: 'center' }}>
    <Spin size="large" />
  </div>
);

2、在 .umirc.js 配置 dynamicImport 的 loadingComponent：

export default {
  treeShaking: true,
  //extends: ['eslint:recommended'],
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    [
      'umi-plugin-react',
      {
        antd: true,
        dva: true,
        dynamicImport: {
          loadingComponent: './components/PageLoading/index',
          webpackChunkName: true,
          level: 3,
        },
        ...
      },
    ],
  ],
 ...
}

3、配置完畢，等 umi 熱加載完成后，回到頁面，切換路由，就可以看到 loading 效果了：