Перевод этого номера:

Размер пакета antd svg слишком велик, рекомендуется пакет @ ant-design / icons по запросу

• [] Я искал проблемы в этом репозитории и считаю, что это не дубликат.

Версия

3.9.0

Окружающая обстановка

Webpack4

Ссылка для воспроизведения

https://zlab.github.io/report.html

Действия по воспроизведению

Сборка Webpack

Что ожидается?

Icon Pack по мере необходимости, разделение файла js

Что на самом деле происходит?

Упаковано в чанк-вендоров

Я использовал только несколько иконок

<Icon /> по умолчанию представляет библиотеку значков полностью. Потому что я не знаю, какой значок вы представите во время выполнения. Раньше значки размещались в iconfont.cn поэтому упаковка отсутствует.

Это требует подробного обсуждения временного плана, см. Https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

cc @yesmeck

Необходимо предоставить метод, который может загружаться по запросу, и этот метод также используется внутри компонента antd.

import Star from 'antd/icons/star';

<Star />

Но если вы сделаете это, предыдущая запись несовместима

<Icon type="star" /> // should import star icon first

Его нельзя упаковать по запросу, да и асинхронная загрузка тоже хороша,

Перед использованием шрифта значка сначала выводится содержимое страницы, а значок загружается медленно.

<Icon.Star />

Но если вы сделаете это, предыдущая запись несовместима

Нет, пока вам не понадобится <Icon /> не сможете все это упаковать.

Некоторые сцены не могут быть упакованы по запросу, например, установка значка меню, если его можно настроить в фоновом режиме, поэтому интерфейс не может предсказать, какой значок будет установлен.
Асинхронная загрузка более подходит, просто введите @ ant-design / icons в кусок

Фактически, встроенные компоненты, которые используют <Icon /> , такие как <DatePicker /> , <Select /> т. Д., Будут полностью представлены при использовании.

Если его можно настроить в фоновом режиме, интерфейс не сможет предсказать, какой значок будет установлен. Асинхронная загрузка более подходит.

Меню созданной нами back-end системы настроено, действительно нужна асинхронная загрузка иконок, а полная упаковка слишком велика.

Я чувствую, что асинхронность лучше.
Если вы хотите упаковать его по запросу, вам нужно написать плагин babel например babel-plugin-import .

Фактически, встроенные компоненты, которые используют <Icon /> , такие как <DatePicker /> , <Select /> т. Д., Будут полностью представлены при использовании.

Изменена внутренняя запись

В проекте тип - это переменная, могу ли я ввести только полную сумму?
<Icon type={icon} />
Может ли это быть введено частично?

Посмотрите, можете ли вы использовать спрайт символа svg, чтобы максимально уменьшить размер полного пакета.

https://github.com/jkphl/svg-sprite
https://css-tricks.com/svg-symbol-good-choice-icons/
https://css-tricks.com/pretty-good-svg-icon-system/

Кроме того, пакет dist должен быть собран непосредственно в @ant-design/icons , и нет необходимости напрямую полагаться на слегка скомпилированный исходный код.

+1, пакет действительно удвоен

💢 головная боль. . . . Дяди. . .

Самое неприятное - принести много SourceMappingUrl

Это заставило меня вернуться к версии 3.8.2

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (проект umi)

Вот решение, которое использует resolve.alias в webpack для уменьшения размера пакета.
Мы планируем разработать новые API, которые позволят импортировать нужные значки в будущее.
Обратите внимание, что вы также должны импортировать значки, используемые в компоненте antd , например loading , close-circle и так далее.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (проект umi)
Вот временное решение: настройте поле resolve.alias в webpack.
В будущем мы должны найти способ разработать новый API значков, чтобы облегчить использование загрузки значков по запросу.
Обратите внимание, что значки по запросу должны также включать значки, используемые другими компонентами antd , такими как loading , close-circle и так далее.

@HeskeyBaozi Прежде всего, спасибо за вашу тяжелую работу! Мое текущее время - 9:29 , и я увидел, что время, когда вы отправили, было 6 hours ago , братья действительно достаточно хороши! Нравится: thumbsup :: thumbsup :: thumbsup:

Я понимаю, что перечислить значки, используемые проектом, отдельно, включая значки, используемые antd.

Вы можете импортировать файл до того, как будет предоставлено официальное решение для асинхронной загрузки.

@ChiaJune antd Полностью используемый список значков в компоненте, если есть какие-либо упущения, я могу добавить
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

Вы можете сослаться на подход fontawsome

А

import { library } from "@fortawesome/fontawesome-svg-core";
import faCalendar from "@fortawesome/free-solid-svg-icons/faCalendar";

library.add(faCalendar); // Load icon once

...

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
<FontAwesomeIcon icon="calendar" />

B

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import faCalendar from "@fortawesome/free-solid-svg-icons/faCalendar";

<FontAwesomeIcon icon={faCalendar} /> // Import directly or any svg

Сохраните старое использование и добавьте предупреждение и сообщение о миграции в консоль.

import { Icon } from 'antd';
<Icon type="star" />

Поставщик нового API, например:

import Star from 'antd/icons/Star';
import Setting as SettingIcon from 'antd/icons/Setting';

<Star />
<SettingIcon />

И способ дрожания деревьев тоже:

import { Icon: { Star, Setting } } from 'antd';

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (проект umi)

Вот решение, которое использует resolve.alias в webpack для уменьшения размера пакета.
Мы планируем разработать новые API, которые позволят импортировать нужные значки в будущее.
Обратите внимание, что вы также должны импортировать значки, используемые в компоненте antd , например loading , close-circle и так далее.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (проект umi)
Вот временное решение: настройте поле resolve.alias в webpack.
В будущем мы должны найти способ разработать новый API значков, чтобы облегчить использование загрузки значков по запросу.
Обратите внимание, что значки по запросу должны также включать значки, используемые другими компонентами antd , такими как loading , close-circle и так далее.

@HeskeyBaozi Отличное решение !! (пока antd не очистит это и не разрешит единичный импорт значков) Я делал несколько попыток использовать resolve.alias для решения этой проблемы, но это ударило по голове. Спасибо!

следите за этим, так как мы тоже используем эту версию.

Копия @jameswhf @xcqwan

Мне то же. Импорт по отдельности не охватывает все сценарии использования, поэтому необходимо исправить дрожание деревьев. Пожалуйста, проверьте здесь

@serayuzgur
Я использую webpack.alias, и он у меня работает. Может быть, это поможет вам :)

ветка моего репо antd-icon-tree- shaking (Webpack4 + Babel 7.0)

Это также вызывает проблемы, если все, что у меня есть, - это Button в комплекте (вероятно, поскольку он поддерживает значки). Есть ли способ уменьшить размер пакета, если все, что я использую, - это Button ?

(На скриншоте - у меня есть только компонент Button но значки в первую очередь раздувают пакет)

Временное решение, которое работало для меня, пока оно не будет исправлено (antd> = 3.9)

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

Я думаю, что лучшим api было бы, если бы мы могли установить значок, передав некоторый JSX, таким образом, я мог бы просто импортировать только необходимый значок и передать его кнопке. Также упростит работу со сторонними иконками (или любыми SVG).

<Button icon={<Icon type="search" />}>Search</Button>

Только мое личное предпочтение :)

Для людей, использующих create-response-app через react-app-rewired .

config-overrides.js

const path = require('path');

/* config-overrides.js */
module.exports = function override (config, env) {
  let alias = (config.resolve.alias || {});
  alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, "./src/icons.js");

  config.resolve.alias = alias;

  return config;
}

icons.js gist

Для людей, использующих create-response-app через react-app-rewired .

config-overrides.js

const path = require('path');

/* config-overrides.js */
module.exports = function override (config, env) {
  let alias = (config.resolve.alias || {});
  alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, "./src/icons.js");

  config.resolve.alias = alias;

  return config;
}

icons.js gist

Использование этого метода исключает совместимость twoToneColor.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
приводит к:

Привет,
Причина этой проблемы - возможность использовать значки типа <Icon type="check-circle" . Этот api требует включения всех значков, чтобы он мог предоставить все, что вы указываете в качестве типа.

Это также дает нам возможность выбирать значки во время выполнения, и это ценно для меня. Поэтому, по моему мнению, API должен оставаться таким же, но компонент Icon должен поддерживать загрузку значков данного типа по запросу .

