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

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

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

参考：

• 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.