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

问题描述

我正在为我的 React 应用程序使用

更新:

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

解决方案

UPD: 新的 (4.0) 版 antd 似乎解决了根本问题.
因此，如果您尝试为早期版本解决此问题，推荐的方法是迁移到 antd 4

上一个答案:

目前 antd dist 的很大一部分是 SVG 图标.
目前还没有官方的方法来处理它(检查github上的问题).

但是存在解决方法.

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

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

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

export {默认为 DownOutline} 来自@ant-design/icons/lib/outline/DownOutline"；

也可以使用 config-overwrites.js

中的 react-app-rewire(create-react-app 修改)来做到这一点

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

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

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

UPDATE:

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: 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

Previous answer:

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).

But a workaround exists.

1. Adapt webpack to resolve icons differently. In your webpack config:

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

2. 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";

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

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