umi 动态加载组件 dynamic 自定义loading图片

最新推荐文章于 2024-07-19 14:51:14 发布

runrun117

最新推荐文章于 2024-07-19 14:51:14 发布

阅读量3.6k

点赞数

分类专栏：前端文章标签：前端 javascript 开发语言动态加载 umi

本文链接：https://blog.csdn.net/runrun117/article/details/121220685

版权

前端专栏收录该内容

66 篇文章 0 订阅

订阅专栏

本文介绍了在AntDesign前端项目中如何实现单页应用动态加载时显示loading图标。方法包括在config.js配置文件中设定以及手动编写dynamic组件。通过dynamic导入并设置loader属性，指定加载过程中显示的图标组件。

摘要由CSDN通过智能技术生成

前端项目ant design 在加载单页应用的时候，要显示动态加载的loading图标。这使用使用dynamic来进行设置，设置方法有两种

1、在配置文件中使用config.js

 dynamicImport: {
    loading: '@/components/PageLoading/index',
  },

2、自己手写dynamic的组件

官方文档：https://umijs.org/zh-CN/docs/load-on-demand

import { dynamic } from 'umi';
import LoadingComponent from '@/components/PageLoading/index';

export default dynamic({
    loader: async function() {
        // 这里的注释 webpackChunkName 可以指导 webpack 将该组件 HugeA 以这个名字单独拆出去
        const { default: HugeA } = await import(/* webpackChunkName: "external_A" */ '@/pages/HugeA');
        return HugeA;
    },
    loading: LoadingComponent
});

其中loading就是在加载过程中要显示的加载图标