dynamicImport

  • Type: object
  • Default: false

是否启用按需加载,即是否把构建产物进行拆分,在需要的时候下载额外的 JS 再执行。

默认关闭时,只生成一个 js 和一个 css,即 umi.jsumi.css。优点是省心,部署方便;缺点是对用户来说初次打开网站会比较慢。

打包后通常是这样的,

  1. + dist
  2. - umi.js
  3. - umi.css
  4. - index.html

启用之后,需要考虑 publicPath 的配置,可能还需要考虑 runtimePublicPath,因为需要知道从哪里异步加载 JS、CSS 和图片等资源。

打包后通常是这样,

  1. + dist
  2. - umi.js
  3. - umi.css
  4. - index.html
  5. - p__index.js
  6. - p__users__index.js

这里的 p__users_index.js 是路由组件所在路径 src/pages/users/index,其中 src 会被忽略,pages 被替换为 p

包含以下子配置项,

  • loading, 类型为字符串,指向 loading 组件文件

比如:

  1. export default {
  2. dynamicImport: {
  3. loading: '@/Loading',
  4. },
  5. }

然后在 src 目录下新建 Loading.tsx

  1. import React from 'react';
  2. export default () => {
  3. return <div>加载中...</div>;
  4. }

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