Umi: FAQ

[sorrycc]

整理日常咨询常被问到的问题，欢迎补充。

开启按需加载后如何把 css 打包成一个文件？

配置 splitChunks，比如：

export default {
  plugins: [
    ['umi-plugin-react', {
      dynamicImport: {
        webpackChunkName: true,
      },
    }],
  ],
  chainWebpack(config) {
    config.optimization.splitChunks({
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.(css|less)$/,
          chunks: 'async',
          minChunks: 1,
          minSize: 0,
        }
      },
    });
  },
}

打包后会输出：

File sizes after gzip:

  126.85 KB  dist/umi.js
  535 B      dist/p__users.async.js
  533 B      dist/p__index.async.js
  337 B      dist/styles.async.js
  96 B       dist/styles.chunk.css

示例：

• sorrycc-123.zip

参考：

• https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-all-css-in-a-single-file
• https://github.com/umijs/umi/blob/master/packages/umi-plugin-react/test/chunks/.umirc.js#L1

[xiaohuoni]

proxy代理不成功,没有代理到实际地址

代理只是服务请求代理，这个地址是不会变的。
原理可以简单的理解为，在本地启了一个服务，你先请求了本地的服务，本地的服务转发了你的请求到实际服务器。所以你在浏览器上看到的请求地址还是http://localhost:8000/xxx 。以服务端是否收到请求为准

https://github.com/ant-design/ant-design-pro/issues/2779

[sorrycc]

CLEAN

[sorrycc]

配了 dynamicImport.loadingComponent 后外层报错不生效怎么办？

组件报错有两种形式：

1)

a(); // 出错
export default () => <>..</>;

2)

export default () => {
  a(); // 出错
  return <>..</>;
}

第二种不管怎么样都能正常抛错，第一种在开启 dynamicImport 并配置了 loadingComponent 时可能会不生效。

比如 loadingComponent 指向的文件内容为：

export default () => <>loading...</>

那么出错时也会只显示 loading... 。

解决

loadingComponent 处理出错场景，比如：

export default class extends React.PureComponent {
  render() {
    if (process.env.NODE_ENV === 'development' && this.props.error) {
      console.error(this.props.error.stack);
      return <div>{this.props.error.stack}</div>;
    }
    return <div>loading...</div>;
  }
};

[sorrycc]

umi dev 之后页面一直在不停地刷新怎么办？

这是因为 html 和 umi.js 的端口不一致。

比如：

• html 在 7001 端口
• umi.js 在 8000 端口

然后你访问 html，并且在 html 里引用了 8000 端口的 umi.js，这样会导致 socket server 连接出错，触发了循环刷新问题。

解决

