reactjs - ant design - 大量进口

Question

我正在使用ant design library对于我的 react 应用程序。

而且我面临着巨大的导入，这损害了我的包(由于 ant-design lib，目前缩小版本为 1.1 mb)。

如何通过我的所有应用以不同方式导入 antd 组件？

更新:

似乎 antd 有一些巨大的或未优化的模块。这里的事情 - 唯一的区别是导入 Datepicker 模块，并且..繁荣! + 近 2MB(在开发包 ofc 中)

Answer 1

UPD:新版 antd (4.0) 的潜在问题似乎已得到解决。
因此，如果您尝试解决早期版本的此问题，推荐的方法是迁移到 antd 4

上一个答案:

目前，antd dist 的很大一部分是 SVG 图标。
目前还没有官方的方法来处理它( check the issue on github )。

但是一个workaround存在。

1. 调整 webpack 以不同方式解析图标。在你的 webpack 配置中:

module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};

在文件夹 src/ 中或任何您想要的位置创建 icons.js。确保它与别名路径匹配!
在此文件中，您定义 antd 应包含哪些图标。

export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

也可以使用 config-overrides.js 中的 react-app-rewired (create-react-app 修改)来完成此操作