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 。以服务端是否收到请求为准

ant-design/ant-design-pro#2779

[sorrycc]

CLEAN

[sorrycc]

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

组件报错有两种形式：

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

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 并注释掉。

[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' });
  }));
})

参考：

• feat: support pass props from layouts to child routes #1282 (comment)

[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]

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.

[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]

我在仓库源码中找到一条配置作为参考：

umi/packages/af-webpack/src/getConfig/eslint.js

Line 22 in dcbd5d8

.enforce('pre')

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

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

[stale]

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]

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]

我在仓库源码中找到一条配置作为参考：

umi/packages/af-webpack/src/getConfig/eslint.js

Line 22 in dcbd5d8

.enforce('pre')

但是并没有生效，仍然看不到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/

[saulmonci]

Is there some way to build with electron to make a desktop app?