配置 SOCKET_SERVER 到 umi dev 所在端口，比如 SOCKET_SERVER=8000 umi dev。（windows 下是 set SOCKET_SERVER=8000&&umi dev`）

[sorrycc]

如何禁用掉每次刷新路由时出现的 loading... 状态？

解决

给 dynamicImport 配置加上 loadingComponent: '() => <></>'，比如：

export default {
  plugins: [
    ['umi-plugin-react', {
      dynamicImport: { loadingComponent: '() => <></>' },
    }],
  ]
}

[sorrycc]

antd-pro 项目热更新慢并且是在 95% (emitting) 时卡住怎么办？

编辑 config/config.js，搜索 chainWebpack 并注释掉。

[fangzhengL]

怎么看本地启动服务的端口呢?我想监听这个端口

@xiaohuoni运行的时候有打印：

App running at:
  - Local:   http://localhost:8000/
  - Network: http://192.168.199.147:8000/

[sorrycc]

如何配置额外的 loader

需同时配置 urlLoaderExcludes，比如 md 用 raw-loader 的配置，

export default {
  urlLoaderExcludes: [
    /\.md$/,
  ],
  chainWebpack(config) {
    config.module.rule('md')
      .test(/\.md$/)
      .use('raw')
      .loader('raw-loader')
  }
}

[sorrycc]

layout 路由如何传值给子路由

推荐用 context 或者数据流方案，如果用 cloneElement 传值需要传两级，因为第一级是 Switch，然后才是 Route。

React.Children.map(children, child => {
  return React.cloneElement(child, null, React.Children.map(child.props.children, child => {
    return React.cloneElement(child, { test: 'test' });
  }));
})

参考：

• https://github.com/umijs/umi/pull/1282#issue-224134432

[tsaiDavid]

antd-pro 项目热更新慢并且是在 95% (emitting) 时卡住怎么办？

编辑 config/config.js，搜索 chainWebpack 并注释掉。

If the compilation is slow or gets stuck at 95%, go to config/config.js and then comment out chainWebpack.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[boogoogle]

eslint提示不显示具体哪个文件???

[hughfenghen]

如何配置额外的 loader

需同时配置 urlLoaderExcludes，比如 md 用 raw-loader 的配置，

export default {
  urlLoaderExcludes: [
    /\.md$/,
  ],
  chainWebpack(config) {
    config.module.rule('md')
      .test(/\.md$/)
      .use('raw')
      .loader('raw-loader')
  }
}

我在文档中找不到相关描述，请教一下如何配置rules的enforce，例如与下面的webpack配置等价的配置方法：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ["source-map-loader"],
        enforce: "pre"
      }
    ]
  }
};

[hughfenghen]

我在仓库源码中找到一条配置作为参考：
https://github.com/umijs/umi/blob/dcbd5d8cd470f10102044d044b16aca7670dd955/packages/af-webpack/src/getConfig/eslint.js#L22

但是并没有生效，仍然看不到sourcemap：

  config.module.rule('source-map-loader')
    .test(/\.js$/)
    .enforce('pre')
    .use('source-map-loader')
    .loader('source-map-loader')

[xiaohuoni]

ie报错和压缩问题解决思路

感觉现在ie下的错误，都是因为这个问题引起的。

典型错误

解决思路

第一步、确认你的需求

主要是是否需要兼容旧版本不支持 es6 的浏览器，

• 如果需要兼容，跳到第二步
• 如果不需要兼容，配置 minimizer 为 terserjs

第二步

检查 targets 配置，确认是否有包含旧版本浏览器比如，

{
  targets: { ie: 10 },
}

尝试构建，如果没有问题，则不用再执行下一步。

第三步、记录错误文件和行号

比如前面的，

• 文件：vendors.async.js
• 行号：193
• 出错 token：>

第四步、不压缩构建，查找出错源

# 如果你用 umi
$ COMPRESS=none umi build

# 如果你用 bigfish
$ COMPRESS=none bigfish build

找 vendors.async.js 的 193 行，看下是哪个包出错的，记录包名和版本号。

第五步、修改本地node_modules/es5-imcompatible-versions/package.json 文件，写入刚刚出错的包名和版本号。

"antd-table-infinity": {
        "^1.1.2": {
          "version": "^1.1.2",
          "reason": "https://github.com/Leonard-Li777/antd-table-infinity/blob/master/src/components/Table/InfinityTable/index.jsx#L7"
        }
      }

第六步、保存文件，重新build，确认错误已修复

第七步、给 es5-imcompatible-versions 提 PR

不会提交PR的同学，请按下面步骤操作

1、在编辑里面，把你刚才的修改，在这里也修改一下。
2、修改完，页面拉到最下方。创建一个分支（可能会是自动创建分支的情况，如果没得选择，这里不理会就好）点击绿色按钮 Propose file change

3、在跳转后的页面，点击绿色按钮 Create pull request

第八步、将跳转后的链接，发到群里面。等待合并。

如：https://github.com/umijs/es5-imcompatible-versions/pull/36

参考

• https://github.com/sorrycc/blog/issues/68
• https://github.com/umijs/es5-imcompatible-versions

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Hugo-seth]

umi 好像不支持 react.lazy，如果支持的话，怎样把 lazy 的组件单独打包成 async 的包？

[sxyshirly]

有一个IE9以下浏览器没有获取到css样式的问题，项目用的umi+dva+antd，配置了按需加载。查找了一下打包完的dist文件夹，发现一个vendors.chunk.css文件，好像是antd库的打包。不知道是不是因为它有300多kb所以ie9无法读取，想请问一下：
1.umi-plugin-react这个插件下 的chunk项配置是什么意思，是否是用于css切割的
2.css-split-webpack-plugin这个插件如何在umi项目中使用
打包这部分不是很熟悉，半天没解决这个问题，希望赐教

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[dickeylth]

如何声明路由参数类型？https://github.com/umijs/umi/issues/3983，路由参数捕获声明类型遇到问题，参照 react-router 的文档 也没有解决

[Tenodec]

ant design 4.0 发布了，umi create 创建的 pro项目模板啥时候更新下啊

[shengbeiniao]

我在仓库源码中找到一条配置作为参考：
https://github.com/umijs/umi/blob/dcbd5d8cd470f10102044d044b16aca7670dd955/packages/af-webpack/src/getConfig/eslint.js#L22

但是并没有生效，仍然看不到sourcemap：

  config.module.rule('source-map-loader')
    .test(/\.js$/)
    .enforce('pre')
    .use('source-map-loader')
    .loader('source-map-loader')

同样的问题，因为 umi 的依赖包比如 dva 是通过 father 编译的，本来就不带 sourcemap，编译的时候像 react-redux 这种库并没有编译进去

[cpocar]

基于@umijs/plugin-layout 的侧边栏菜单配置中的icon是否能支持本地图片或者svg？，如果使用antd的icon打包下来的icon贼大。

[email protected]

[llh1187]

基于@umijs/plugin-layout 的侧边栏菜单配置中的icon是否能支持本地图片或者svg？，如果使用antd的icon打包下来的icon贼大。

[email protected]

我记得哪里看到说是可以按需加载？

[afc163]

@xiaohuoni 这里的问题整理到 https://umijs.org/zh-CN/docs/faq 吧。

[tushuang]

有群地址吗

[xiaohuoni]

有群地址吗

首页，底部 https://umijs.org/