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>;
}

构建之后使用低网络模拟就能看到效果。