dynamicImport
- Type:
object
- Default:
false
是否启用按需加载,即是否把构建产物进行拆分,在需要的时候下载额外的 JS 再执行。
默认关闭时,只生成一个 js 和一个 css,即 umi.js
和 umi.css
。优点是省心,部署方便;缺点是对用户来说初次打开网站会比较慢。
打包后通常是这样的,
+ dist
- umi.js
- umi.css
- index.html
启用之后,需要考虑 publicPath 的配置,可能还需要考虑 runtimePublicPath,因为需要知道从哪里异步加载 JS、CSS 和图片等资源。
打包后通常是这样,
+ dist
- umi.js
- umi.css
- index.html
- p__index.js
- p__users__index.js
这里的 p__users_index.js
是路由组件所在路径 src/pages/users/index
,其中 src
会被忽略,pages
被替换为 p
。
包含以下子配置项,
- loading, 类型为字符串,指向 loading 组件文件
比如:
export default {
dynamicImport: {
loading: '@/Loading',
},
}
然后在 src 目录下新建 Loading.tsx
,
import React from 'react';
export default () => {
return <div>加载中...</div>;
}
构建之后使用低网络模拟就能看到效果。