ant design pro中配置dynamicImport
时间: 2023-08-29 18:08:58 浏览: 40
在 Ant Design Pro 中配置 dynamic import,可以按照以下步骤进行操作:
1. 打开 `config/config.ts` 文件。
2. 在 `routes` 配置项中找到需要进行 dynamic import 的路由配置。
3. 在该路由配置项中,添加 `dynamicImport: {}` 字段。
4. 在 `dynamicImport` 字段中,可以进行以下配置:
- `loading`: 自定义加载中的组件。例如:`loading: '@/components/PageLoading'`。
- `webpackChunkName`: 指定生成的异步加载文件的名称。例如:`webpackChunkName: 'subPage'`。
- `level`: 指定异步加载文件的优先级。数字越小,优先级越高。例如:`level: 1`。
以下是一个示例代码:
```javascript
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
component: './Dashboard',
dynamicImport: {
loading: '@/components/PageLoading',
webpackChunkName: 'subPage',
level: 1,
},
},
```
在上述示例中,我们对 `/dashboard` 路由进行了 dynamic import 配置,指定了自定义的加载中组件、异步加载文件的名称和优先级。
注意:dynamic import 功能需要与 webpack 配置配合使用,确保已启用 code splitting 和按需加载功能。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)