如何在 Ant Design Pro 中启用代码拆分？答案

【问题标题】：How do you enable code splitting in Ant Design Pro?如何在 Ant Design Pro 中启用代码拆分？
【发布时间】：2020-03-05 02:21:44
【问题描述】：

在 gzip 之前，Ant Design Pro 包可能会变得非常大。我的简单捆绑包高达 3.9MB。我们如何使用 Ant Design Pro 启用代码拆分。我似乎在 V4 Ant Design Pro 的文档中找不到它。

【问题讨论】：

标签： javascript reactjs ant-design-pro

【解决方案1】：

https://github.com/ant-design/ant-design-pro/blob/7effcb09f40bb00f707738f7fdc4d5852a8e2dc9/config/config.ts#L28-L32

打开umi config dynamicImport。

https://umijs.org/plugin/umi-plugin-react.html#dynamicimport

【讨论】：

【解决方案2】：

好的，我想通了。如果有人有同样的问题，请在此处发布，因为尚未记录。原来代码拆分默认情况下是关闭的。在配置文件中查找dynamicImport 属性并取消注释。

config/config.js

const plugins = [
  [
    'umi-plugin-react',
    {
      antd: true,
      dva: {
        hmr: true,
      },
      locale: {
        ...
        baseNavigator: true,
      },
      dynamicImport: {
        loadingComponent: './components/PageLoading/index',
        webpackChunkName: true,
        level: 3,
      },
     ...
    }
  ]
]

【讨论】：

Welp，从来没有听说过 ant design pro，但很高兴你知道了！看起来他们是开源的，也许你可以为他们的文档或其他东西做出贡献！ :)
@Andrew 是的，这是个好主意！据说 Ant Design Pro 是 Ant Financial 用于他们的堆栈的东西。第一次尝试Pro。到目前为止非常整洁，但捆绑包尺寸有点重。能够将主 JS 文件从 3.9mb 减少到 1.7mb :)