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

Question

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

Answer 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

Answer 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,
      },
     ...
    }
  ]
]