分享umi3+ant design pro兼容IE11所遇到的问题

公司项目落地，中台使用 ant design pro 搭建，在提出需要兼容 IE11 时进行操作的时候遇到点儿问题分享一下。

首先，umi 官方似乎就写了一下 config 里的 target 配置 targets: { ie: 11, },再加上此配置后运行，在 IE11 下还是报错：未知字符，原因是IE11 不支持模板字符串。此时 config 里还需加上：

{  
    ...
    targets: { ie: 11 },  
    esbuild: { target: 'es5' },
}

此时满怀期待执行，未知字符是没有了，又出现一个问题，页面都是异步加载的，应用正常运行也没有报错，路由跳转到首页后，包含 antd form 的页面渲染不出来（在 chrome 正常），页面一直显示 loading 中，控制台也没有输出错误。

第一个想法是版本问题，经过多次尝试，固定了以下几个版本后在 IE11 正常运行：

原因还不知…还请大佬指教。

//package.json
"dependencies": {
    ...
    "@ant-design/pro-form": "1.33.1",
    "@ant-design/pro-layout": "6.23.4",
    "@ant-design/pro-table": "2.47.1",
    "@umijs/route-utils": "1.0.37",
    "antd": "4.16.10",
    "react": "17.0.2",
    "umi": "3.5.18"
},
"devDependencies": {
    ...
    "@babel/core": "7.4.5",
    "@umijs/fabric": "2.6.2",
    "@umijs/openapi": "1.1.19",
    "@umijs/plugin-blocks": "2.2.2",
    "@umijs/plugin-esbuild": "1.3.1",
    "@umijs/plugin-openapi": "1.3.0",
    "@umijs/preset-ant-design-pro": "1.3.3",
    "@umijs/preset-dumi": "1.1.24",
    "@umijs/preset-react": "1.8.22",
    "@umijs/yorkie": "2.0.5"
}

再分享一下遇到的另外一个问题，使用了 umi 官网写的splitChunks在打包时遇到了报错：

chunk of vendors not found

贴一下 config 里的splitChunks的配置：

{
  ...
  chunks: ['vendors', 'umi'],
  chainWebpack: (config) => {
    config.merge({
      optimization: {
        splitChunks: {
          chunks: 'all',
          minSize: 30000,
          minChunks: 3,
          automaticNameDelimiter: '.',
          cacheGroups: {
            vendor: {
              name: 'vendors',
              test({ resource }) {
                return /[\/]node_modules[\/]/.test(resource);
              },
              priority: 10,
            },
          },
        },
      },
    });
  }
}

经测试，我在项目中遇到这个问题的原因是因为引入了 package.json 中没有的 npm 包，比如 query-string 和 moment 库，在安装 antd 和 ant design pro 时是会自动安装的两个库，当项目代码中引入了而项目的 package.json 中没有，在提取 vendors 时报错。

如果都排除了还是报这个错误的话，可以尝试下安装swagger-ui-react这个库，这个是 umi 插件里有引用的。