【Umi】通过配置 dynamicImport loadingComponent 实现子页面加载效果【转载】

【本文转载自【Umi】通过配置 dynamicImport loadingComponent 实现子页面加载效果_ai375355的博客-CSDN博客，仅供本人学习时查阅，若有任何侵权请联系我删除，非常抱歉，在此感谢无偿分享技术资料的前端大佬们！】

在前端单页面应用中，子页面的代码都是当用户访问到的时候，才会异步去加载子页面的代码。

如果子页面代码较大，那么会给用户一段时间的卡顿感，很影响使用体验。

所以，我们想在加载子页面代码时，显示 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 效果了：

以上。
————————————————
版权声明：本文为CSDN博主「束子熊」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/ai375355/article/details/94879861