蚂蚁设计-大量进口 [英] ant design - huge imports

问题描述

我正在为我的React应用程序使用 ant设计库.

I'm using ant design library for my react application.

我面临着巨大的进口，这伤害了我的捆绑包(由于ant-design lib，目前缩小版为1.1 mb).

And I've faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-design lib).

如何通过我的所有应用程序不同地导入antd组件?

How can I differently import antd components through all my app?

更新:

似乎antd有一些巨大的或未优化的模块. 这里的东西-唯一的区别是导入Datepicker模块，以及..繁荣！ +近2MB(在开发包中).

Seems antd has some huge or non optimized modules. Here the thing - only difference is import Datepicker module, and.. boom! + almost 2MB (in dev bundle ofc.)

推荐答案

UPD:该问题似乎已经解决了新版本(4.0)的antd.
因此，如果您尝试解决较早版本的问题，建议的方法是迁移到antd 4

UPD: the underlying issue seems to be resolved for the new (4.0) version of antd.
Therefore, if you try to resolve this issue for the earlier versions, the recommended way is to migrate onto antd 4

上一个答案:

目前，antd dist的很大一部分是SVG图标.
尚无官方解决方法(在github上检查问题).

At the moment, a huge part of antd dist is SVG icons.
There is no official way to deal with it yet (check the issue on github).

但是存在解决方法.

1. 使Webpack适应以不同方式解析图标.在您的webpack配置中:

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

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

1. Create icons.js in the folder src/ or wherever you want it. Be sure it matches the alias path!
   In this file you define which icons antd should include.

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

也可以通过config-overwrites.js中的react-app-rewire(创建反应应用程序修改)来完成此操作

It's also possible to do this with react-app-rewire (create-react-app modifications) within config-overwrites.js

这篇关于蚂蚁设计-大量进口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！