Возможно использование динамического импорта (в зависимости от # 12235 - обновление до Webpack 4) или через библиотеку Webpack 3, например, response-loadable

На основе этого комментария перейдите к временному решению:

$ yarn add purched-antd-icons

// webpack.config.js
module.exports = {
  // other configs
  resolve:{
    // other configs
    alias:{
      "@ant-design/icons":"purched-antd-icons"
    }
  }
}

пакет purched-antd-icons удаляет все значки, которые не используются официальными компонентами antd. В моем случае Icomoon является поставщиком системы значков проекта.

Вот сравнение извлеченного анализа пакета приложений create-response-app.

вывод webpack

пакетный анализ

Вы можете импортировать файл до того, как будет предоставлено официальное решение для асинхронной загрузки.

до:

после:

обходной путь от @tobiaslins не работает для меня, он говорит Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' может кто-нибудь указать мне, как это исправить? благодаря

@marcosfede У меня была такая же проблема, как и у вас. Псевдоним не работает должным образом.

Проверьте, установлен ли __dirname в path.resolve(__dirname, "./src/icons.js")

Если вы используете приложение create-response-app через альтернативу response-app-rewired, вы можете:

• пути
• webpack.dev.js
• webpack.prod.js

Обновление 3.9 увеличило наш пакет на 700кб (23%). Хотя нам нравится новая реализация, увеличенный размер пакета стал большим сюрпризом. Увеличение компенсируется тем, что в него не включен iconfont. Мы реализуем решение @Obooman, которое по-прежнему будет увеличивать нашу общую площадь, но этого недостаточно, чтобы гарантировать, что мы остановимся на 3.8.4.

Реализация пакета purched-antd-icons оставляет в нашем проекте много недостающих значков.

@michaelpeterlee purched-antd-icons предоставляет только значки, необходимые официальным компонентам, мы используем его, так как не используем другие значки в antd. для большей настройки вам придется управлять своими значками вручную или выбирать генераторы значков шрифтов, такие как icomoon или iconfont, в качестве поставщика системы значков.

@marcosfede У меня была такая же проблема, как и у вас. Псевдоним не работает должным образом.

Проверьте, установлен ли __dirname в path.resolve(__dirname, "./src/icons.js")

Если вы используете приложение create-response-app через альтернативу response-app-rewired, вы можете:

• пути
• webpack.dev.js
• webpack.prod.js

это было полезно, спасибо. Я извлек проект, поэтому у меня была точка __dirname на папку конфигурации, в которой расположены файлы веб-пакета, вместо корневой папки.

Возможно, команде AntDesign стоит подумать о том, чтобы вернуться к прежнему образу жизни (до 3.9). Это лучший способ, мудрый путь.

Это должно быть как внешнее. https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede У меня была такая же проблема, как и у вас. Псевдоним не работает должным образом.
Проверьте, установлен ли __dirname в path.resolve(__dirname, "./src/icons.js")
Если вы используете приложение create-response-app через альтернативу response-app-rewired, вы можете:

• пути
• webpack.dev.js
• webpack.prod.js

это было полезно, спасибо. Я извлек проект, поэтому у меня была точка __dirname на папку конфигурации, в которой расположены файлы веб-пакета, вместо корневой папки.

У меня работает, спасибо!

Вот изменения, которые мы внесем в следующем выпуске, чтобы решить проблему размера пакета.

Создайте отдельный компонент для каждого значка

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

Устарела ссылка на значок как на строку

Устаревшее предупреждение появится, если вы укажете значок в виде строки в следующих компонентах:

<Icon type="star" />
<Alert iconType="success" />
<Avatar icon="star" /> 
<Button icon="star" /> 
Modal.confirm({ iconType: 'star' })

Для совместимости мы загружаем спрайт SVG по запросу, когда вы ссылаетесь на значок в виде строки.

Вместо того, чтобы ссылаться на значок как на строку, вы должны явно передать ReactNode этим реквизитам:

import StarFilled from 'antd/icons/StarFilled';

<Avatar icon={<StarFilled />} /> 

@yesmeck Хорошее решение, которое одновременно предлагает встряхивание дерева и отсутствие метода addIcon !

Вопрос. Что, если у нас есть стили CSS для этих значков и нужно динамически изменять тип значков? Обязательно ли передавать стили всем значкам замены?

@michaelpeterlee rc-calendar не зависит от antd и @ant-design/icons , поэтому он не должен «загружать всю библиотеку значков». Вы можете создать проблему в https://github.com/react-component/calendar/issues с воспроизведением демонстрации.

Моя ошибка. Я удалил свой нерелевантный комментарий. Это должен быть компонент DatePicker который представляет значок:

Я хочу сказать, что я не импортирую значки antd любом месте своего проекта, но некоторые компоненты antd импортируют Icon из antd . Было бы хорошо, если бы эти компоненты могли импортировать только нужные им значки, а не всю библиотеку значков.

Вот изменения, которые мы внесем в следующем выпуске, чтобы решить проблему размера пакета.

@yesmeck

Вы имеете в виду 3.11.x ? Похоже, что он не входит в 3.10.4 .

@johnernaut # 12888

Вернемся к v3.8.4 на данный момент, версия 3.9.0+ слишком велика после упаковки. Версия, упомянутая выше богами, является лишь временным решением. Я с нетерпением жду следующей версии, чтобы загрузить значок асинхронно.

Спасибо @yesmeck , с нетерпением жду следующей версии.

Я также хотел упомянуть, что опубликовал плагин Ant Design для create-react-app v2 и craco . Вот плагин craco-antd на GitHub

Я только что добавил в README раздел « Большой размер пакета из Ant Design Icons », и я буду следить за этой проблемой (и PR ). Спасибо за совет @sunel (и другие). Я добавил ссылку на ваш комментарий о настройке псевдонима.

module.exports = {
  resolve: {
    alias: {
      "@ant-design/icons-angular/icons": "/path/to/node_modules/@ant-design/icons-angular/esm2015/icons/ant-design-icons-angular-icons.js"
    }
  }
}

Я готовлю репозиторий репродукций, демонстрирующий эту проблему. Конфигурация веб-пакета изменена по сравнению с исходным примером интеграции ng-zorro-antd здесь, и кажется, что DllPlugin рендерит дрожание дерева в сглаженном ES-модуле бесполезно.

Он работает должным образом, если DllPlugin отсутствует.

Вот некоторые исторические факты о том, что webpack не трясет деревьями на плоских модулях. Я считаю, что то, о чем они говорят, было в основном исправлено в недавнем выпуске, за исключением некоторых крайних случаев DllPlugin .

• https://twitter.com/IgorMinar/status/835710218977734656
• https://github.com/ng-packagr/ng-packagr/issues/705
• https://github.com/angular/angular-cli/issues/10754

Интересно, что только в мае веб-пакет поддерживает встряхивание дерева на DllPlugin , я добавил entryOnly: true но не повезло. Я бы набросал более изолированный пример и поднял вопрос о webpack.

Изменения: добавлены репозиторий репродукций и исторические проблемы.

Конец истории: именно здесь воспроизводство репозитория оказывается ложным. Webpack 3.5.6 слишком устарел без поддержки entryOnly: true . Вот почему модули fesm5 не сотрясаются.

Для тех, кто хочет связать ng-zorro-antd с поставщиками dll

• Если у вас установлен webpack > = 4.9.0 , добавьте entryOnly: true в конфигурацию DllPlugin .
• В противном случае добавьте этот параметр в конфигурацию вашего веб-пакета.

module.exports = {
  resolve: {
    alias: {
      "@ant-design/icons-angular/icons": "/path/to/node_modules/@ant-design/icons-angular/esm2015/icons/ant-design-icons-angular-icons.js"
    }
  }
}

@issuehuntfest профинансировал эту проблему в размере 200 долларов США. Смотрите на IssueHunt

Могут ли файлы шрифтов не участвовать в упаковке и импортировать их локально?слишком большой

Официальный план по оптимизации этой проблемы? Можете ли вы предоставить локальное решение svg, аналогичное версии до 3.8?

Жду улучшения

Есть официальное решение?

@fuhaiwei До следующей версии, проверьте этот комментарий для обходного пути, экспортировав значки напрямую https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

В настоящее время я использую webpack.resolve.alias замены antd/es/icon пользовательским компонентом.
Сборка будет <Icon /> a props.type и props.theme отправленных в указанный API.
Таким образом, все используемые данные Icon могут быть записаны во время тестирования страницы.
Затем на основе данных и https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 автоматически генерируется icons.js .
Надеюсь найти лучшее решение.

В настоящее время я использую webpack.resolve.alias для замены antd/es/icon пользовательским компонентом.
Этот компонент отправит props.type и props.theme из <Icon /> указанному API.
Это позволяет вам записывать все данные Icon, используемые во время тестирования страницы.
Затем автоматически сгенерируйте icons.js на основе данных и https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
Надеюсь найти лучшее решение.

Прошло 3 месяца, официалка нашла способ загрузить по запросу?

Лучше всего начать с ознакомительного метода, и он настолько хорош, что все компоненты цитируются отдельно как материал. . Теперь только те компоненты, которые могут использовать встроенный Icon, все значки упакованы. .

Если компонент Icon не используется, также будет загружен пакет @ ant-desigin / icons.

Если компонент Icon не используется, также будет загружен пакет @ ant-desigin / icons.

Datepicker тоже используется, посмотрите, есть ли он в коде. также будет использоваться меню

Более 500 КБ - это слишком много

С нетерпением жду, я изначально перешел на последнюю версию, но когда увидел, что она такая большая, меня снова напугало.

Я не хочу использовать формат SVG, могу ли я гибко его настроить? Настроить использовать или не использовать svg

Вы можете предоставить способ ссылки только на один значок, и все внутренние компоненты antd обновляются для использования таким образом:

import Search from 'antd/icons/Search";

<Search />

Для совместимости существующих проектов import { Icon } from 'antd'; прежнему зарезервирован, но пока используется import { Icon } from 'antd'; , импортируется все количество значков.

Согласен наверху

отметка в ожидании идеального решения

500к иконок, есть решение?

Может ли кто-нибудь сообщить мне об этом на английском языке? 500 КБ - это четверть моего комплекта. Я использую webpack и импортирую значки следующим образом:

import Icon from 'antd/lib/icon';
<Icon type="logout" />

Я пробовал различные способы их импорта и даже удаления всех импортируемых значков, но, похоже, что бы я ни делал, 500 КБ остаются. Я использую webpack и смог правильно встряхнуть значки в дереве с помощью функции подъема экспериментальной области, но я не могу ее использовать, поскольку она ломает мое приложение в 20 других местах.

Как люди справляются с этой проблемой? Все здесь просто отправляют свои проекты с дополнительными 500 КБ или их очевидный обходной путь я игнорирую?

Работает ли импорт подобным образом со стандартной сборкой веб-пакета?

import Star from 'antd/icons/star';
Если бы кто-нибудь мог обновить меня, я был бы очень признателен.

@ApolloGun Обходной путь несколько раз упоминался в этой теме, все в этом комментарии: https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

То, как это работает, заключается в том, чтобы Webpack разрешал значки из другого места, в частности из нового файла, в который вы экспортируете именно те значки, которые хотите использовать. После этого значки будут работать в обычном режиме, больше ничего менять в компонентах не нужно.

Я не использую никаких иконок, но все равно получаю этот огромный файл. Возможно, компоненты в antd используют его внутри себя. Как определить значки, используемые компонентами. Это , кажется, хороший способ , чтобы заменить Antd иконки на пользовательские иконки для таких вещей , как Select, раскрывающийся и т.д.

Я не использую никаких иконок, но все равно получаю этот огромный файл. Возможно, компоненты в antd используют его внутри себя. Как определить значки, используемые компонентами. Это , кажется, хороший способ , чтобы заменить Antd иконки на пользовательские иконки для таких вещей , как Select, раскрывающийся и т.д.

@HeskeyBaozi создал список значков, используемых в компонентах antd, используя псевдоним webpack:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
Пожалуйста, прочитайте все обсуждение проблемы, чтобы понять этот метод.

@ApolloGun На данный момент официального решения нет.
Запрос на вытягивание: # 12888 все еще обрабатывается.

@yesmeck , @ afc163 Есть планы закрыть это в ближайшее время?

@HeskeyBaozi @ afc163 , как мне использовать этот новый, который вы написали? ?

@HeskeyBaozi Могу я спросить, почему вы, ребята, не работаете над этим? Прошло больше пяти месяцев. Вы, ребята, считаете это низким приоритетом?

@HeskeyBaozi Могу я спросить, почему вы, ребята, не работаете над этим? Прошло больше пяти месяцев. Вы, ребята, считаете это низким приоритетом?

Согласитесь, очень напрягает = (

После проверки кода antd я вижу, что такой компонент, как Button импортирует Icon , который, в свою очередь, импортирует (согласно сгенерированному коду)

// import everything here
import * as allIcons from '@ant-design/icons/lib/dist';

//...

// use everything here :(
ReactIcon.add.apply(
  ReactIcon,
  _toConsumableArray(
    Object.keys(allIcons).map(function(key) {
      return allIcons[key];
    })
  )
);

что вызывает сбой treehaking и, таким образом, импорт всех значков. Пожалуйста, подумайте о том, чтобы указать для импорта @ant-design/icons/lib/index.es.js и не выполнять операции со всеми значками до тех пор, пока они не понадобятся. Также проверьте историю этой строки: https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 Со временем она немного изменилась.

Это напрямую приводит к невозможности использования всего проекта.

@poorel ,

<Icon /> по умолчанию представляет библиотеку значков полностью. Потому что я не знаю, какой значок вы представите во время выполнения. Раньше значки размещались в iconfont.cn поэтому упаковка отсутствует.

Это требует подробного обсуждения промежуточного плана, см. №12011 (комментарий)

Это решение все еще можно использовать, я его тестировал, но вам нужно разобраться, какие значки есть в вашем проекте, это немного хлопотно

Но вам нужно разобраться, какие значки есть в вашем проекте ...

Я пытался прочитать его раньше и обнаружил, что многие ссылки на значки сделаны собственными компонентами antd, и их количество не мало. Хотя прямых ссылок в бизнесе очень мало, но, учитывая, что на компоненты можно ссылаться, их количество нелегко подсчитать.

@chenyong Эээ , это яйцо болит. . .

@aryzing Ваш подход звучит привлекательно. Приведет ли он к меньшим усилиям, чем # 12888? Этот PR включает в себя слишком много критических изменений, вероятно, это одна из причин, по которой он все еще не завершен спустя месяцы.

@zachguo Я просмотрел # 12888 и не мог толком понять, что происходит. После некоторого размышления по этому поводу я не уверен, что мы сможем успешно встряхнуть дерево значков, потому что динамический API, используемый некоторыми компонентами для визуализации значков, противоречит статической природе импорта ES, используемого для встряхивания дерева.

Значок, используемый в некоторых компонентах antd, отображается динамически (т.е. определяется во время выполнения) на основе свойства. Например, взгляните на API кнопки:

<Button icon="search">Search</Button>

Чтобы этот компонент отображался правильно, компонент Button (или используемый базовый компонент Icon) должен иметь доступ (во время выполнения) ко всем значкам и не допускать тряски дерева.

Решением было бы иметь такой API, как

import { 
  SearchIcon // not sure if this actually exists
} from '@antd/some-icons-package';

<Button icon={SearchIcon}>Search</Button> {/* option 1 - component */}
<Button icon={() => <SearchIcon />}>Search</Button> {/*option 2 - render prop */}

В этом сценарии вы импортируете только то, что вам нужно, и встряхивание дерева может сработать и сбросить все неиспользуемые экспортные данные из примера @antd/some-icons-package .

Эта проблема существует больше полугода, а официального решения до сих пор нет. В настоящее время я использую import() для асинхронной загрузки.
Эта проблема существует уже более полугода, и до сих пор нет официального решения.Решение, которое я сейчас использую, - использовать import() для асинхронной загрузки.

Используйте рекомендуемые загружаемые компоненты в официальной документации React .
Используйте загружаемые компоненты, рекомендованные в официальной документации React .

import React from 'react';
import ReactDOM from 'react-dom';
import { Icon } from 'antd';

ReactDOM.render(
  <Icon type="github" />,
  document.getElementById('root')
);

• Первым делом нужно установить зависимости: @loadable/component и @babel/plugin-syntax-dynamic-import .
  Первым делом нужно установить зависимости: @loadable/component и @babel/plugin-syntax-dynamic-import .

• Второй шаг - создать папку icons в корневом каталоге проекта и использовать сценарий для экспорта всех значков в @ant-design/icons :
  Второй шаг - создать папку icons в корне проекта и экспортировать все значки в @ant-design/icon с помощью скрипта:

  #!/usr/bin/env node
  const fs = require('fs');
  const path = require('path');
  const util = require('util');
  const icons = require('@ant-design/icons');
  
  const fsMkdir = util.promisify(fs.mkdir);
  const fsWriteFile = util.promisify(fs.writeFile);
  
  // https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/utils.ts#L94-L108
  const mapping = {
  fill: 'fill',
  outline: 'o',
  twotone: 'twotone',
  };
  const saveFlag = { encoding: 'utf8', mode: 0o644, flag: 'w' };
  
  (async () => {
  const dir = path.join(__dirname, 'icons');
  await fsMkdir(dir, 0o755);
  const processes = Object.values(icons).map(value => {
    if (value && value.name && value.theme) {
      // https://github.com/ant-design/ant-design-icons/blob/master/packages/icons-react/src/components/Icon.tsx#L38-L42
      const file = path.join(dir, `${value.name}-${mapping[value.theme]}.js`);
      const data = `export default ${JSON.stringify(value)}`;
      return fsWriteFile(file, data, saveFlag);
    }
  });
  await Promise.all(processes);
  })();
  

  Используйте узел для выполнения этого сценария непосредственно в проекте, чтобы сохранить все значки, экспортированные в @ant-design/icons в каталог icons .
  Выполните этот сценарий непосредственно в проекте, используя узел для хранения всех значков, экспортированных из @ ant-design/icons в папку icons .

• Третий шаг - скопировать компоненты / icon / index.tsx из репозитория кода Antd в корневой каталог проекта и назвать его Icon.jsx или Icon.js , а затем удалить определение типа TypeScript в коде, чтобы получить чистый Код JavaScript. (Если ваш проект использует TypeScript, вы также можете напрямую назвать его как Icon.tsx или Icon.ts , поэтому нет необходимости удалять определение типа)
  На третьем шаге скопируйте компоненты / icon / index.tsx из репозитория кода Antd в корень проекта и назовите Icon.jsx или Icon.js , затем удалите определение типа TypeScript в коде, чтобы получить чистый код JavaScript (если в вашем проекте используется TypeScript, вы также можете назвать его напрямую как Icon.tsx или Icon.ts , так что вам не нужно удалять определение типа)
  Затем измените этот файл кода, используйте import() с @loadable/component для загрузки файлов значков по запросу.
  Затем измените файл кода и используйте import() с @loadable/component для загрузки файла значка по мере необходимости.

  diff -- a/Icon.tsx b/Icon.jsx
  --- a/Icon.tsx
  +++ b/Icon.jsx
  @@ -1,70 +1,29 @@
  import * as React from 'react';
  import classNames from 'classnames';
  -import * as allIcons from '@ant-design/icons/lib/dist';
  +import loadable from '@loadable/component';
  import ReactIcon from '@ant-design/icons-react';
  -import createFromIconfontCN from './IconFont';
  +import createFromIconfontCN from 'antd/es/icon/IconFont';
  import {
  svgBaseProps,
  withThemeSuffix,
  removeTypeTheme,
  getThemeFromTypeName,
  alias,
  -} from './utils';
  +} from 'antd/es/icon/utils';
  -import warning from '../_util/warning';
  +import warning from 'antd/es/_util/warning';
  -import LocaleReceiver from '../locale-provider/LocaleReceiver';
  +import LocaleReceiver from 'antd/es/locale-provider/LocaleReceiver';
  -import { getTwoToneColor, setTwoToneColor } from './twoTonePrimaryColor';
  +import { getTwoToneColor, setTwoToneColor } from 'antd/es/icon/twoTonePrimaryColor';
  +
  +const AllIcons = loadable.lib(props => import(
  +  /* webpackChunkName: "icons/icon-" */
  +  `./icons/${props.type}.js`
  +));
  
  // Initial setting
  -ReactIcon.add(...Object.keys(allIcons).map(key => (allIcons as any)[key]));
  setTwoToneColor('#1890ff');
  -let defaultTheme: ThemeType = 'outlined';
  +let defaultTheme = 'outlined';
  -let dangerousTheme: ThemeType | undefined = undefined;
  +let dangerousTheme = undefined;
  -
  -export interface TransferLocale {
  -  icon: string;
  -}
  -
  -export interface CustomIconComponentProps {
  -  width: string | number;
  -  height: string | number;
  -  fill: string;
  -  viewBox?: string;
  -  className?: string;
  -  style?: React.CSSProperties;
  -  spin?: boolean;
  -  rotate?: number;
  -  ['aria-hidden']?: string;
  -}
  -
  -export type ThemeType = 'filled' | 'outlined' | 'twoTone';
  -
  -export interface IconProps {
  -  tabIndex?: number;
  -  type?: string;
  -  className?: string;
  -  theme?: ThemeType;
  -  title?: string;
  -  onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
  -  onClick?: React.MouseEventHandler<HTMLElement>;
  -  component?: React.ComponentType<CustomIconComponentProps>;
  -  twoToneColor?: string;
  -  viewBox?: string;
  -  spin?: boolean;
  -  rotate?: number;
  -  style?: React.CSSProperties;
  -  prefixCls?: string;
  -  role?: string;
  -}
  -
  -export interface IconComponent<P> extends React.SFC<P> {
  -  createFromIconfontCN: typeof createFromIconfontCN;
  -  getTwoToneColor: typeof getTwoToneColor;
  -  setTwoToneColor: typeof setTwoToneColor;
  -  unstable_ChangeThemeOfIconsDangerously?: typeof unstable_ChangeThemeOfIconsDangerously;
  -  unstable_ChangeDefaultThemeOfIcons?: typeof unstable_ChangeDefaultThemeOfIcons;
  -}
  -
  -const Icon: IconComponent<IconProps> = props => {
  +const Icon = props => {
  const {
    // affect outter <i>...</i>
    className,
  @@ -107,7 +66,7 @@
    [`anticon-spin`]: !!spin || type === 'loading',
  });
  
  -  let innerNode: React.ReactNode;
  +  let innerNode;
  
  const svgStyle = rotate
    ? {
  @@ -116,7 +75,7 @@
      }
    : undefined;
  
  -  const innerSvgProps: CustomIconComponentProps = {
  +  const innerSvgProps = {
    ...svgBaseProps,
    className: svgClassString,
    style: svgStyle,
  @@ -165,12 +124,19 @@
      dangerousTheme || theme || defaultTheme,
    );
    innerNode = (
  -      <ReactIcon
  -        className={svgClassString}
  -        type={computedType}
  -        primaryColor={twoToneColor}
  -        style={svgStyle}
  -      />
  +      <AllIcons type={computedType}>
  +        {({ default: loadedIcon }) => {
  +          ReactIcon.add(loadedIcon);
  +          return (
  +            <ReactIcon
  +              className={svgClassString}
  +              type={computedType}
  +              primaryColor={twoToneColor}
  +              style={svgStyle}
  +            />
  +          );
  +        }}
  +      </AllIcons>
    );
  }
  
  @@ -181,7 +147,7 @@
  
  return (
    <LocaleReceiver componentName="Icon">
  -      {(locale: TransferLocale) => (
  +      {locale => (
        <i
          aria-label={type && `${locale.icon}: ${type}`}
          {...restProps}
  @@ -196,7 +162,7 @@
  );
  };
  
  -function unstable_ChangeThemeOfIconsDangerously(theme?: ThemeType) {
  +function unstable_ChangeThemeOfIconsDangerously(theme) {
  warning(
    false,
    'Icon',
  @@ -206,7 +172,7 @@
  dangerousTheme = theme;
  }
  
  -function unstable_ChangeDefaultThemeOfIcons(theme: ThemeType) {
  +function unstable_ChangeDefaultThemeOfIcons(theme) {
  warning(
    false,
    'Icon',
  

• Последний шаг - настроить Webpack:
  Последний шаг - настроить Webpack:
  `` `diff
  diff - a / webpack.js b / webpack.js
  --- a / webpack.js
  +++ б / webpack.js
  @@ -1,4 +1,5 @@
  const path = require ('путь');
  + const webpack = require ('webpack');
  const HtmlWebpackPlugin = require ('html-webpack-plugin');
  const TerserPlugin = require ('terser-webpack-plugin');

  @@ -33,12 +34,16 @@
  плагины: [
  новый HtmlWebpackPlugin ({
  title: 'Отличная страница',
  шаблон: path.join (__ dirname, 'public / index.html'),
  meta: {
  область просмотра: 'width = device-width, initial-scale = 1',
  },
  хеш: правда,
  }),

  • новый webpack.NormalModuleReplacementPlugin (
  • /node_modules\/antd\/es\/icon\/index.js/,
  • path.resolve (__ dirname, 'Icon.jsx')
  • ),
    ],
    разрешить: {
    модули: ['node_modules'],
    @@ -56,13 +61,14 @@
    использование: [{
    загрузчик: 'babel-loader',
    параметры: {
    предустановки: [
    ['@ babel / preset-env', {target: '> 2.486%, not dead'}],
    '@ babel / preset-react',
    ],
    плагины: [
  • ['@ babel / plugin-syntax-dynamic-import'],
    ['@ babel / плагин-предложение-класс-свойства'],
    ['импорт', {имя библиотеки: 'antd', каталог-библиотеки: 'es', стиль: истина}],
    ],
    },
    }]
    

    ``

Преимущество этого решения заключается в том, что вы можете сохранить все значки, и вы можете произвольно изменять значки в настраиваемой системе управления фоном, не беспокоясь об отсутствии значков; значки загружаются по запросу и будут загружены только тогда, когда значки определенной страницы отображаются. Соответствующий файл значка. Единственное, что необходимо загрузить, это данные списка значков размером около 50 КБ в упакованном индексе (указание более короткого имени в магическом комментарии веб-пакета в Icon.jsx может уменьшить размер).
Преимущество этого решения заключается в том, что вы можете сохранить все значки, вы также можете изменять значки в настраиваемой системе управления фоном, не беспокоясь об отсутствующих значках, и значки загружаются по запросу, будут загружены только значки, которые необходимо отобразить. когда вы начинаете рендеринг определенной страницы. Упакованный индексный файл, который должен быть загружен, содержит только около 50 КБ данных списка значков (указание более короткого имени в магическом комментарии Webpack в Icon.jsx может уменьшить этот размер).

Недостатком этого решения является то, что каждый значок содержит дополнительную информацию о модуле Webpack в дополнение к содержимому значка, поэтому вы можете видеть, что размер папки значков намного больше, чем размер отдельного файла, упакованного в целом, плюс 50 КБ в индексе. Данные списка значков на самом деле упакованы по размеру, близкому к 3M. Однако, поскольку есть только несколько или дюжина значков, которые фактически могут использоваться взад и вперед, объем данных, загружаемых браузером пользователя, не будет слишком большим, и поскольку они загружаются асинхронно, если количество значков, отображаемых одновременно на одной странице, не Более того, это мало влияет на скорость загрузки.
Обратной стороной этого решения является то, что каждый значок содержит информацию о модуле Webpack в дополнение к содержимому значка, поэтому вы можете видеть, что размер папки icons намного больше, чем размер одного файла, упакованного ранее, и 50 КБ данных списка значков в индексном файле, фактический размер пакета близок к 3 М. Однако, поскольку фактически можно использовать только несколько значков или дюжину, объем данных, загружаемых браузером пользователя, не слишком велик. , и поскольку он загружается асинхронно, пока количество значков, отображаемых на одной странице, не больше, влияние на скорость загрузки невелико.

@ jinliming2 - классная модификация, только чтобы обнаружить, что импорт webpack действительно может передавать переменные

Полностью динамические операторы, такие как import (foo), завершатся ошибкой, потому что webpack требует по крайней мере некоторой информации о местоположении файла. Это связано с тем, что foo потенциально может быть любым путем к любому файлу в вашей системе или проекте. Import () должен содержать хотя бы некоторые информация о том, где расположен модуль, поэтому объединение может быть ограничено определенным каталогом или набором файлов.

На самом деле, пока есть префикс каталога, это недопустимо раньше.
При этом пользователи antd используют не только webpack, что немного смущает.

@aryzing Похоже, что вариант 1 из предлагаемых вами API - это то, чего пытается достичь # 12888. Будет много критических изменений, поэтому, вероятно, нам все еще нужно дождаться, пока команда Ant Design завершит его.

может использовать xhr для асинхронной загрузки SVG？
лучник-svgs

Поскольку ant deisgn сам использует больше значков, рассматриваете ли вы возможность изменения 图标文件 на асинхронную схему загрузки, чтобы она не занимала основной объем файла. Вы можете обратиться к этому:

Поскольку сам ant deisgn будет использовать больше значков, рассмотрите возможность изменения файла значков на асинхронную схему загрузки, чтобы вам не нужно было занимать основной размер файла, вы можете обратиться к этому:

webpack-ant-icon-loader

@rororofff выделил 2 доллара США на решение этой проблемы.

• Отправьте запрос на включение через
• Хотите внести свой вклад? Присоединяйтесь к этому вопросу через
• Проверьте IssueHunt Issue Explorer, чтобы увидеть больше финансируемых проблем.
• Нужна помощь разработчиков? Добавьте свой репозиторий на IssueHunt для сбора средств.

Для всех, кто напуган продолжительностью этого разговора и просто хочет использовать приложение create-react-app и ant-design, я создал шаблонный проект здесь https://github.com/AustinGreen/cra-antd-starter

Это включает в себя исправление проблемы с размером пакета значков и настраиваемую конфигурацию веб-пакета без извлечения. Спасибо @ndbroadbent , @patricklafrance и всей команде

Для всех, кто напуган продолжительностью этого разговора и просто хочет использовать приложение create-react-app и ant-design, я создал шаблонный проект здесь https://github.com/AustinGreen/cra-antd-starter

Это включает в себя исправление проблемы с размером пакета значков и настраиваемую конфигурацию веб-пакета без извлечения. Спасибо @ndbroadbent , @patricklafrance и всей команде

Как я могу использовать его в приложении Nextjs?

@AustinGreen Я пробовал твой пример.

Для приложения с боковой панелью и одной кнопкой размер ~ 100 КБ Gzip все еще слишком много.

@anjmao, если есть способ еще больше уменьшить размер пакета, дайте мне знать, и я добавлю его. Если вы создаете корпоративное веб-приложение, ~ 100 КБ Gzip для интерфейсной среды, ~ 5 компонентов (из обширная библиотека компонентов), значки и другие утилиты довольно стандартны.

@anjmao, если есть способ еще больше уменьшить размер пакета, дайте мне знать, и я добавлю его. Если вы создаете корпоративное веб-приложение, ~ 100 КБ Gzip для интерфейсной среды, ~ 5 компонентов (из обширная библиотека компонентов), значки и другие утилиты довольно стандартны.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. Вот хорошее решение

@ Oscar-ren проект уже использует псевдоним для значков (поэтому размер пакета составляет всего ~ 100 КБ, а не ~ 400 КБ)

@tobiaslins Вы изменили обходной путь с момента последнего комментария ?
Когда я использую это в проекте Nuxt, клиентский и серверный рендеринг не синхронизируются:
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Просто к сведению, версия Vue для уменьшения размера пакета с использованием псевдонима webpack:
https://github.com/atjason/ant-design-vue-demo

Обратитесь:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Размер пакета Hello World :

Поскольку ant deisgn сам использует больше значков, рассматриваете ли вы возможность изменения 图标文件 на асинхронную схему загрузки, чтобы она не занимала основной объем файла. Вы можете обратиться к этому:

Поскольку сам ant deisgn будет использовать больше значков, рассмотрите возможность изменения файла значков на асинхронную схему загрузки, чтобы вам не нужно было занимать основной размер файла, вы можете обратиться к этому:

webpack-ant-icon-loader

Для потомков это работает только для React.

Здравствуйте, когда будет выпущено решение
У меня не работает

Привет, не могли бы вы предоставить информацию об использовании
webpack-ant-icon-loader с тобой?
Дай мне посмотреть, смогу ли я помочь решить эту проблему.

Привет @ beven91!

Я делал ранее некоторые тесты и не работал, и я не мог
понять почему. Однако ваш вопрос заставил меня изолировать дело на
специальный проект Я создал для вас образец теста, чтобы показать вам и это
раз это сработало! Сохраняю постоянно 1,21 Мб из полученного пакета
что фантастично как из демонстрационного проекта, так и из того, над которым работает
коммерчески.

Я публикую здесь пример проекта на случай, если у кого-то такой же
проблемы:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

Без webpack-ant-icon-loader я получаю следующий результат:
bundle.development.js Приложение 4,59 МБ [выпущено] приложение

С помощью webpack-ant-icon-loader я получаю:
../../index.html 555 байт [отправлено]
0.bundle.development.js 1,21 MiB 0 [выпущено]
bundle.development.js 3,41 Приложение MiB [выпущено] приложение

Пара примечаний:

• думаю будет лучше, если вы удалите 0.bundle.development.js произведенный
  артефакт.
• значки исчезают из конечного продукта, т.е. они не видны на странице. Я видел вашу конфигурацию umirc.js, но использую реактивный маршрутизатор. Как я могу заставить их снова появиться?

В пятницу, 5 апреля 2019 г., в 14:38 beven91 [email protected] написал:

Привет, не могли бы вы предоставить информацию об использовании
webpack-ant-icon-loader с вами?
Дай мне посмотреть, смогу ли я помочь решить эту проблему.

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
или отключить поток
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

https://github.com/AustinGreen/cra-antd-starter

@AustinGreen просто любопытно, чем ваше решение отличается от документированного Ant react-app-rewired и babel-plugin-import метода, описанного здесь - https://ant.design/docs/react/use-with-create-react -app ?

GitHub

AustinGreen / cra-antd-стартер

шаблон для использования приложения create react и дизайна ant - AustinGreen / cra-antd-starter

Дизайн муравьев - язык дизайна пользовательского интерфейса

Язык дизайна пользовательского интерфейса корпоративного класса и реализация на основе React с набором высококачественных компонентов React, одна из лучших библиотек React UI для предприятий.

@annjawn, начиная с create-

@ Beven91, не могли бы вы помочь с этой частью моего предыдущего комментария ?

• значки исчезают из конечного продукта, т.е. они не видны на странице. Я видел вашу конфигурацию umirc.js, но использую реактивный маршрутизатор. Как я могу заставить их снова появиться?

Я имею в виду, что между значками во всем пакете есть разделение, но используемые значки по-прежнему остаются частью отдельного пакета, поэтому их использование будет означать, что он будет включать его как отдельный пакет, что делает разделение бессмысленным.

@annjawn, начиная с create-

@AustinGreen имеет смысл, но в принципе то же самое с CRACO. Кстати, я также собираюсь использовать react-loadable для разделения кода, и я думаю, что ваш метод + модульный импорт + загрузка асинхронных компонентов должны обеспечить значительное уменьшение размера пакета.

@vladimirmoushkov
Извините за опоздание, попробую решить

Привет @vladimirmoushkov

Вы можете увидеть подробности здесь. муравей-значки-веб-пакет-загрузка-тест №1

Временное решение, которое работало для меня, пока оно не будет исправлено (antd> = 3.9)

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

Это не работает для компонентов ant, которые используют значки. например, компонент предупреждения использует значки проверки и закрытия, но не отображается в этом решении.

@ Venugopal46, вы также можете добавить эти значки (которые используются компонентами ant) ​​в свой icons.js .
У меня отлично работает.

Похоже, мы близки к решению; В завершение, мы могли бы создать утилиту, которая автоматически генерирует icons.js как часть процесса сборки.

Как точно узнать, какие значки импортируются через собственные компоненты ant, чтобы поместить их в свой icons.js ?

Для меня вышеупомянутый хак:

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

И используйте следующий файл generateIconsList.sh для создания src/icons.js :

grep -iR \<Icon\  ./src/ | cut -d: -f2 | sed -e s/.*\<Icon\ //g | sort | uniq | while read icon; do 
    theme='Outline';
    themelowercase="outline";
    if [[ $icon =~ ^.*twoTone.*$ ]]; then
        theme="TwoTone";
        themelowercase="twotone";
    fi
    if [[ $icon =~ ^.*fill.*$ ]]; then
        theme="Fill";
        themelowercase="fill";
    fi
    icon=$(echo $icon | sed -e 's/type\=\"//g'| sed -e 's/\".*//g' | sed -e 's/\-/ /g')
    icon=$(python -c "print('"$icon"'.title())")
    icon=$(echo $icon | sed -e 's/ //g')
    core_path="@ant-design/icons/lib/"$themelowercase"/"$icon$theme
    search_path="node_modules/"$core_path".js"
    if [ -e $search_path ]; then
        echo "export { default as "$icon$theme" } from \""$core_path"\";"
    fi
done | sort | uniq

запустив generateIconsList.sh 2>/dev/null >src/icons.js из корня проекта - выполнит свою работу! .
Скрипт - уродливый взлом и, очевидно, не улавливает ссылки на внутренние значки или многострочные ссылки <Icon /> . В моем случае мне нужно было добавить несколько ящиков с иконками вручную, однако скрипт выполняет свою работу, но в конце концов - имея на 1,1 МБ меньше в окончательном пакете!

Как точно узнать, какие значки импортируются через собственные компоненты ant, чтобы поместить их в свой icons.js ?

Я просто добавляю значки, которые отсутствуют (не отображаются) на веб-странице, но должны быть там. Это зависит от того, сколько компонентов antd вы используете, но для меня на добавление потребовалось около 10 минут. (Хотя я использую много компонентов antd)

Например, если в таблицах отсутствуют стрелки сортировщика:

1. осмотрите таблицу ant и найдите <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . Вы увидите, что этот тег <i /> пуст. Здесь вы можете видеть, что имя значка - caret-down .
2. Найдите этот значок в папке @ant-design/icons/lib , выберите папку filled или outline (в зависимости от того, какой тип значка вам нужен) и добавьте новый импорт в icons.js вот так :

export { default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline';

Не лучший подход, но он работает так, как ожидалось. С нетерпением жду, когда команда разработчиков Ant исправит это в будущих выпусках, чтобы мы могли избежать таких грязных хаков.

Привет !

Есть новости по этому поводу? Это кандидат на следующий релиз Antd?
Я попробовал решить эту проблему несколькими способами ( webpack-ant-icon-loader , babel-import-plugin ), но ни один из них не помог.

Благодаря!

На самом деле нужно решение по этому поводу, размер пакета слишком велик!

@zlab @nuintun @anjmao за помощью, спросите https://zlab.github.io/report.html, каким плагином создается эта страница, я хочу проанализировать свой собственный проект

Нашел, это webpack-bundle-analyzer

Используется только модальный режим, но пакет значков составляет 500 КБ.

Прошло больше полугода, прогресса нет?

Отказавшись от antd, такой важный вопрос не помечен как важный ...

Теперь загрузите файлы, которые нужно упаковать в значки по запросу, 500 КБ

Я добавляю псевдоним в свой веб-пакет и экспортирую значок в icon.ts, но когда я запускаю npm start , появляется ошибка

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

это моя конфигурация разрешения webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

1. Значок значка не используется в проекте, зачем нужен пакет, помогите пожалуйста?

2. Использование webpack externals = {'antd': 'antd'} не работает должным образом. Вы все еще видите antd во время анализа пакета?

1. Значок значка не используется в проекте, зачем нужен пакет, помогите пожалуйста?
2. Использование webpack externals = {'antd': 'antd'} не работает должным образом. Вы все еще видите antd во время анализа пакета?

@wiiler

1. Обратитесь к этому, это может быть компонент, который ссылается на значок

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   Фактически, встроенные компоненты, которые используют <Icon /> , такие как <DatePicker /> , <Select /> т. Д., Будут полностью представлены при использовании.

2. Если вы используете внешние, вам необходимо отключить плагин babel-plugin-import

Я добавляю псевдоним в свой веб-пакет и экспортирую значок в icon.ts, но когда я запускаю npm start , появляется ошибка

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

это моя конфигурация разрешения webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

Я рекомендую эти две практики

• использовать псевдоним
• использовать плагин

@ As3ass1n
Почему в "../src/utils/antdIcon.ts" есть ".."? Конфигурация веб-пакета помещена в отдельный каталог?

1. Значок значка не используется в проекте, зачем нужен пакет, помогите пожалуйста?
2. Использование webpack externals = {'antd': 'antd'} не работает должным образом. Вы все еще видите antd во время анализа пакета?

@wiiler

1. Обратитесь к этому, это может быть компонент, который ссылается на значок
   > # 12011 (комментарий)
   > Фактически, встроенные компоненты, которые используют <Icon /> , такие как <DatePicker /> , <Select /> т. Д., Будут полностью представлены при использовании.
2. Если вы используете внешние, вам необходимо отключить плагин babel-plugin-import

Понятно , спасибо

Я добавляю псевдоним в свой веб-пакет и экспортирую значок в icon.ts, но когда я запускаю npm start , появляется ошибка

ERROR in ./node_modules/antd/lib/icon/index.js
Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in 'xxx\node_modules\antd\lib\icon'

это моя конфигурация разрешения webpack

resolve: {
      modules: [path.resolve(__dirname, '../src'), 'node_modules'],
      alias: {
        '@ant-design/icons/lib/dist$': path.resolve(
          __dirname,
          '../src/utils/antdIcon.ts',
        ),
      },
      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
      plugins: [
        new TsConfigPathsPlugin({
          tsconfig: path.resolve(__dirname, '../tsconfig.json'),
        }),
      ],
    },

Я рекомендую эти две практики

• использовать псевдоним
• использовать плагин

@ As3ass1n
Почему в "../src/utils/antdIcon.ts" есть ".."? Конфигурация веб-пакета помещена в отдельный каталог?

извини, это моя вина. Я написал неправильное имя файла, и теперь я решил, что он использует псевдоним. благодаря

Не решится ли эта проблема в будущем? Увеличение почти на 400 тыс.

Привет, можно ли дать хотя бы приблизительную оценку времени, когда он будет решен?

Дополнительные 490 Кбайт в пакете делают Icon s практически непригодными для использования. Это довольно большая проблема. Есть ли какое-то временное решение, которое мы можем сделать, пока вы не выпустите исправление для этого?

@smddzcy ветку читали?

@ schester44 С темой, написанной на разных языках и ... Я хотел было сказать алфавиты или даже слоговые буквы, но я думаю, что должен пойти дальше сценариев ... Полагаю, это довольно сложно для любого, чья лингвистика ограничена языками обычно ограничен алфавитами этрусского происхождения, чтобы иметь полное представление о происходящем.

Привет, ребята, я добился успеха с очень простой реализацией пакета purched-antd-icons, однако это полностью ручная реализация; Я оцениваю 3-4 часа возни, чтобы согласовать отсутствующие значки, проверяя DOM. Мы намерены реализовать это на самом последнем этапе нашего цикла разработки / выпуска. Для наших упакованных / автономных приложений единственная проблема - это приближение к очень скромному ограничению оперативной памяти iOS WKWebview. Для нас, если в мобильных профилях iOS по-прежнему не будут появляться артефакты, мы полностью проигнорируем это. Поскольку здесь нет прогресса, я бы предпочел, чтобы этот новый API значков был отложен, а старый API был возвращен.

@ afc163 ,

То, что вы написали 15 сентября 2018 года, звучит как хорошее решение (перевод Google ниже). Можете ли вы дать оценку, когда это будет реализовано?

Сохраните старое использование и добавьте предупреждение и сообщение о миграции в консоль.

import { Icon } from 'antd';
<Icon type="star" />

Поставщик нового API, например:

import Star from 'antd/icons/Star';
import Setting as SettingIcon from 'antd/icons/Setting';

<Star />
<SettingIcon />

И способ дрожания деревьев тоже:

import { Icon: { Star, Setting } } from 'antd';

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

Согласно дорожной карте V4 , это будет исправлено в четвертом квартале этого года.

Круто: смайлик:

Và чт 7, 1 thg 6, 2019 vào lúc 01:51 Zach Guo [email protected]
đã viết:

Согласно дорожной карте V4
https://github.com/ant-design/ant-design/issues/16911 , это будет
зафиксирован на уровне четвертого квартала этого года.

-
Вы получили это, потому что оставили комментарий.
Ответьте на это письмо напрямую, просмотрите его на GitHub
https://github.com/ant-design/ant-design/issues/12011?email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFMVREXWG43
или отключить поток
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI, об этом упоминалось в документации Icon . Копия ниже.

"⚠️ Что касается дополнительного размера пакета, обеспечиваемого всеми значками SVG, которые мы импортировали в 3.9.0, мы предоставим новый API, который позволит разработчикам импортировать значки по мере необходимости. Вы можете отслеживать # 12011 для дальнейшего прогресса.
Перед этим вы можете использовать плагин webpack от сообщества для фрагментации файла значка ".

Последний бит классный: код разбивается и значки загружаются асинхронно, или, в моем случае, код разбивается и значки вообще не используются.

Чиновник отказался от этого? Как давно это было, а до сих пор не решено?

Чиновник отказался от этого? Как давно это было, а до сих пор не решено?

@ zhe-he

Нет четкого решения!

Неужели этот чиновник не собирается решать эту проблему?Такой большой ненужный пакет действительно уговаривают оставить

@DemoHu

@tibotiber спасибо за ссылку на загрузчик значков, кусок значка все равно вставляется в index.html? любые предложения о том, как удалить блок из вставки из index.html

@ jasan-s Я предполагаю, что это будет зависеть от того, как вы собираете пакеты и где вы используете значки. Например, я использую последнее приложение create-response-app, которое настраивает разделение кода для меня, и я убеждаюсь, что в дереве компонентов основного пакета нет значков import (я никогда не использую значки) .

обходной путь от @tobiaslins не работает для меня, он говорит Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' может кто-нибудь указать мне, как это исправить? благодаря

@marcosfede Я использую customize-cra, есть ли способ не выбросить? У меня все еще есть эта ошибка

./node_modules/antd/lib/icon/index.js
Cannot find module: '@ant-design/icons/lib/dist'. Make sure this package is installed.

You can install this package by running: yarn add @ant-design/icons/lib/dist.

@marcosfede Ой! моя вина. Я понял.

У меня есть идея 💡 @ afc163

Мы можем использовать значок svg, а затем сохранить предыдущее использование:

<Icon type='search' />

Затем через плагин babel в:

import _searchIcon from '@ant-design/icons/lib/dist/search.svg'
<Icon component={ _searchIcon } />

// 或者直接转化成
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

Затем вы можете использовать встряхивание дерева, чтобы упаковать только используемые значки.

Что касается динамического типа, просто используйте его, если он не поддерживается. Его можно использовать для динамических нужд:

import * as AllIcons from '@ant-design/icons/lib/dist'

<Icon component={ AllIcons[type] } />

Фактически, фактическая функция исходного типа удаляется, и все типы использования преобразуются в использование компонентов.

У меня есть идея 💡 @ afc163

Мы можем использовать значок svg, а затем сохранить предыдущее использование:

<Icon type='search' />

Затем через плагин babel в:

import _searchIcon from '@ant-design/icons/lib/dist/search.svg'
<Icon component={ _searchIcon } />

// 或者直接转化成
<Icon component={ require('@ant-design/icons/lib/dist/search.svg') } />

Затем вы можете использовать встряхивание дерева, чтобы упаковать только используемые значки.

Что касается динамического типа, просто используйте его, если он не поддерживается. Его можно использовать для динамических нужд:

import * as AllIcons from '@ant-design/icons/lib/dist'

<Icon component={ AllIcons[type] } />

Фактически, фактическая функция исходного типа удаляется, и все типы использования преобразуются в использование компонентов.

Идея та же, что и преобразование 4.0, но использование экранирования babel, очевидно, снижает рабочую нагрузку, и вручную нужно обрабатывать только динамические изменения.

Я временно написал плагин Babel после того, как вчера вечером разместил комментарии. Я попробовал его локально, и это было вполне возможно @ afc163 ,

const template = require('@babel/template')

function genRequireEpx (name) {
  return template.expression(`require('@ant-design/icons/lib/dist/${name}.svg')`)()
}

module.exports = function ({ Plugin, types: t }) {
  return {
    visitor: {
      // <Icon type='search' />
      JSXElement({ node }, { opts: { patterns = [] } }) {
        const { name, attributes } = node.openingElement
        if (!(name && name.name === 'Icon') || !attributes || !attributes.length) {
          return
        }
        attributes.forEach(attr => {
          if (attr.name.name === 'type') {
            attr.name.name = 'component'
            attr.value = genRequireEpx(attr.value.value)
          }
        })
      },
      // React.createElement(Icon, { type: "search" }
      CallExpression({ node }, { opts: { patterns = [] } }) {
        const cal = node.callee
        const arg = node.arguments
        if (!(cal.object && cal.object.name === 'React' &&
            cal.property && cal.property.name === 'createElement' &&
            arg[0] && arg[0].name === 'Icon' &&
            arg[1] && arg[1].properties
          )) {
          return
        }
        arg[1].properties.forEach(obj => {
          if (obj.key.name === 'type') {
            obj.key.name = 'component'
            obj.value = genRequireEpx(obj.value.value)
          }
        })
      },
    }
  };
}

Также необходимо улучшить фактическую функцию правил понижающего преобразования и типа кастрации.

какой-либо прогресс ?

См. Пакетное решение в официальном исходном коде значка и отдельно упакуйте значок в js.
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 в разработке # 16911

Вы можете попробовать альфа-версию antd 4 прямо сейчас

https://github.com/ant-design/ant-design/releases/tag/4.0.0-alpha.2

Вытяните значок для поддержки тряски дерева.

Неужели этот чиновник не собирается решать эту проблему?Такой большой ненужный пакет действительно уговаривают оставить

Фактически, эта вещь имеет ту же тональность, что и то, что сделал afc163 на Рождество. Подтекст: «Мне это нравится, нравится тебе это или нет»

@ lizy0329 4.0.0-alpha.2 была изменена. Это включает в себя расстановку энергии и времени. Если вы торопитесь, форк меняет это самостоятельно ...

@ lizy0329 см. https://github.com/ant-design/ant-design/pull/18217

Не круто, правда.

@ lizy0329 см. № 18217

Не круто, правда.

Это не круто, правда. Но когда эта вещь меняется, последствия следует вообразить. Та же тональность, что и HO! HO!, Не может быть сравнена без сравнения.

@ lizy0329

其实 这 东西 跟 afc163 在 圣诞节 的 所作所为 是 一样 的 调 性 ， 潜 台词 是 «老子 喜欢 ， 你 爱 用 不用»

Зачем использовать SVG вместо шрифта?
Используйте компоненты React SVG для значков вместо шрифта значка

Делала ли компания это раньше?
Доставка октиконов с помощью SVG

В чем проблема сейчас?
Предыдущий значок использует шрифт, загруженный cdn, размер не будет отражен на поставщике. По умолчанию нет cdn (вы все равно можете поместить все значки в блок и использовать свой собственный cdn для хостинга) для размещения значка svg, эта часть будет отражена в поставщике.
В этом выпуске обсуждается, как сделать встряхивание дерева, как загрузить иконку по запросу.

Если вы не можете это терпеть, загрузите все значки сразу, есть (в проблеме) как минимум три способа избежать.

@ afc163
Я считаю, что журнал изменений 3.9 очень недружелюбен. Не объяснил, почему перешел на SVG. В чем недостатки шрифта и в чем его преимущество?

кстати, я против использования svg (например, viewBox до 1024 * 1024), что приводит к увеличению затрат времени на операции с составным слоем.

@muzea https://ant.design/components/icon/#SVG -icons

@ afc163 Это слишком коротко и недостаточно, чтобы объяснить, зачем нужно переходить на SVG. Чиновник не дал достаточно наглядного объяснения, зачем использовать svg и как загружать иконку по запросу, думаю, это одна из причин многих негативных эмоций в этом вопросе.

@muzea спасибо за предложение
Воздействие svg на производительность рендеринга svg其子path путь рисования Возьми его. Действительно вызвать увеличение работы слоя синтеза, последнее - большая голова.
Если это означает, что сам значок svg (ширина и высота) слишком велик, большой значок действительно вызовет сложность рисования, но коэффициент корреляции относительно низкий. Что можно гарантировать, так это то, что в процессе обработки значка, полученного от дизайнера, когнитивный опыт пользователя будет максимально улучшен (значок не сильно деформируется), а сжатие пути и соответствующая оптимизация будут выполняться с наибольшей приблизительной точностью. Фактически, если вы хотите убедиться, что браузер выполняет рендеринг на этапе слоя композиции, будет рассмотрена схема svg sprite , но это обычно добавляет к странице побочные эффекты (добавление связанных определений в заголовок или другие позиции), что важно для удобства обслуживания и Для библиотек с высокими требованиями к универсальности это может не рассматриваться.

При каких обстоятельствах люди ненавидят svg как значок веб-приложения, заслуживающий признания?

• Пользователи IE8
• Состояние сети пользователя хорошее
• Пока значок виден (не заботьтесь о четкости)
• Монохромных иконок всегда достаточно сейчас и в будущем.

Официальное отсутствие последующих мер по этому вопросу, действительно, лицо, соответствующее назначению, не решило проблему, но больше не будет.

@ lizy0329 Насколько злой человек готов спекулировать на таком поведении других, другие не имеют права вмешиваться. Но этот человек все равно может упомянуть о PR.

@HeskeyBaozi
Часть документа со значками имеет очень низкую производительность в моем браузере.

Фактически, хром в osx, когда на странице много значков antd, производительность будет очень плохой.

Может babel-plugin-macros поможет нам решить эту проблему?

@ lizy0329 Насколько злой человек готов спекулировать на таком поведении других, другие не имеют права вмешиваться. Но этот человек все равно может упомянуть о PR.

Это не злонамеренные домыслы, это называется «поиск общности». Хо! Хо! Инцидент произошел не случайно, это должно быть многолетнее накопление. Я не клеветал на себя, я просто хочу, чтобы antd развивался лучше, и думал о последствиях и решениях для каждого обновления.

Итак, когда я могу это использовать? Я использовал antd в проекте, но я ничего не делал, поэтому я импортировал кнопку. Пакетный пакет изменился с 177k на 1,1m ... Анализатор посмотрел на него, и это действительно были значки. Большой

Есть ли способ удалить значки из пакета, когда вы его не используете?

Я использую переопределение с помощью приложения create-response-app. Вот так:

fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
}),

Вы , ребята должны проверить @ qaiser110 «s решение для antd@3 .

Размер пакета огромен, потому что antd source импортирует все значки с resolve.alias для перенаправления импорта @ant-design/icons/lib/dist в пользовательский файл, в котором есть значки, выбранные из @ant-design/icons .

Это лучше, чем иметь большой комплект, но это все же не идеально, потому что вам нужно вручную выбирать значки. Хотя обычно вы просто выбираете вишню по мере необходимости (когда значок отсутствует). Чтобы выяснить, что нужно выбрать, вы можете найти используемые значки в antd и исходном коде.

Было бы полезно, если бы у нас был общий файл или пакет выбранных иконок из источника antd . Таким образом, нам нужно беспокоиться только о выборе вишни для нашего собственного источника. Вот суть идеи . Мы могли бы сгруппировать значки, которые экспортирует компонент antd, и вместо того, чтобы смотреть на источник antd для выбора вручную, вы могли бы просто export * from 'antd-cherry-pick-icons/icon' в своем файле пользовательских значков. Это можно сделать, приложив усилия сообщества, чтобы поддерживать его как можно более актуальным с помощью источника antd .

@LucasBassetti , вы уверены, что вам не нужны значки? Даже если вы не используете <Icon /> напрямую, некоторые компоненты antd используют ` . Например, <Alert /> .

Обратите внимание, что antd 4.0 (в альфа-версии) устраняет эту проблему, не используя импорт с подстановочными знаками . Вместо этого они выбирают импорт для каждого компонента .

Временное решение, которое работало для меня, пока оно не будет исправлено (antd> = 3.9)

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

Если кто ищет config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

Путь к значкам @ant-design/icons/lib/outline/DownOutline

Марк уделяет этой проблеме пристальное внимание. В настоящее время используется antd 3 и введена кнопка. Просто свяжите момент и значок. Размер файла значка более 500 КБ.

Проблемы моментов https://github.com/ant-design/babel-plugin-import/issues/352

Для людей, использующих create-response-app через react-app-rewired .

config-overrides.js

Const  path  =  require ( ' path ' );

/* config-overrides.js */
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || {});
  Alias[ ' @ant-design/icons/lib/dist$ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  Config . resolve . alias  = alias;

  Return config;
}

icons.js Суть

Не знаю, почему, но после использования вашего icons.js мой пакет увеличился на 600 КБ.

Возможно, потому что мне нужно использовать этот пакет в своем коде https://www.npmjs.com/package/html-webpack-inline-source-plugin

Я уменьшил размер пакета на 500 КБ, отредактировав config-override.js следующим образом:

config-override.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

До

После

Я уменьшил размер пакета на 500 КБ, отредактировав config-override.js следующим образом:

config-override.js

const { override, fixBabelImports } = require('customize-cra');
const path = require('path');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css'
  }),
  // used to minimise bundle size by 500KB
  function(config, env) {
    const alias = config.resolve.alias || {};
    alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './src/icons.js');
    config.resolve.alias = alias;
    return config;
  }
);

./src/icons.js

/**
 * List all antd icons you want to use in your source code
 */
export {
  default as SearchOutline
} from '@ant-design/icons/lib/outline/SearchOutline';

export {
  default as CloseOutline
} from '@ant-design/icons/lib/outline/CloseOutline';

export {
  default as QuestionCircleOutline
} from '@ant-design/icons/lib/outline/QuestionCircleOutline';

export {
  default as PlayCircleOutline
} from '@ant-design/icons/lib/outline/PlayCircleOutline';

export {
  default as PauseCircleOutline
} from '@ant-design/icons/lib/outline/PauseCircleOutline';

export {
  default as LoadingOutline
} from '@ant-design/icons/lib/outline/LoadingOutline';

До

После

Спасибо! Мне это помогло!

Путь к значкам @ant-design/icons/lib/outline/DownOutline

Эй, ты можешь найти какую-нибудь работу. Я тоже получаю ту же ошибку

Если я не использую встроенный значок, как удалить @ ant-design ?

Из того, что я вижу здесь, представлены только обходные пути. Разве не было бы намного проще и чище, чтобы компоненты просто импортировали значок, который они используют? Это решит основную причину, и я ожидаю, что это не будет слишком сложно, если мы будем использовать именованный импорт, не так ли?

@Nomeasmo , должно быть исправлено в v4, согласно дорожной карте .

Было бы неплохо, если бы в 3.X было исправление. Я не планирую обновляться до 4, если это возможно.

Надеюсь когда-нибудь полностью отказаться от Ant, потому что CSS для простых вещей, таких как кнопки, СОВЕРШЕННО сложен, в библиотеке отсутствуют функции доступности, и даже обновления патчей заполнены почти 1000 коммитами. На мой вкус, это слишком много оттока.

отметка

Для людей, использующих create-response-app через react-app-rewired .

config-overrides.js

const  path  =  require ( ' path ' );

/ * config-overrides.js * /
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || (});
  alias [ ' @ ant-design / icons / lib / dist $ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  config . resolve . alias  = alias;

  return config;
}

icons.js gist

Не работает, все равно размер пакета для значков велик

Кажется, встряхивание дерева для иконок не работает из коробки в v4.0.0-beta.0.
Кто-нибудь удачно сжал бандл иконок? Не могли бы вы поделиться своим конфигом?

Позже я попробовал v4.0.0-beta.1 и удалил пакет @ant-design/compatible , все значки все еще включены в пакет.

Для людей, использующих create-response-app через react-app-rewired .
config-overrides.js

const  path  =  require ( ' path ' );

/ * config-overrides.js * /
 module . exports  =  function  override ( config , env ) {
   let alias = ( config . resolve . alias  || (});
  alias [ ' @ ant-design / icons / lib / dist $ ' ] =  path . resolve ( __dirname , " ./src/icons.js " );

  config . resolve . alias  = alias;

  return config;
}

icons.js gist

Не работает, все равно размер пакета для значков велик

вам нужен файл icons.js, чтобы включить в него значки, которые нужно импортировать, например https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

Временное решение, которое работало для меня, пока оно не будет исправлено (antd> = 3.9)

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

Если кто ищет config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

Уменьшил мой пакет с 700кб до 200кб, спасибо

Кажется, встряхивание дерева для иконок не работает из коробки в v4.0.0-beta.0.
Кто-нибудь удачно сжал бандл иконок? Не могли бы вы поделиться своим конфигом?

Позже я попробовал v4.0.0-beta.1 и удалил пакет @ant-design/compatible , все значки все еще включены в пакет.

Такая же проблема в 4.0.0-rc.0, несмотря на мой обновленный импорт значков

@jhockett У меня была такая же проблема! Я обнаружил, что некоторые из моих импортных товаров нарушают процесс дрожания деревьев. Например: _import Text from 'antd / lib / typography / Text'; _
Я заменил его на _import {Typography} из 'antd'; _, и значки покинули мой комплект!

@jhockett У меня была такая же проблема! Я обнаружил, что некоторые из моих импортных товаров нарушают процесс дрожания деревьев. Например: _import Text from 'antd / lib / typography / Text'; _
Я заменил его на _import {Typography} из 'antd'; _, и значки покинули мой комплект!

Все мои импортированные муравьиные конструкции используют указанный вами синтаксис: _import {Typography} from 'antd'; _
так что, похоже, это не моя проблема, но, возможно, это может повлиять на других!

Временное решение, которое работало для меня, пока оно не будет исправлено (antd> = 3.9)

1. Адаптируйте веб-пакет, чтобы значки отображались иначе. В конфигурации вашего веб-пакета:

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

1. Создайте icons.js в папке src/ или где угодно. Убедитесь, что он соответствует пути псевдонима!
   В этом файле вы определяете, какие значки должен включать antd! Мне нужен был только значок «Вниз» для компонента «Выбрать» в antd.

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

Это также можно сделать с помощью react-app-rewire (модификации create-response-app) в config-overwrites.js

Если кто ищет config-overwrites.js

const { override, fixBabelImports, addWebpackAlias } = require('customize-cra');
const rewireCompressionPlugin = require('react-app-rewire-compression-plugin');
const rewireUglifyjs = require('react-app-rewire-uglifyjs');
const path = require('path');


module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  addWebpackAlias({
    ['@ant-design/icons/lib/dist$']: path.resolve(__dirname, './src/client/icons.js')
  }),
  rewireUglifyjs,
  rewireCompressionPlugin
);

Уменьшил мой пакет с 700кб до 200кб, спасибо

когда я использую это, это не работает, что мне делать дальше:

Для тех, кто использует Parcel.js, у меня сработало следующее:

npm install purched-antd-icons

И добавьте в package.json :

  "alias": {
    "@ant-design/icons": "purched-antd-icons"
  }

Кажется, встряхивание дерева для иконок не работает из коробки в v4.0.0-beta.0.
Кто-нибудь удачно сжал бандл иконок? Не могли бы вы поделиться своим конфигом?

Позже я попробовал v4.0.0-beta.1 и удалил пакет @ant-design/compatible , все значки все еще включены в пакет.

Я решил свою проблему, изменив конфигурацию babel-plugin-import вот так .

  {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },

Вдохновленный https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531, я получил его работу с antd@4 (https://github.com/ant-design/ant -design / issues / 20661).

Добавьте следующую resolve.alias в конфигурацию webpack (также должна работать с customize-cra ):

// [...]
config.resolve.alias = {
    "@ant-design/icons$": resolve(__dirname, "path/to/your/src/icons.tsx")
};
// [...]

Ваш icons.tsx должен выглядеть так:

/**
 * Provide all needed icons from antd. This file is associated to the webpack.config.js resolve.alias.
 */

export { default as LoadingOutlined } from "@ant-design/icons/LoadingOutlined";

Например, указанный выше значок LoadingOutlined необходим для компонента Button . Добавьте в этот файл все необходимые значки. И вы также можете повторно использовать этот файл. Но это зависит от вас, потому что вы также можете использовать прямой импорт из @ant-design/icons :

import { LoadingOutlined } from "./icons";
import { LoadingOutlined } from "@ant-design/icons";

Предлагаемое решение @matzeeable сработало для меня. Мне интересно, как правильно узнать, какие значки я должен включить в icons.tsx ? Например: у меня есть элементы формы, такие как InputNumber и раскрывающийся список Select. Какие-нибудь подсказки, пожалуйста?

Мне интересно, как правильно узнать, какие значки я должен включить в icons.tsx ? Например: у меня есть элементы формы, такие как InputNumber и раскрывающийся список Select. Какие-нибудь подсказки, пожалуйста?

@ pradeepb6 Представьте, что вы antd . Webpack пытается разрешить значки, но не может найти именованный экспорт, потому что вы никогда не определяли его в своем icons.tsx . Вы получите такое предупреждение:

После этого вы знаете, какие значки нужно экспортировать в icons.tsx чтобы компонент работал должным образом. 🙂

@matzeeable Спасибо. Я пробовал это. Но я получаю ошибки, как показано на скриншоте. Код можно найти здесь .

Я уже писал в github babel-plugin-import, но, возможно, у кого-то здесь была эта проблема из-за того, что здесь было больше людей. Я перешел на V4 и наблюдаю большой размер пакета.
Когда я добавил "libraryDirectory": "es" как написано в https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378, я наблюдаю следующую ошибку:

[ error ] /home/maciek/Dokumenty/websites/bookingapp/frontend/node_modules/antd/es/notification/index.js:3
import * as React from 'react';
       ^

SyntaxError: Unexpected token *
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.antd/es/notification (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10975:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../lib/withData.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:8200:78)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Module../pages/_app.js (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10614:71)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at Object.0 (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:10754:18)
    at __webpack_require__ (/home/maciek/Dokumenty/websites/bookingapp/frontend/.next/server/static/development/pages/_app.js:23:31)
    at 

Кстати, я использую next.js. Депс:

    "@ant-design/compatible": "0.0.1-rc.1",
    "@ant-design/icons": "^4.0.0-rc.0",
    "antd": "^4.0.0-rc.3",
    "babel-plugin-import": "^1.13.0",

Кто угодно?

@ afc163 вознаградил @vagusx 142,10 доллара . Смотрите на IssueHunt

• : moneybag: Общий депозит: $ 203.00
• : tada: Вознаграждение за репозиторий (20%): 40,60 $
• : гаечный ключ: Сервисный сбор (10%): 20,30 $

Я столкнулся с той же проблемой и @chemicalkosek, это [email protected] + next.js настоящее время решено esm.

yarn add esm

"scripts": {
    "dev": "NODE_OPTIONS=\"-r esm\" next",
    "build": "NODE_OPTIONS=\"-r esm\" next build",
    "start": "NODE_OPTIONS=\"-r esm\" next start"
}

Надеюсь, это поможет другим :)

@ i-tengfei Вау, работает! Большое спасибо!

Для antd @ 4 теперь мы используем собственный пакет, который перезаписывает пакет @ ant-design / icons и заменяет значки antd на значки fontawesome.

Он предоставляет только значки, которые требуются antd. И значительно уменьшил размер пакета, так как нам не удалось включить treehaking, и поэтому был включен весь пакет an-design / icons.

https://github.com/DavidSichau/antd-fa-icons

Пожалуйста, обновитесь до [email protected] , эта проблема полностью решена.

https://github.com/ant-design/ant-design/issues/20661

Для тех, кто использует Parcel.js, у меня сработало следующее:

npm install purched-antd-icons

И добавьте в package.json :

  "alias": {
    "@ant-design/icons": "purched-antd-icons"
  }

Спасибо, это работает !

@ afc163 @yesmeck устанавливает значок в соответствии с данными, возвращаемыми фоном, как асинхронно загружается интерфейс, например, строка значка, возвращаемая фоном, равна AppstoreOutlined , мой подход следующий:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Но сейчас скомпилировать напрямую невозможно.Динамическая загрузка не работает

@ afc163

Пожалуйста, обновитесь до [email protected] , эта проблема полностью решена.

20661

Я не уверен, решится ли это вообще. В пакете по-прежнему есть все пакеты значков:
Я импортировал все значки таким образом.
Я использую "@ ant-design / icons": "^ 4.0.6" и webpack 4.43.0
также есть эта конфигурация

 {
    "libraryName": "antd",
+   "libraryDirectory": "es",
    "style": true
  },

import {DeleteOutlined, EditOutlined, WarningTwoTone} from "@ant-design/icons";

@ afc163 @yesmeck устанавливает значок в соответствии с данными, возвращаемыми фоном, как асинхронно загружается интерфейс, например, строка значка, возвращаемая фоном, равна AppstoreOutlined , мой подход следующий:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Но сейчас скомпилировать напрямую невозможно.Динамическая загрузка не работает

Я думаю так должно быть Измените на {Icon}.
Если вы разместите сообщение об ошибке, вы сможете лучше определить причину.

Используя babel-plugin-import я уменьшил размер с 500kb +

['import', { 
  libraryName: '@ant-design/icons', 
  libraryDirectory: '', // defaults to 'lib'
  camel2DashComponentName: false  // defaults to true
}]

import {
  DesktopOutlined,
  FileOutlined,
  PieChartOutlined,
  TeamOutlined,
  UserOutlined,
} from '@ant-design/icons'

@thangbn

  [
       "import",
       {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      },
       "@ant-design/icons"

  ],

@ mit123suki @nwoeddie Спасибо за ваше предложение, я попробовал оба, но все равно не повезло. Не уверен, что я ошибся в конфигурации. Моя полная конфигурация приведена ниже:

const webpack = require("webpack");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
var LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
const path = require("path");

let dev = {
  mode: "development",
  optimization: {
    usedExports: true,
    noEmitOnErrors: true
  },
  entry: [
    path.resolve(__dirname, "./src/index.tsx")
  ],
  output: {
    path: path.resolve(__dirname, "./public"),
    publicPath: "/",
    filename: "[name].js"
  },
  target: "web",
  devServer: {
    // writeToDisk: true,
    historyApiFallback: true, // catch all 404
    port: 8080,
    hot: true,
    proxy: {
      "/backend": {
        target: "http://localhost:4000",
        pathRewrite: { "^/backend": "" }
      },
      "/runner": {
        target: "http://localhost:4001",
        pathRewrite: { "^/runner": "" }
      }
    }
  },
  devtool: "cheap-module-eval-source-map",
  resolve: {
    alias: {
      "react-dom": "@hot-loader/react-dom"
    },
    extensions: [".js", ".jsx", ".less", ".tsx", ".ts"]
  },
  plugins: [
    new LodashModuleReplacementPlugin(),
    new AntdDayjsWebpackPlugin(),
    new CopyWebpackPlugin([{ from: path.join(__dirname, "./static"), to: "./" }]),
    new ProgressBarPlugin(),
    new ForkTsCheckerWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      "process.env.ENV": JSON.stringify("dev"),
    }),
    new BundleAnalyzerPlugin({
      "openAnalyzer": true,
      analyzerPort: 8889
    })
  ],
  module: {
    rules: [
      {
        test: /\.(tsx|ts)$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true
            }
          }
        ],
        exclude: /node_modules/
      }
      , {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            "presets": [
              [
                "@babel/preset-env",
                {
                  "targets": "defaults",
                  "modules": false
                }
              ],
              [
                "@babel/preset-react"
              ]
            ],
            plugins: [
              "@babel/plugin-transform-runtime",
              ["import",
                { "libraryName": "antd", "style": false, "libraryDirectory": "es" }, "antd"],
              ["import",
                {
                  "libraryName": "@ant-design/icons",
                  // "style": false,
                  "libraryDirectory": "es/icons",
                  "camel2DashComponentName": false
                }, "@ant-design/icons"],
              "react-hot-loader/babel"
            ]
          }
        }
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
              javascriptEnabled: true
            }
          }]
      },
      {
        test: /\.(png|jpg|gif|svg|ico)$/,
        use: [
          {
            loader: "file-loader"
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader"
        ]
      }
    ]
  },

};

module.exports = dev;

@ afc163 @yesmeck устанавливает значок в соответствии с данными, возвращаемыми фоном, как асинхронно загружается интерфейс, например, строка значка, возвращаемая фоном, равна AppstoreOutlined , мой подход следующий:

const iconStr = res.icon // 服务器返回的数据假如
const Icon = React.lazy(() => import(`@ant-design/icons/${iconStr}`))

// render
<Icon />

Но сейчас скомпилировать напрямую невозможно.Динамическая загрузка не работает

Думаю, его следует поменять на {Icon}.
Если вы разместите сообщение об ошибке, вы сможете лучше определить причину.

Failed to compile.

./node_modules/@ant-design/icons/dist/icons/index.d.ts
Module not found: Can't resolve './AccountBookFilled' in '/Users/andy/Projects/shop-platform/node_modules/@ant-design/icons/dist/icons'

@Xezzon прямо показывает, что первый модуль значка не найден. Я попытался добавить конфигурацию babel-plugin-import, но она все равно не работает.

@nwoeddie

  [
       "import",
       [
         { libraryName: 'antd', style: true },
         {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      }] 
  ],

"babel-loader": "^ 7.1.5"
"babel-plugin-import": "^ 1.13.0"

привет, nwoeddie ~ !, моя конфигурация не работает, у меня были разделены параметры импорта на одиночные, но она тоже не используется; Могу я узнать полную конфигурацию?

этот aritcle может решить проблему: https://www.cnblogs.com/fulu/p/13255538.html

@nwoeddie

  [
       "import",
       [
         { libraryName: 'antd', style: true },
         {
         "libraryName": "@ant-design/icons",
         "libraryDirectory": "es/icons",
         "camel2DashComponentName": false
      }] 
  ],

"babel-loader": "^ 7.1.5"
"babel-plugin-import": "^ 1.13.0"

привет, nwoeddie ~ !, моя конфигурация не работает, у меня были разделены параметры импорта на одиночные, но она тоже не используется; Могу я узнать полную конфигурацию?

Это неправильный синтаксис для babel 7. Плагин импорта не поддерживает массивы. Правильный путь:

    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": true}, "ant"],
    ["import", {
      "libraryName": "@ant-design/icons",
      "libraryDirectory": "es/icons",
      "camel2DashComponentName": false
    }, "ant-design-icons"],