Traduction de ce numéro:

La taille du paquet antd svg est trop grande, il est recommandé @ package ant-design / icons sur demande

• [] J'ai recherché les numéros de ce référentiel et je pense qu'il ne s'agit pas d'un doublon.

Version

3.9.0

Environnement

Webpack4

Lien de reproduction

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

Étapes à suivre pour reproduire

Construction du Webpack

Qu'attend-on?

Pack d'icônes au besoin, fractionnement du fichier js

Que se passe-t-il réellement?

Emballé dans des vendeurs de morceaux

Je n'ai utilisé que quelques icônes

<Icon /> introduit la bibliothèque d'icônes dans son intégralité par défaut. Parce que je ne sais pas quel type d'icône vous allez introduire pour l'exécution. Auparavant, les icônes étaient hébergées dans iconfont.cn il n'y a donc aucune perception d'emballage.

Cela nécessite une discussion approfondie du plan temporaire, voir https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

cc @yesmeck

Il est nécessaire de fournir une méthode qui peut être chargée à la demande, et cette méthode est également utilisée à l'intérieur du composant antd.

import Star from 'antd/icons/star';

<Star />

Mais si vous faites cela, l'écriture précédente est incompatible

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

Il ne peut pas être emballé à la demande, et le chargement asynchrone est également bon,

Avant d'utiliser iconfont, le contenu de la page sortira en premier et l'icône sera chargée lentement

<Icon.Star />

Mais si vous faites cela, l'écriture précédente est incompatible

Non, tant que vous n'avez pas besoin de <Icon /> ne pourrez pas tout emballer.

Certaines scènes ne peuvent pas être empaquetées à la demande, comme la configuration de l'icône du menu, si elle peut être configurée en arrière-plan, alors le frontal ne peut pas prédire quelle icône sera définie.
Le chargement asynchrone est plus approprié, tapez simplement @ ant-design / icons dans un morceau

En fait, les composants intégrés qui utilisent <Icon /> , tels que <DatePicker /> , <Select /> etc., seront entièrement introduits lorsqu'ils seront utilisés.

S'il peut être configuré en arrière-plan, le frontal ne peut pas prédire quelle icône sera définie. Le chargement asynchrone est plus approprié

Le menu du système back-end que nous avons créé est configuré, le chargement asynchrone des icônes est vraiment nécessaire et le packaging complet est trop grand.

Je pense que l'asynchrone est mieux.
Si vous souhaitez le conditionner à la demande, vous devrez peut-être écrire un plugin babel comme babel-plugin-import .

En fait, les composants intégrés qui utilisent <Icon /> , tels que <DatePicker /> , <Select /> etc., seront entièrement introduits lorsqu'ils seront utilisés.

Changement de l'écriture interne

Dans le projet, le type est une variable, puis-je introduire uniquement le montant total?
<Icon type={icon} />
Cela peut-il être partiellement introduit?

Voyez si vous pouvez utiliser un sprite de symbole svg pour réduire autant que possible la taille du package complet.

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

De plus, le package dist doit être construit directement dans @ant-design/icons , et il n'est pas nécessaire de s'appuyer directement sur le code source légèrement compilé.

+1, le forfait est en effet doublé

💢 Maux de tête. . . . Oncle. . .

La chose la plus embarrassante est d'apporter beaucoup de SourceMappingUrl

Cela m'a fait revenir à la version 3.8.2

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projet umi)

Voici une solution qui utilise resolve.alias dans le webpack pour réduire la taille du bundle.
Nous prévoyons de concevoir de nouvelles API qui permettront d'importer les icônes nécessaires dans l'avenir.
Notez que vous devez également importer les icônes utilisées dans le composant antd , telles que loading , close-circle et ainsi de suite.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projet umi)
Voici une solution temporaire: configurez le champ resolve.alias du webpack.
À l'avenir, nous devrions trouver un moyen de concevoir une nouvelle API d'icônes pour faciliter l'utilisation des icônes de chargement à la demande.
Notez que les icônes à la demande doivent également inclure les icônes utilisées par d'autres composants de antd , tels que loading , close-circle et ainsi de suite.

@HeskeyBaozi Tout d'abord, merci pour votre travail acharné! Mon heure actuelle est 9:29 , et j'ai vu que l'heure que vous avez soumise était de 6 hours ago , les frères sont vraiment assez bons! Comme: thumbsup :: thumbsup :: thumbsup:

Ma compréhension est de lister les icônes utilisées par le projet séparément, y compris les icônes utilisées par antd

Vous pouvez importer le fichier avant que la solution officielle pour le chargement asynchrone ne soit donnée.

@ChiaJune antd liste complète des icônes utilisées dans le composant, s'il y a une omission, je peux ajouter
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

Vous pouvez vous référer à l'approche de fontawsome

UNE

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

Conservez l'ancienne utilisation et ajoutez un message d'avertissement et de migration dans la console.

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

Nouvelle API du fournisseur comme:

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

<Star />
<SettingIcon />

Et aussi capable de trembler les arbres:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projet umi)

Voici une solution qui utilise resolve.alias dans le webpack pour réduire la taille du bundle.
Nous prévoyons de concevoir de nouvelles API qui permettront d'importer les icônes nécessaires dans l'avenir.
Notez que vous devez également importer les icônes utilisées dans le composant antd , telles que loading , close-circle et ainsi de suite.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (projet umi)
Voici une solution temporaire: configurez le champ resolve.alias du webpack.
À l'avenir, nous devrions trouver un moyen de concevoir une nouvelle API d'icônes pour faciliter l'utilisation des icônes de chargement à la demande.
Notez que les icônes à la demande doivent également inclure les icônes utilisées par d'autres composants de antd , tels que loading , close-circle et ainsi de suite.

@HeskeyBaozi Excellente solution!

gardez un œil sur cela, car nous utilisons également cette version.

cc @jameswhf @xcqwan

Pareil pour moi. L'importation séparée ne couvre pas tous les scénarios d'utilisation, il est donc nécessaire de corriger le tremblement de l'arbre. Veuillez vérifier ici

@serayuzgur
J'utilise webpack.alias et cela fonctionne pour moi. Peut-être que cela peut vous aider :)

branche antd-icon-tree-shaking de mon dépôt (Webpack4 + Babel 7.0)

Cela pose également des problèmes si tout ce que j'ai est un Button dans un bundle (probablement car il prend en charge les icônes). Une solution de contournement pour réduire la taille du bundle si tout ce que j'utilise est un Button ?

(Dans la capture d'écran - j'ai juste un composant Button mais les icônes gonflent principalement le bundle)

Solution temporaire qui a fonctionné pour moi jusqu'à ce qu'elle soit corrigée (antd> = 3,9)

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Je pense qu'une meilleure API serait si nous pouvions définir l'icône en passant du JSX de cette façon, je pourrais simplement importer l'icône nécessaire uniquement et la transmettre au bouton. Cela faciliterait également le travail avec des icônes tierces (ou n'importe quel svg).

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

Juste ma préférence personnelle :)

Pour les personnes utilisant create-react-app via 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

Pour les personnes utilisant create-react-app via 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

Cette méthode supprime la compatibilité de twoToneColor.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
résulte en:

Salut,
La cause de ce problème est la possibilité d'utiliser des icônes comme <Icon type="check-circle" . Cette API a besoin que chaque icône soit incluse afin de pouvoir fournir tout ce que vous donnez comme type.

Cela nous donne également la possibilité de décider des icônes lors de l'exécution et c'est précieux pour moi. Donc, selon moi, l'API devrait rester la même, mais le composant Icon devrait prendre en charge le chargement des icônes du type donné à la demande .

Peut-être à l' aide de l' importation dynamique (dépend # 12235 - mise à niveau vers Webpack 4) ou par un Webpack 3 bibliothèque tels que réagir chargeable

Sur la base de ce commentaire, allez plus loin dans la solution temporaire:

$ yarn add purched-antd-icons

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

le paquet purched-antd-icons supprime toutes les icônes non utilisées par les composants officiels d'antd. Pour ma condition, Icomoon est le fournisseur du système d'icônes du projet.

Voici une analyse comparative du bundle create-react-app éjecté.

sortie webpack

analyse de bundle

Vous pouvez importer le fichier avant que la solution officielle pour le chargement asynchrone ne soit donnée.

avant:

après:

la solution de contournement de @tobiaslins ne fonctionne pas pour moi, il dit Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' quelqu'un peut-il me montrer comment le réparer? Merci

@marcosfede J'ai eu le même problème que vous. L'alias ne fonctionne pas correctement.

Vérifiez si vous avez __dirname défini dans path.resolve(__dirname, "./src/icons.js")

Si vous utilisez la create-react-app via l'alternative react-app-rewired, vous pouvez faire:

• chemins
• webpack.dev.js
• webpack.prod.js

La mise à niveau 3.9 a augmenté notre offre groupée de 700 Ko (23%). Bien que nous aimions la nouvelle implémentation, l'augmentation de la taille du bundle a été une grande surprise. L'augmentation est compensée en raison du fait de ne pas inclure «iconfont». Nous allons implémenter la solution @Obooman qui verra encore notre empreinte globale augmenter, mais pas suffisamment pour nous justifier de geler à 3.8.4.

L'implémentation du paquet purched-antd-icons laisse notre projet avec de nombreuses icônes manquantes.

@michaelpeterlee purched-antd-icons ne fournit que les icônes dont les composants officiels ont besoin, nous l'utilisons car nous n'utilisons pas d'autres icônes dans antd. pour plus de personnalisation, vous devrez gérer vos icônes manuellement ou choisir des générateurs d'icônes de police comme icomoon ou iconfont comme fournisseur de système d'icônes.

@marcosfede J'ai eu le même problème que vous. L'alias ne fonctionne pas correctement.

Vérifiez si vous avez __dirname défini dans path.resolve(__dirname, "./src/icons.js")

Si vous utilisez la create-react-app via l'alternative react-app-rewired, vous pouvez faire:

• chemins
• webpack.dev.js
• webpack.prod.js

cela a été utile, merci. J'ai éjecté le projet donc j'avais __dirname pointé vers le dossier de configuration où se trouvent les fichiers webpack au lieu du dossier racine

Peut-être que l'équipe AntDesign devrait envisager de revenir à la méthode précédente (avant la version 3.9). Est-ce la meilleure façon, la manière sage.

Ce devrait être comme des externes. https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede J'ai eu le même problème que vous. L'alias ne fonctionne pas correctement.
Vérifiez si vous avez __dirname défini dans path.resolve(__dirname, "./src/icons.js")
Si vous utilisez la create-react-app via l'alternative react-app-rewired, vous pouvez faire:

• chemins
• webpack.dev.js
• webpack.prod.js

cela a été utile, merci. J'ai éjecté le projet donc j'avais __dirname pointé vers le dossier de configuration où se trouvent les fichiers webpack au lieu du dossier racine

Cela fonctionne pour moi, merci!

Voici les modifications que nous apporterons dans la prochaine version pour résoudre le problème de la taille du bundle.

Créez un composant séparé pour chaque icône

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

Deprecate reference a icon as a string

Un avertissement obsolète s'affiche lorsque vous référencez une icône sous forme de chaîne dans les composants suivants:

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

Pour des raisons de compatibilité, nous chargerons un sprite SVG à la demande lorsque vous référencerez une icône sous forme de chaîne.

Au lieu de référencer une icône en tant que chaîne, vous devez passer ReactNode explicitement à ces accessoires:

import StarFilled from 'antd/icons/StarFilled';

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

@yesmeck Une bonne solution qui introduit à la fois le tremblement des arbres et aucune méthode addIcon !

Une question. Et si nous avons des styles CSS sur ces icônes et que nous devons changer le type des icônes de manière dynamique? Doit-on transmettre des styles à toutes les icônes de substitution?

@michaelpeterlee rc-calendar ne dépendait pas de antd et @ant-design/icons , donc il n'est pas censé "charger toute la bibliothèque d'icônes". Vous pouvez créer un problème dans https://github.com/react-component/calendar/issues avec une démo de reproduction.

Mon erreur. J'ai supprimé mon commentaire non pertinent. Ce doit être le composant DatePicker qui introduit l'icône:

Mon point est que je n'importe pas d'icônes antd n'importe où dans mon projet, mais certains composants antd importent Icon partir de antd . Ce serait bien si ces composants pouvaient importer uniquement les icônes dont ils ont besoin, au lieu de toute la bibliothèque d'icônes.

Voici les modifications que nous apporterons dans la prochaine version pour résoudre le problème de la taille du bundle.

@yesmeck

Voulez-vous dire 3.11.x ? Il ne semble pas être inclus dans 3.10.4 .

@johnernaut # 12888

De retour à la v3.8.4 pour le moment, la version 3.9.0+ est trop grosse après avoir été packagée, la version mentionnée par les dieux ci-dessus n'est qu'une solution temporaire, j'attends avec impatience la prochaine version pour pouvoir charger l'icône de manière asynchrone

Merci @yesmeck , j'attends avec impatience la prochaine version.

Je voulais également mentionner que j'ai publié un plugin Ant Design pour create-react-app v2 et craco . Voici le plugin craco-antd sur GitHub

Je viens d'ajouter une section Large Bundle Size from Ant Design Icons au README, et je garderai un œil sur ce problème (et le PR .) Merci pour le conseil @sunel (et autres). J'ai inclus un lien vers votre commentaire sur la configuration d'un alias.

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"
    }
  }
}

Je rédige un référentiel de reproduction présentant ce problème. La configuration du webpack est modifiée à partir de l'exemple d'intégration d'origine ng-zorro-antd ici et il semble que le DllPlugin rend l'arborescence dans le module ES aplati inutile.

Cela fonctionne comme prévu si le DllPlugin est absent.

Voici quelques arrière-plans historiques sur le fait que Webpack ne fait pas de tremblement d'arbre sur les modules aplatis. Je pense que ce qu'ils font référence a été principalement corrigé dans la version récente, à l'exception de certains cas extrêmes de DllPlugin .

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

Il est intéressant de noter que ce n'est qu'en mai que Webpack prend en charge le tremblement d'arbre sur DllPlugin , j'ai ajouté entryOnly: true mais pas de chance. Je rédigerais un exemple plus isolé et poserais un problème à Webpack.

Modifications: ajout du référentiel de reproduction et des problèmes historiques.

La fin de l'histoire: c'est ici que le référentiel de reproduction est faux. Le webpack 3.5.6 est trop ancien sans le support de entryOnly: true . C'est pourquoi les modules fesm5 ne sont pas ébranlés.

Pour ceux qui souhaitent regrouper ng-zorro-antd avec des fournisseurs de dll

• Si vous avez webpack > = 4.9.0 , ajoutez entryOnly: true à votre configuration DllPlugin .
• Sinon, ajoutez ce paramètre à votre configuration webpack

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 a financé 200,00 $ pour ce numéro. Voir sur IssueHunt

Les fichiers de polices ne peuvent-ils pas participer à l'empaquetage et les importer localement?trop grand

Est-ce que le projet officiel d'optimiser ce problème? Pouvez-vous fournir une solution svg locale similaire à la version antérieure à la version 3.8?

Dans l'attente d'une amélioration

Existe-t-il une solution officielle?

@fuhaiwei Jusqu'à la prochaine version, consultez ce commentaire pour une solution de contournement en exportant les icônes directement https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Actuellement, j'utilise webpack.resolve.alias remplacer antd/es/icon par un composant personnalisé.
L'assembly sera <Icon /> a props.type et props.theme envoyé à l'API spécifiée.
De cette manière, toutes les données Icon utilisées peuvent être enregistrées pendant le test de page.
Ensuite, sur la base des données et https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 générer automatiquement icons.js .
J'espère trouver une meilleure solution.

Actuellement, j'utilise webpack.resolve.alias pour remplacer antd/es/icon par un composant personnalisé.
Ce composant enverra props.type et props.theme de <Icon /> à l'API spécifiée.
Cela vous permet d'enregistrer toutes les données Icon utilisées pendant le test de page.
Puis générez automatiquement icons.js , en fonction des données et https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
J'espère trouver une meilleure solution.

3 mois se sont écoulés, le fonctionnaire a-t-il trouvé un moyen de charger à la demande?

Il est préférable de commencer par la méthode d'introduction, et c'est tellement bon que tous les composants sont cités séparément comme matériel. . Désormais, seuls les composants qui peuvent utiliser l'icône intégrée, toutes les icônes sont emballées. .

Si le composant Icon n'est pas utilisé, le package @ ant-desigin / icons sera également chargé

Si le composant Icon n'est pas utilisé, le package @ ant-desigin / icons sera également chargé

Datepicker est également utilisé, voyez s'il y en a dans le code. le menu sera également utilisé

Plus de 500 Ko est trop gros

Dans l'attente de l'ingénierie, je suis d'abord passé à la dernière version, mais quand j'ai vu que le paquet était si gros, cela m'a fait à nouveau peur

Je ne souhaite pas utiliser le format SVG, puis-je le configurer de manière flexible? Configurer pour utiliser ou ne pas utiliser svg

Vous pouvez fournir un moyen de ne référencer qu'une seule icône, et tous les composants internes d'antd sont mis à jour pour être utilisés de cette manière:

import Search from 'antd/icons/Search";

<Search />

Pour la compatibilité avec les projets existants, import { Icon } from 'antd'; toujours réservé, mais tant que import { Icon } from 'antd'; est utilisé, toutes les icônes sont importées.

D'accord à l'étage

marque en attente de la solution parfaite

500k icônes, y a-t-il une solution?

Quelqu'un peut-il me mettre à jour à ce sujet en anglais? Le 500kb est un quart de mon bundle. J'utilise webpack et j'importe les icônes comme ceci:

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

J'ai essayé différentes façons de les importer et même de supprimer les importations d'icônes toutes ensemble, mais il semble que quoi que je fasse, les 500 Ko restent. J'utilise webpack et j'ai pu correctement arborer les icônes à l'aide de la fonction de levage à portée expérimentale de colis, mais je ne peux pas l'utiliser car cela brise mon application dans 20 autres endroits.

Comment les gens gèrent-ils ce problème? Tout le monde ici expédie-t-il simplement ses projets avec 500 Ko supplémentaires ou est-ce que j'ignore une solution de contournement évidente?

L'importation fonctionne-t-elle avec une version standard de Webpack?

import Star from 'antd/icons/star';
Si quelqu'un pouvait me mettre à jour, je l'apprécierais vraiment.

@ApolloGun La solution de contournement a été référencée plusieurs fois dans ce fil, tout est dans ce commentaire: https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

La façon dont cela fonctionne consiste à dire à Webpack de résoudre les icônes à partir d'un emplacement différent, en particulier un nouveau fichier dans lequel vous exportez exactement les icônes que vous souhaitez utiliser. Après cela, les icônes fonctionneront normalement, rien d'autre ne doit changer dans les composants.

Je n'utilise aucune icône mais je reçois toujours cet énorme fichier. Peut-être que les composants de antd l'utilisent en interne. Comment puis-je représenter les icônes utilisées par les composants. Cela semble être une bonne méthode pour remplacer les icônes Antd par des icônes personnalisées pour des éléments tels que Select, Dropdown, etc.

Je n'utilise aucune icône mais je reçois toujours cet énorme fichier. Peut-être que les composants de antd l'utilisent en interne. Comment puis-je représenter les icônes utilisées par les composants. Cela semble être une bonne méthode pour remplacer les icônes Antd par des icônes personnalisées pour des éléments tels que Select, Dropdown, etc.

@HeskeyBaozi a créé une liste des icônes utilisées dans les composants antd, en utilisant l'alias webpack:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
Veuillez lire l'intégralité de la discussion pour comprendre cette méthode.

@ApolloGun Il n'existe actuellement aucune solution officielle.
La demande d'extraction: # 12888 est toujours en cours d'exécution.

@yesmeck , @ afc163 Des plans pour fermer ça bientôt?

@HeskeyBaozi @ afc163 , comment utiliser ce nouveau que vous avez écrit? ?

@HeskeyBaozi Puis-je vous demander pourquoi vous ne travaillez pas là-dessus? Cela fait plus de cinq mois. Considérez-vous cela comme une faible priorité?

@HeskeyBaozi Puis-je vous demander pourquoi vous ne travaillez pas là-dessus? Cela fait plus de cinq mois. Considérez-vous cela comme une faible priorité?

D'accord, c'est vraiment ennuyeux = (

Après avoir inspecté le code de antd , je vois qu'un composant tel que Button importe Icon , qui à son tour importe (selon le code généré)

// 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];
    })
  )
);

ce qui provoque l'échec de l'arbre, et donc l'importation de toutes les icônes. Veuillez envisager de pointer l'importation vers @ant-design/icons/lib/index.es.js et de ne pas effectuer d'opérations sur toutes les icônes tant que cela n'est pas nécessaire. Consultez également l'historique de cette ligne: https://github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3 Cela a changé un peu avec le temps.

Cela rend directement l'ensemble du projet inutilisable

@poorel ,

<Icon /> introduit la bibliothèque d'icônes dans son intégralité par défaut. Parce que je ne sais pas quel type d'icône vous allez introduire pour l'exécution. Auparavant, les icônes étaient hébergées dans iconfont.cn il n'y a donc aucune perception d'emballage.

Cela nécessite une discussion approfondie du plan intérimaire, voir # 12011 (commentaire)

Cette solution peut encore être utilisée, je l'ai testée, mais vous devez trier quelles icônes sont dans votre projet, c'est un peu gênant

Mais vous devez trier quelles icônes sont dans votre projet ...

J'ai essayé de le lire avant et j'ai trouvé que de nombreuses références d'icônes sont faites par les propres composants d'antd et que le nombre n'est pas petit.

@chenyong Euh , cet œuf fait mal. . .

@aryzing Votre approche semble attrayante. Cela entraînera-t-il moins d'efforts que # 12888? Ce PR implique trop de changements de rupture, c'est probablement en partie la raison pour laquelle il n'est toujours pas terminé après des mois.

@zachguo J'ai regardé # 12888, et je ne pouvais pas vraiment comprendre ce qui se passait. Après réflexion à ce sujet, je ne suis pas sûr que nous puissions réussir à secouer les icônes car les API dynamiques utilisées par certains composants pour rendre les icônes sont en conflit avec la nature statique des importations ES utilisées pour trembler les arbres.

L'icône utilisée dans certains composants antd est rendue dynamiquement (c'est-à-dire déterminée au moment de l'exécution) basée sur un accessoire. Par exemple, jetez un œil à l'API de Button:

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

Pour que ce composant s'affiche correctement, le composant Button (ou le composant Icon sous-jacent utilisé) doit avoir accès (au moment de l'exécution) à toutes les icônes et ne permet pas de secouer l'arbre.

La solution serait d'avoir une API telle que

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 */}

Dans ce scénario, vous importez uniquement ce dont vous avez besoin, et le tremblement de l'arbre peut déclencher et supprimer toutes les exportations inutilisées de l'exemple @antd/some-icons-package .

Ce problème dure depuis plus de six mois et il n'y a toujours pas de solution officielle. La solution que j'utilise actuellement est d'utiliser import() pour le chargement asynchrone.
Ce problème dure depuis plus de six mois et il n'y a toujours pas de solution formelle. La solution que j'utilise actuellement est d'utiliser import() pour le chargement asynchrone.

Utilisez les composants chargeables recommandés dans la documentation officielle de React .
Utilisez les composants chargeables recommandés dans la documentation officielle de React .

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

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

• La première étape consiste à installer les dépendances: @loadable/component et @babel/plugin-syntax-dynamic-import .
  La première étape consiste à installer les dépendances: @loadable/component et @babel/plugin-syntax-dynamic-import .

• La deuxième étape consiste à créer un dossier icons dans le répertoire racine du projet et à utiliser le script pour exporter toutes les icônes de @ant-design/icons :
  La deuxième étape consiste à créer un dossier icons à la racine du projet et à exporter toutes les icônes de @ant-design/icon aide d'un script:

  #!/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);
  })();
  

  Utilisez node pour exécuter ce script directement sous le projet afin de stocker toutes les icônes exportées dans @ant-design/icons dans le répertoire icons .
  Exécutez ce script directement sous le projet en utilisant le nœud pour stocker toutes les icônes exportées de @ ant-design/icons dans le dossier icons .

• La troisième étape consiste à copier les composants / icon / index.tsx dans le référentiel de code Icon.jsx ou Icon.js , puis supprimer la définition de type TypeScript dans le code pour devenir pur Code JavaScript. (Si votre projet utilise TypeScript, vous pouvez également le nommer directement comme Icon.tsx ou Icon.ts , il n'est donc pas nécessaire de supprimer la définition de type)
  Dans la troisième étape, copiez components / icon / index.tsx dans le référentiel de code Antd à la racine du projet, et nommé à Icon.jsx ou Icon.js , puis supprimez la définition de type TypeScript dans le code pour obtenir du code JavaScript pur. (Si votre projet utilise TypeScript, vous pouvez également le nommer directement comme Icon.tsx ou Icon.ts , vous n'avez donc pas à supprimer la définition de type)
  Modifiez ensuite ce fichier de code et utilisez import() avec @loadable/component pour charger les fichiers d'icônes à la demande.
  Modifiez ensuite le fichier de code et utilisez import() avec @loadable/component pour charger le fichier d'icône si nécessaire.

  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',
  

• La dernière étape consiste à configurer Webpack:
  La dernière étape consiste à configurer Webpack:
  `` `diff
  diff - un / webpack.js b / webpack.js
  --- un / webpack.js
  +++ b / webpack.js
  @@ -1,4 +1,5 @@
  const path = require ('path');
  + const webpack = require ('webpack');
  const HtmlWebpackPlugin = require ('html-webpack-plugin');
  const TerserPlugin = require ('terser-webpack-plugin');

  @@ -33,12 +34,16 @@
  plugins: [
  nouveau HtmlWebpackPlugin ({
  title: "Super page",
  template: path.join (__ dirname, 'public / index.html'),
  meta: {
  fenêtre: 'width = device-width, initial-scale = 1',
  },
  hash: vrai,
  }),

  • nouveau webpack.NormalModuleReplacementPlugin (
  • /node_modules\/antd\/es\/icon\/index.js/,
  • path.resolve (__ dirname, 'Icon.jsx')
  • ),
    ],
    résoudre: {
    modules: ['node_modules'],
    @@ -56,13 +61,14 @@
    utilisation: [{
    chargeur: 'babel-loader',
    options: {
    préconfigurations: [
    ['@ babel / preset-env', {cibles: '> 2.486%, pas mort'}],
    '@ babel / preset-react',
    ],
    plugins: [
  • ['@ babel / plugin-syntax-import-dynamique'],
    ['@ babel / plugin-proposition-classe-propriétés'],
    ['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}],
    ],
    },
    }]
    

    ''

L'avantage de cette solution est que vous pouvez conserver toutes les icônes, et vous pouvez également modifier les icônes arbitrairement dans le système de gestion d'arrière-plan configurable sans vous soucier du manque d'icônes; et les icônes sont chargées à la demande, et ne seront chargées que lorsque les icônes d'une page spécifique seront rendues Le fichier icône correspondant. La seule chose qui doit être chargée est les données de la liste d'icônes d'environ 50K dans l'index packagé (désigner un nom plus court dans le commentaire magique du webpack dans Icon.jsx peut réduire la taille).
L'avantage de cette solution est que vous pouvez conserver toutes les icônes, vous pouvez également modifier les icônes dans le système de gestion d'arrière-plan configurable sans vous soucier des icônes manquantes, et les icônes sont chargées à la demande, seules les icônes nécessaires au rendu seront chargées lorsque vous commencez à rendre une page spécifique. Le fichier d'index packagé qui doit être chargé ne contient qu'environ 50 Ko de données de liste d'icônes (spécifier un nom plus court dans le commentaire magique Webpack dans Icon.jsx peut réduire cette taille).

L'inconvénient de ce schéma est que chaque icône contient des informations supplémentaires sur le module Webpack en plus du contenu de l'icône, de sorte que vous pouvez voir que la taille du dossier des icônes est beaucoup plus grande que la taille du fichier unique emballé dans son ensemble, plus les 50K dans l'index Les données de la liste d'icônes sont en fait emballées dans une taille proche de 3M. Cependant, comme il n'y a que quelques ou une douzaine d'icônes qui peuvent réellement être utilisées dans les deux sens, la quantité de données téléchargées par le navigateur de l'utilisateur ne sera pas trop importante, et comme il est chargé de manière asynchrone, tant que le nombre d'icônes affichées sur une seule page n'est pas De plus, cela a peu d'effet sur la vitesse de chargement.
L'inconvénient de cette solution est que chaque icône contient des informations sur le module Webpack en plus du contenu de l'icône, vous pouvez donc voir que la taille du dossier icons est beaucoup plus grande que la taille du fichier unique emballé auparavant, et 50 Ko de données de liste d'icônes dans le fichier d'index, la taille réelle du pack est proche de 3M. Cependant, comme les icônes qui peuvent réellement être utilisées ne sont que quelques ou une douzaine, la quantité de données téléchargées par le navigateur de l'utilisateur n'est pas trop importante , et comme il est chargé de manière asynchrone, tant que le nombre d'icônes affichées sur une seule page n'est pas supérieur, l'impact sur la vitesse de chargement n'est pas important.

@ jinliming2 est une modification sympa, seulement pour constater que l'importation de webpack peut réellement passer des variables

Les instructions entièrement dynamiques, telles que import (foo), échoueront car Webpack nécessite au moins certaines informations d'emplacement de fichier. En effet, foo pourrait être n'importe quel chemin vers n'importe quel fichier de votre système ou projet. L'import () doit contenir au moins quelques informations sur l'emplacement du module, de sorte que le regroupement peut être limité à un répertoire ou à un ensemble de fichiers spécifique.

Tant qu'il y a un préfixe du répertoire, j'ai pensé que c'était impossible.
Cela dit, les utilisateurs d'antd n'utilisent pas seulement webpack, ce qui est un peu gênant.

@aryzing Il semble que l'option 1 de vos API proposées soit en fait ce que # 12888 essaie de réaliser. De nombreux changements de rupture seraient impliqués, nous devons donc probablement encore attendre que l'équipe Ant Design le termine.

peut envisager d'utiliser xhr pour charger svg de manière asynchrone？
archer-svgs

Puisque ant deisgn utilise lui-même plus d'icônes, envisagez-vous de changer 图标文件 en un schéma de chargement asynchrone afin qu'il n'occupe pas le volume de fichier principal. Vous pouvez vous référer à ceci:

Étant donné que ant deisgn lui-même utilisera plus d'icônes, envisagez donc de changer le fichier d'icône en un schéma de chargement asynchrone, afin de ne pas avoir à occuper la taille du fichier principal, vous pouvez vous référer à ceci:

webpack-ant-icon-loader

@rororofff a financé 2,00 $ pour ce numéro.

• Soumettez la demande de tirage via IssueHunt pour recevoir cette récompense.
• Envie de contribuer? Participez à ce problème via
• Consultez l'Explorateur de problèmes IssueHunt pour voir d'autres problèmes financés.
• Besoin d'aide des développeurs? Ajoutez votre référentiel sur IssueHunt pour collecter des fonds.

Pour tous ceux qui sont intimidés par la longueur de cette conversation et qui veulent simplement utiliser create-react-app et ant-design, j'ai créé un projet standard ici https://github.com/AustinGreen/cra-antd-starter

Cela inclut un correctif pour le problème de taille du bundle d'icônes et une configuration Webpack personnalisée sans éjection. Merci à @ndbroadbent , @patricklafrance et à toute l'équipe de conception de fourmis pour tout leur travail acharné.

Pour tous ceux qui sont intimidés par la longueur de cette conversation et qui veulent simplement utiliser create-react-app et ant-design, j'ai créé un projet standard ici https://github.com/AustinGreen/cra-antd-starter

Cela inclut un correctif pour le problème de taille du bundle d'icônes et une configuration Webpack personnalisée sans éjection. Merci à @ndbroadbent , @patricklafrance et à toute l'équipe de conception de fourmis pour tout leur travail acharné.

Comment puis-je l'utiliser dans l'application Nextjs?

@AustinGreen J'ai essayé votre exemple.

Pour une application avec barre latérale et un bouton avoir une taille de ~ 100 Ko Gzippé, c'est encore beaucoup trop.

@anjmao s'il existe un moyen de réduire davantage la taille du bundle, faites-le moi savoir et je l'ajouterai. Si vous créez une application Web d'entreprise, ~ 100 Ko Gzippé pour un framework frontal, ~ 5 composants une bibliothèque de composants complète), des icônes et d'autres utilitaires est assez standard.

@anjmao s'il existe un moyen de réduire davantage la taille du bundle, faites-le moi savoir et je l'ajouterai. Si vous créez une application Web d'entreprise, ~ 100 Ko Gzippé pour un framework frontal, ~ 5 composants une bibliothèque de composants complète), des icônes et d'autres utilitaires est assez standard.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. Voici une bonne solution

@ Oscar-ren, le projet utilise déjà un alias pour les icônes (c'est pourquoi la taille du bundle n'est que d'environ 100 Ko et non d'environ 400 Ko)

@tobiaslins avez-vous modifié votre solution de contournement depuis votre dernier commentaire ?
Lorsque j'utilise ceci dans un projet Nuxt, le rendu client et serveur se désynchronise:
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.

Juste pour info, une version de Vue pour réduire la taille du bundle en utilisant l'alias webpack:
https://github.com/atjason/ant-design-vue-demo

Référer:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Taille de l'emballage de Hello World :

Puisque ant deisgn utilise lui-même plus d'icônes, envisagez-vous de changer 图标文件 en un schéma de chargement asynchrone afin qu'il n'occupe pas le volume de fichier principal. Vous pouvez vous référer à ceci:

Étant donné que ant deisgn lui-même utilisera plus d'icônes, envisagez donc de changer le fichier d'icône en un schéma de chargement asynchrone, afin de ne pas avoir à occuper la taille du fichier principal, vous pouvez vous référer à ceci:

webpack-ant-icon-loader

Pour la postérité, cela ne fonctionne que pour React.

Bonjour, quand la solution @ jinliming2 va-t-elle sortir?
Le chargeur webpack-ant-icon-loader ne fonctionne pas pour moi.

Bonjour, pouvez-vous fournir des informations sur l'utilisation
webpack-ant-icon-loader avec vous?
Voyons si je peux aider à le résoudre.

Bonjour @ beven91!

J'ai déjà fait des tests et je n'ai pas fonctionné et je n'ai pas pu
comprendre pourquoi. Cependant votre question m'a amené à isoler le cas sur un
projet dédié J'ai créé un exemple de test pour vous montrer et ceci
le temps que ça marche! J'économise constamment 1,21 Mo du bundle résultant
quel fantastique à la fois du projet de démonstration et de celui sur lequel travaille
commercialement.

Je poste ici l'exemple de projet au cas où quelqu'un d'autre aurait le même
problèmes:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

Sans le webpack-ant-icon-loader, j'obtiens le résultat suivant:
bundle.development.js Application 4,59 Mio [émise]

Avec webpack-ant-icon-loader, j'obtiens:
../../index.html 555 octets [émis]
0.bundle.development.js 1,21 Mio 0 [émis]
bundle.development.js 3.41 Mio app [émise] app

Quelques notes:

• pense que ce sera mieux si vous supprimez 0.bundle.development.js produit
  artefact.
• les icônes disparaissent du produit final, c'est-à-dire qu'elles ne sont pas visibles sur la page. J'ai vu votre configuration umirc.js mais j'utilise react-router. Comment puis-je les faire réapparaître?

Le vendredi 5 avril 2019 à 14 h 38, beven91 [email protected] a écrit:

Bonjour, pouvez-vous fournir des informations sur l'utilisation
webpack-ant-icon-loader avec vous?
Voyons si je peux aider à le résoudre.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

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

@AustinGreen juste curieux, en quoi votre solution est-elle différente de la méthode Ant documentée react-app-rewired et babel-plugin-import documentée ici - https://ant.design/docs/react/use-with-create-react -app ?

GitHub

AustinGreen / cra-antd-starter

passe-partout pour l'utilisation de l'application create react et de la conception de fourmis - AustinGreen / cra-antd-starter

Ant Design - Un langage de conception d'interface utilisateur

Un langage de conception d'interface utilisateur de classe entreprise et une implémentation basée sur React avec un ensemble de composants React de haute qualité, l'une des meilleures bibliothèques d'interface utilisateur React pour les entreprises

@annjawn à partir de create-

@ Beven91 pourriez-vous m'aider avec cette partie de mon commentaire précédent s'il vous plaît?

• les icônes disparaissent du produit final, c'est-à-dire qu'elles ne sont pas visibles sur la page. J'ai vu votre configuration umirc.js mais j'utilise react-router. Comment puis-je les faire réapparaître?

Je veux dire que c'est génial, il y a une séparation entre les icônes dans l'ensemble du paquet, mais les icônes utilisées restent toujours une partie du paquet séparé, donc les utiliser signifierait l'inclure en tant que paquet séparé qui rend la séparation inutile.

@annjawn à partir de create-

@AustinGreen a du sens, mais c'est fondamentalement la même chose avec CRACO. Btw, je vais également utiliser react-loadable pour faire le fractionnement de code et je pense que votre méthode + importations modulaires + charge de composant asynchrone devrait permettre une réduction significative de la taille du bundle.

@vladimirmoushkov
Désolé d'être en retard, je vais essayer de le résoudre。

Bonjour @vladimirmoushkov

Vous pouvez voir les détails ici. ant-icons-webpack-loade-test # 1

Solution temporaire qui a fonctionné pour moi jusqu'à ce qu'elle soit corrigée (antd> = 3,9)

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Cela ne fonctionne pas pour les composants fourmis qui utilisent des icônes. par exemple, le composant d'alerte utilise des icônes de vérification et de fermeture mais ne sont pas visibles avec cette solution

@ Venugopal46 vous pouvez également ajouter ces icônes (qui sont utilisées par les composants ant) ​​à votre icons.js .
Fonctionne bien pour moi.

On dirait que nous sommes près d'une solution; Pour finir, nous pourrions créer un utilitaire qui génère automatiquement icons.js dans le cadre du processus de construction.

Comment savoir précisément quelles icônes sont importées via les propres composants de fourmi, afin de les mettre dans votre icons.js ?

Pour moi, le hack ci-dessus:

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Et utilisez le fichier generateIconsList.sh pour générer 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

en exécutant generateIconsList.sh 2>/dev/null >src/icons.js partir de la racine du projet - fait le travail! .
Le script est moche et n'attrape évidemment pas les références d'icônes internes ou les références multilignes <Icon /> . Dans mon cas, j'avais besoin d'ajouter manuellement quelques cas d'icônes, mais le script fait le travail à la fin - ayant 1,1 Mo de moins dans le paquet final!

Comment savoir précisément quelles icônes sont importées via les propres composants de fourmi, afin de les mettre dans votre icons.js ?

J'ajoute simplement les icônes qui manquent (non affichées) sur une page Web mais qui devraient y être. Cela dépend de la quantité de composants d'antd que vous utilisez, mais pour moi, il a fallu environ 10 minutes pour les ajouter. (J'utilise cependant beaucoup de composants antd)

Par exemple, s'il manque des flèches de tri sur les tables:

1. inspectez la table des fourmis et trouvez <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . Vous verrez que cette balise <i /> est vide. Vous pouvez voir ici que le nom de l'icône est caret-down .
2. Trouvez cette icône dans un dossier @ant-design/icons/lib , choisissez le dossier filled ou outline (selon le type d'icône dont vous avez besoin) et ajoutez une nouvelle importation à icons.js comme ça :

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

Ce n'est pas la meilleure approche, mais cela fonctionne comme prévu. Dans l'attente d'une équipe de développement de fourmis pour résoudre ce problème dans les prochaines versions afin que nous puissions éviter de tels piratages.

Salut !

Des nouvelles à ce sujet? Est-ce un candidat pour la prochaine sortie d'antd?
J'ai essayé plusieurs choses pour résoudre ce problème ( webpack-ant-icon-loader , babel-import-plugin ) mais aucune n'a fonctionné.

Merci!

J'ai vraiment besoin d'une solution à ce sujet, la taille du paquet est trop importante!

@zlab @nuintun @anjmao pour obtenir de l'aide, veuillez demander à https://zlab.github.io/report.html quel plug-in est cette page générée par, je veux analyser mon propre projet

Je l'ai trouvé, c'est webpack-bundle-analyzer

Seul le modal est utilisé, mais la bibliothèque d'icônes 500k est fournie

Cela fait plus de six mois, n'y a-t-il pas de progrès?

Abandonnant l'antd, une question aussi importante n'est pas considérée comme importante ...

Maintenant, chargez les fichiers qui doivent être regroupés en icônes à la demande, 500 Ko

j'ajoute un alias dans mon webpack et une icône d'exportation dans icon.ts, mais quand j'exécute npm start , j'ai une erreur

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'

ceci est ma configuration de résolution 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. L'icône icône n'est pas utilisée dans le projet, pourquoi existe-t-il un package, aidez-moi s'il vous plaît?

2. L'utilisation de webpack externals = {'antd': 'antd'} ne fonctionne pas bien, pouvez-vous toujours voir antd pendant l'analyse des paquets?

1. L'icône icône n'est pas utilisée dans le projet, pourquoi existe-t-il un package, aidez-moi s'il vous plaît?
2. L'utilisation de webpack externals = {'antd': 'antd'} ne fonctionne pas bien, pouvez-vous toujours voir antd pendant l'analyse des paquets?

@wiiler

1. Reportez-vous à ceci, il peut s'agir d'un composant qui fait référence à Icon

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   En fait, les composants intégrés qui utilisent <Icon /> , tels que <DatePicker /> , <Select /> etc., seront entièrement introduits lorsqu'ils seront utilisés.

2. Si vous utilisez des externes, vous devez désactiver le plugin babel-plugin-import

j'ajoute un alias dans mon webpack et une icône d'exportation dans icon.ts, mais quand j'exécute npm start , j'ai une erreur

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'

ceci est ma configuration de résolution 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'),
        }),
      ],
    },

Je recommande ces deux pratiques

• utiliser un alias
• utiliser le plugin

@ As3ass1n
Pourquoi «../src/utils/antdIcon.ts» a un «..»? La configuration du webpack est-elle placée dans un répertoire séparé?

1. L'icône icône n'est pas utilisée dans le projet, pourquoi existe-t-il un package, aidez-moi s'il vous plaît?
2. L'utilisation de webpack externals = {'antd': 'antd'} ne fonctionne pas bien, pouvez-vous toujours voir antd pendant l'analyse des paquets?

@wiiler

1. Reportez-vous à ceci, il peut s'agir d'un composant qui fait référence à Icon
   > # 12011 (commentaire)
   > En fait, les composants intégrés qui utilisent <Icon /> , tels que <DatePicker /> , <Select /> etc., seront entièrement introduits lorsqu'ils seront utilisés.
2. Si vous utilisez des externes, vous devez désactiver le plugin babel-plugin-import

Compris , merci

j'ajoute un alias dans mon webpack et une icône d'exportation dans icon.ts, mais quand j'exécute npm start , j'ai une erreur

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'

ceci est ma configuration de résolution 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'),
        }),
      ],
    },

Je recommande ces deux pratiques

• utiliser un alias
• utiliser le plugin

@ As3ass1n
Pourquoi «../src/utils/antdIcon.ts» a un «..»? La configuration du webpack est-elle placée dans un répertoire séparé?

désolé, c'est ma faute. J'ai écrit un nom de fichier erroné, et maintenant je l'ai résolu en utilisant un alias. Merci

Ce problème ne sera-t-il pas résolu à l'avenir? Augmentation de près de 400 k

Salut, est-il possible de fournir au moins une estimation approximative du moment où il sera résolu?

490 Ko supplémentaires sur le bundle rendent les Icon pratiquement inutilisables. C'est un gros problème, y a-t-il un correctif temporaire que nous pouvons faire jusqu'à ce que vous publiiez un correctif pour cela?

@smddzcy a lu le fil?

@ schester44 Avec le fil de discussion écrit dans une variété de langues et… J'étais sur le point de dire alphabets, ou même syllabaires, mais je pense que je dois aller aussi loin que les scripts … J'ose dire que c'est assez difficile pour quiconque dont la linguistique se limite aux langues en général limité aux alphabets dérivés étrusques pour être parfaitement clair sur ce qui se passe

Salut les gens, j'ai eu du succès avec l'implémentation très simple du paquet purched-antd-icons, mais c'est entièrement manuel; J'estime 3-4 heures de bidouillage pour réconcilier les icônes manquantes en inspectant le DOM. Nous avons l'intention de l'implémenter à la toute dernière étape de notre cycle de développement / publication. Pour nos applications packagées / hors ligne, le seul problème est de se rapprocher de la très modeste limitation de la RAM iOS WKWebview. Pour nous, si les profils mobiles iOS continuent de ne pas présenter d'artefacts, nous l'ignorerons complètement. Étant donné qu'aucun progrès n'est fait ici, ma préférence serait de voir cette nouvelle API Icon mise de côté et l'ancienne API ramenée.

@ afc163 ,

Ce que vous avez écrit le 15 septembre 2018 semble être une bonne solution (traduction Google ci-dessous). Pouvez-vous fournir une estimation du moment où cela sera mis en œuvre?

Conservez l'ancienne utilisation et ajoutez un message d'avertissement et de migration dans la console.

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

Nouvelle API du fournisseur comme:

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

<Star />
<SettingIcon />

Et aussi capable de trembler les arbres:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

Selon la feuille de route V4 , cela serait fixé au quatrième trimestre de cette année.

Cool: smiley:

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

Selon la feuille de route V4
https://github.com/ant-design/ant-design/issues/16911 , ce serait
fixé au quatrième trimestre de cette année.

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, affichez-le sur GitHub
https://github.com/ant-design/ant-design/issues/12011?email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWWCRFY#issuecomment-497821847 ,
ou couper le fil
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI, les documents Icon l'ont mentionné. Copie ci-dessous.

"⚠️ À propos de la taille de bundle supplémentaire apportée par toutes les icônes SVG que nous avons importées dans la version 3.9.0, nous fournirons une nouvelle API pour permettre aux développeurs d'importer des icônes selon vos besoins, vous pouvez tracer # 12011 pour des progrès supplémentaires.
Avant cela, vous pouvez utiliser le plugin webpack de la communauté pour fragmenter le fichier icône. "

Le dernier bit est cool, le code est divisé et charge les icônes de manière asynchrone, ou dans mon cas, le code est divisé et n'utilise pas du tout les icônes.

Le fonctionnaire a-t-il renoncé à cela? Depuis combien de temps le problème n’a-t-il pas été résolu?

Le fonctionnaire a-t-il renoncé à cela? Depuis combien de temps le problème n’a-t-il pas été résolu?

@ zhe-he

Pas de solution claire!

Ce fonctionnaire ne résoudra-t-il pas vraiment ce problème?Un si gros paquet inutile est vraiment persuadé de partir

@DemoHu

@tibotiber merci pour le lien vers le chargeur d'icônes, le morceau d'icône est toujours inséré dans l'index.html? toutes les suggestions sur la façon de supprimer le morceau d'être inséré de index.html

@ jasan-s J'imagine que cela dépendra de la façon dont vous construisez les bundles et de l'endroit où vous utilisez les icônes. Par exemple, je suis sur la dernière application create-react-app, qui configure la division du code pour moi, et je m'assure de ne pas utiliser d'icônes import dans l'arborescence des composants du bundle principal (je n'utilise jamais d'icônes) .

la solution de contournement de @tobiaslins ne fonctionne pas pour moi, il dit Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' quelqu'un peut-il me montrer comment le réparer? Merci

@marcosfede J'utilise custom-cra, y a-t-il un moyen de ne pas éjecter? J'ai toujours cette erreur

./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 Oh! ma faute. Je l'ai maintenant.

J'ai une idée 💡 @ afc163

Nous pouvons utiliser l'icône svg, puis conserver l'utilisation précédente:

<Icon type='search' />

Puis via le plug-in babel dans:

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

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

Ensuite, vous pouvez utiliser l'arborescence pour emballer uniquement les icônes utilisées.

Quant au type dynamique, utilisez-le simplement s'il n'est pas pris en charge. Il peut être utilisé pour des besoins dynamiques:

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

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

En fait, la fonction réelle du type d'origine est supprimée et toute utilisation de type est convertie en utilisation de composant.

J'ai une idée 💡 @ afc163

Nous pouvons utiliser l'icône svg, puis conserver l'utilisation précédente:

<Icon type='search' />

Puis via le plug-in babel dans:

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

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

Ensuite, vous pouvez utiliser l'arborescence pour emballer uniquement les icônes utilisées.

Quant au type dynamique, utilisez-le simplement s'il n'est pas pris en charge. Il peut être utilisé pour des besoins dynamiques:

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

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

En fait, la fonction réelle du type d'origine est supprimée et toute utilisation de type est convertie en utilisation de composant.

L'idée est la même que pour la transformation 4.0, mais l'utilisation de l'échappement babel réduit évidemment la charge de travail, et seuls les changements dynamiques doivent être gérés manuellement.

J'ai temporairement écrit un plug-in Babel après avoir posté les commentaires hier soir. Je l'ai essayé localement et c'est tout à fait faisable @ 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)
          }
        })
      },
    }
  };
}

Il est également nécessaire d'améliorer la fonction réelle des règles de conversion descendante et du type de castration.

aucun progrès ?

Voir la solution packagée dans le code source officiel de l'icône et emballer l'icône dans un js séparément
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 en cours de travail # 16911

Vous pouvez essayer la version alpha d'antd 4 maintenant

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

Tirez l'icône pour soutenir le tremblement des arbres.

Ce fonctionnaire ne résoudra-t-il pas vraiment ce problème?Un si gros paquet inutile est vraiment persuadé de partir

En fait, cette chose a le même ton que ce que afc163 a fait à Noël.

@ lizy0329 4.0.0-alpha.2 a été modifié, impliquant des arrangements d'énergie et de temps, si vous êtes pressé, fork le change vous-même ...

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

Pas cool, vraiment.

@ lizy0329 voir # 18217

Pas cool, vraiment.

Ce n'est pas cool, vraiment. Mais quand cela change, il faut imaginer les conséquences: la même tonalité que HO! HO! Ne peut être comparée sans comparaison.

@ lizy0329

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

Pourquoi utiliser SVG au lieu de police?
Utilisez les composants React SVG pour les icônes au lieu d'une police d'icônes

Une entreprise a-t-elle déjà fait cela?
Fournir des octicons avec SVG

Quel est le problème maintenant?
L'icône précédente utilise la police, chargée par cdn, la taille ne sera pas reflétée sur le fournisseur. Il n'y a pas de cdn par défaut (vous pouvez toujours mettre toutes les icônes dans un bloc et utiliser votre propre cdn pour l'hébergement) pour héberger l'icône svg, cette partie sera reflétée dans le fournisseur.
Ce qui est discuté dans ce numéro est de savoir comment faire trembler l'arbre, comment charger l'icône à la demande.

Si vous ne pouvez pas le tolérer, chargez toutes les icônes à la fois, il y a (dans le problème) au moins trois façons d'éviter.

@ afc163
Je pense que le journal des modifications de 3.9 est très hostile. N'a pas expliqué pourquoi changé en SVG. Quels sont les inconvénients de la police et quel est son avantage?

btw je m'oppose à l'utilisation de svg (comme ceci, viewBox jusqu'à 1024 * 1024), ce qui entraîne une augmentation chronophage des opérations de couche composite.

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

@ afc163 C'est trop court et pas assez pour expliquer pourquoi il faut passer au SVG. Le fonctionnaire n'a pas donné d'explication suffisamment visible pour expliquer pourquoi utiliser svg et comment charger l'icône à la demande, je pense que c'est l'une des raisons de nombreuses émotions négatives dans ce numéro.

@muzea merci pour la suggestion
viewBox impact de svg sur les performances de rendu de svg其 子path chemin Dirigez-le. Ce qui a vraiment provoqué l'augmentation du fonctionnement de la couche composite, c'est la grosse tête.
Si cela signifie que l'icône svg elle-même (largeur et hauteur) est trop grande, une grande icône entraînera en effet la complexité du dessin, mais le coefficient de corrélation est relativement faible. Ce qui peut être garanti, c'est que dans le processus de traitement de l'icône obtenue auprès du concepteur, l'expérience cognitive de l'utilisateur sera améliorée autant que possible (l'icône n'est pas fortement déformée), et la compression de chemin et l'optimisation associée seront effectuées avec la plus grande précision approximative. En fait, si vous voulez vous assurer que le navigateur effectue le rendu à l'étape de la couche de composition, le schéma svg sprite sera pris en compte, mais cela ajoute généralement des effets secondaires à la page (ajoutez des définitions associées dans l'en-tête ou d'autres positions), ce qui est important pour une maintenabilité et Pour les bibliothèques ayant des exigences de polyvalence élevées, cela peut ne pas être pris en compte.

Dans quelles circonstances les gens détestent-ils svg tant que solution d'icône d'application Web qui mérite d'être reconnue?

• Utilisateurs d'IE8
• L'état du réseau de l'utilisateur est bon
• Tant que l'icône est visible (ne vous souciez pas de la clarté)
• Les icônes monochromes sont toujours suffisantes maintenant et à l'avenir

Le manque officiel de suivi sur cette question, en effet, la personne correspondant à l'assignation n'a pas résolu le problème, mais maintenant il ne le sera pas.

@ lizy0329 À quel point une personne malveillante est prête à spéculer sur ce comportement des autres, les autres n'ont pas le droit d'intervenir. Mais cette personne est toujours la bienvenue pour mentionner un pr

@HeskeyBaozi
La partie icône du document a de très faibles performances sur mon navigateur.

En fait, le chrome sur osx, lorsque la page a beaucoup d'icônes antd, les performances seront très mauvaises.

Peut-être que babel-plugin-macros peut nous aider à résoudre ce problème?

@ lizy0329 À quel point une personne malveillante est prête à spéculer sur ce comportement des autres, les autres n'ont pas le droit d'intervenir. Mais cette personne est toujours la bienvenue pour mentionner un pr

Ce n'est pas une spéculation malveillante, cela s'appelle «rechercher des points communs». HO! HO! L'incident n'est pas arrivé par accident, il doit s'agir d'une accumulation à long terme. Je ne me suis pas calomnié, je veux juste qu'antd se développe mieux et réfléchisse aux conséquences et aux solutions pour chaque mise à jour.

Alors, quand puis-je utiliser cela? J'ai utilisé antd dans le projet et je n'ai rien fait, j'ai donc importé un bouton, et le paquet emballé est passé de 177k à 1,1 m ... L'analyseur l'a regardé et il y avait aussi des icônes. Gros

Existe-t-il un moyen de supprimer les icônes de l'ensemble lorsque vous ne l'utilisez pas?

J'utilise le remplacement avec create-react-app. Ainsi:

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

Vous devriez vérifier la solution de @ qaiser110 pour antd@3 .

La taille du bundle est énorme car antd source effectue une importation générique de toutes les icônes . La solution dans l'article lié ci-dessus consiste à utiliser webpack resolve.alias pour rediriger @ant-design/icons/lib/dist import vers un fichier personnalisé contenant des icônes sélectionnées parmi @ant-design/icons .

C'est mieux que d'avoir un gros paquet, mais ce n'est toujours pas idéal car vous devez sélectionner les icônes manuellement. Bien que vous ne choisissiez généralement que si nécessaire (lorsque l'icône est manquante). Pour déterminer ce qui doit être sélectionné, vous pouvez rechercher dans antd et votre code source pour les icônes utilisées.

Ce serait utile si nous avions un fichier partagé ou un package d'icônes sélectionnées à partir antd source idée essentielle . Nous pourrions regrouper les icônes exportées par un composant antd et au lieu de rechercher manuellement la source d'antd à sélectionner manuellement, vous pourriez simplement export * from 'antd-cherry-pick-icons/icon' dans votre fichier d'icônes personnalisé. Cela pourrait être fait avec un effort de la communauté pour le maintenir aussi à jour avec antd source que possible.

@LucasBassetti , êtes-vous sûr de ne pas avoir besoin d'icônes? Même si vous n'utilisez pas directement <Icon /> , certains composants antd utilisent ` . Par exemple, <Alert /> .

Notez qu'antd 4.0 (en version alpha) résout ce problème en n'utilisant pas une importation générique . Au lieu de cela, ils sélectionnent les importations pour chaque composant .

Solution temporaire qui a fonctionné pour moi jusqu'à ce qu'elle soit corrigée (antd> = 3,9)

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Si quelqu'un cherche 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
);

Le chemin des icônes @ant-design/icons/lib/outline/DownOutline

Mark prête attention à ce problème. Actuellement, antd 3 est utilisé. Un bouton est introduit. Il suffit de lier le moment et l'icône. Le fichier de l'icône a une taille supérieure à 500 Ko.

Les problèmes du moment @DemonCloud peuvent être pris en compte sur https://github.com/ant-design/babel-plugin-import/issues/352

Pour les personnes utilisant create-react-app via 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

Je ne sais pas pourquoi, mais après avoir utilisé votre icons.js, mon bundle augmente de 600 Ko.

Peut-être parce que je dois utiliser ce package dans mon code https://www.npmjs.com/package/html-webpack-inline-source-plugin

J'ai réduit la taille de mon bundle de config-override.js Ko en modifiant

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';

Avant

Après

J'ai réduit la taille de mon bundle de config-override.js Ko en modifiant

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';

Avant

Après

Je vous remercie! Cela m'a aidé!

Le chemin des icônes @ant-design/icons/lib/outline/DownOutline

Hé, êtes-vous capable de trouver du travail. J'ai aussi la même erreur

Comment supprimer @ ant-design si je n'utilise pas l'icône intégrée ?

D'après ce que je vois ici, seules des solutions de contournement sont présentées. Ne serait-il pas beaucoup plus facile et plus propre que les composants importent simplement l'icône qu'ils utilisent? Cela résoudrait la cause fondamentale et je m'attendrais à ce que ce ne soit pas trop difficile si nous utilisons des importations nommées à la place, n'est-ce pas?

@Nomeasmo , devrait être corrigé dans la v4, selon la feuille de route .

Ce serait bien si 3.X avait un correctif. Je ne prévois pas de passer à 4 si possible.

Dans l'espoir de migrer complètement hors d'Ant un jour, car le CSS pour des choses simples comme les boutons est BEAUCOUP trop compliqué, la bibliothèque manque de fonctionnalités d'accessibilité et même les mises à jour de correctifs sont remplies de près de 1000 commits. C'est juste trop de désabonnement à mon goût.

marque

Pour les personnes utilisant create-react-app via 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

Ne fonctionne pas, la taille du paquet d'icônes est toujours élevée

Il semble que l'arborescence des icônes ne fonctionne pas directement dans la v4.0.0-beta.0.
Quelqu'un a-t-il réussi à réduire le groupe d'icônes? Pouvez-vous s'il vous plaît partager votre configuration?

J'ai ensuite essayé la v4.0.0-beta.1 et supprimé le package @ant-design/compatible , toutes les icônes sont toujours incluses dans le package.

Pour les personnes utilisant create-react-app via 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

Ne fonctionne pas, la taille du paquet d'icônes est toujours élevée

vous avez besoin d'un fichier icons.js pour inclure les icônes que vous devez importer, comme https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

Solution temporaire qui a fonctionné pour moi jusqu'à ce qu'elle soit corrigée (antd> = 3,9)

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Si quelqu'un cherche 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
);

Diminution de mon bundle de 700kb à 200kb, merci

Il semble que l'arborescence des icônes ne fonctionne pas directement dans la v4.0.0-beta.0.
Quelqu'un a-t-il réussi à réduire le groupe d'icônes? Pouvez-vous s'il vous plaît partager votre configuration?

J'ai ensuite essayé la v4.0.0-beta.1 et supprimé le package @ant-design/compatible , toutes les icônes sont toujours incluses dans le package.

Avoir le même problème dans 4.0.0-rc.0 malgré mes importations d'icônes mises à jour

@jhockett J'ai eu le même problème! J'ai constaté que certaines de mes importations brisaient le processus de tremblement des arbres. Par exemple: _import Text from 'antd / lib / typography / Text'; _
Je l'ai remplacé par _import {Typography} de 'antd'; _, et les icônes ont quitté mon bundle!

@jhockett J'ai eu le même problème! J'ai constaté que certaines de mes importations brisaient le processus de tremblement des arbres. Par exemple: _import Text from 'antd / lib / typography / Text'; _
Je l'ai remplacé par _import {Typography} de 'antd'; _, et les icônes ont quitté mon bundle!

Toutes mes importations de dessins de fourmis utilisent la syntaxe que vous avez mentionnée: _import {Typography} from 'antd'; _
donc cela ne semble pas être mon problème, mais peut-être que d'autres pourraient en être affectés!

Solution temporaire qui a fonctionné pour moi jusqu'à ce qu'elle soit corrigée (antd> = 3,9)

1. Adaptez Webpack pour résoudre les icônes différemment. Dans votre configuration webpack:

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

1. Créez icons.js dans le dossier src/ ou où vous le souhaitez. Assurez-vous qu'il correspond au chemin de l'alias!
   Dans ce fichier, vous définissez les icônes qu'antd doit inclure! Je n'avais besoin que de l'icône Down pour le composant Select de antd.

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

Il est également possible de le faire avec react-app-rewire (modifications create-react-app) dans config-overwrites.js

Si quelqu'un cherche 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
);

Diminution de mon bundle de 700kb à 200kb, merci

lorsque j'utilise ceci, cela ne fonctionne pas, que puis-je faire ensuite:

Pour ceux qui utilisent Parcel.js, faire ce qui suit a fonctionné pour moi:

npm install purched-antd-icons

Et ajoutez package.json :

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

Il semble que l'arborescence des icônes ne fonctionne pas directement dans la v4.0.0-beta.0.
Quelqu'un a-t-il réussi à réduire le groupe d'icônes? Pouvez-vous s'il vous plaît partager votre configuration?

J'ai ensuite essayé la v4.0.0-beta.1 et supprimé le package @ant-design/compatible , toutes les icônes sont toujours incluses dans le package.

J'ai résolu mon problème en modifiant la configuration de babel-plugin-import comme ceci .

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

Inspiré par https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531 je l'ai fait fonctionner avec antd@4 (https://github.com/ant-design/ant -design / issues / 20661).

Ajoutez le resolve.alias à votre configuration webpack (devrait également fonctionner avec customize-cra ):

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

Votre icons.tsx devrait ressembler à ceci:

/**
 * 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";

Par exemple, l'icône LoadingOutlined ci-dessus est nécessaire pour le composant Button . Ajoutez toutes vos icônes nécessaires dans ce fichier. Et vous pouvez également réutiliser ce fichier. Mais cela dépend de vous car vous pouvez également utiliser l'importation directe depuis @ant-design/icons :

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

La solution suggérée par icons.tsx ? Par exemple: j'ai des éléments de formulaire tels que InputNumber et Select dropdown. Des conseils s'il vous plaît?

Je me demande quelle est la bonne façon de savoir quelles icônes je dois inclure dans icons.tsx ? Par exemple: j'ai des éléments de formulaire tels que InputNumber et Select dropdown. Des conseils s'il vous plaît?

@ pradeepb6 Imaginez que vous incluez un nouveau composant dans votre source à partir de antd . Webpack essaiera de résoudre les icônes mais ne pourra pas trouver d'export nommé car vous ne l'avez jamais défini dans votre icons.tsx . Vous recevrez un avertissement comme celui-ci:

Ensuite, vous savez quelles icônes doivent être exportées dans votre icons.tsx pour que le composant fonctionne comme prévu. 🙂

@matzeeable Merci. J'ai essayé ça. Mais j'obtiens des erreurs comme indiqué sur la capture d'écran. Le code peut être trouvé ici .

J'ai déjà écrit dans le github babel-plugin-import, mais peut-être que quelqu'un ici a eu ce problème à cause de la présence de plus de gens. J'ai migré vers la V4 et j'observe une grande taille de bundle.
Quand j'ai ajouté "libraryDirectory": "es" comme écrit dans https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378, j'observe l'erreur suivante:

[ 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 

J'utilise next.js btw. Deps:

    "@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",

N'importe qui?

@ afc163 a récompensé 142,10 $ à @vagusx . Voir sur IssueHunt

• : sac d'argent: Dépôt total: 203,00 $
• : tada: Récompense du référentiel (20%): 40,60 $
• : clé: Frais de service (10%): 20,30 $

J'ai rencontré le même problème et @chemicalkosek, c'est [email protected] + next.js actuellement résolu par 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"
}

J'espère que cela aide les autres :)

@ i-tengfei Wow, ça marche! Merci beaucoup!

Pour antd @ 4, nous utilisons maintenant un propre package, qui écrase le package @ ant-design / icons et remplace les icônes antd par des icônes fontawesome.

Il ne fournit que les icônes requises par antd. Et réduit la taille du bundle pour nous de manière significative, car nous n'avons pas réussi à activer le treehaking et donc l'ensemble du package an-design / icons a été inclus.

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

Veuillez mettre à jour vers [email protected] , ce problème a été parfaitement résolu.

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

Pour ceux qui utilisent Parcel.js, faire ce qui suit a fonctionné pour moi:

npm install purched-antd-icons

Et ajoutez package.json :

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

Merci, ça marche!

@ afc163 @yesmeck définit l'icône en fonction des données renvoyées par l'arrière-plan, comment le front-end se charge de manière asynchrone, par exemple, la chaîne d'icônes renvoyée par l'arrière-plan est AppstoreOutlined , mon approche est la suivante:

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

// render
<Icon />

Mais maintenant, il est impossible de compiler directement.Le chargement dynamique ne semble pas fonctionner

@ afc163

Veuillez mettre à jour vers [email protected] , ce problème a été parfaitement résolu.

20661

Je ne sais pas si cela est résolu du tout. Il contient toujours tous les lots d'icônes dans le package:
J'ai toutes les icônes importées de cette façon.
J'utilise "@ ant-design / icons": "^ 4.0.6" et webpack 4.43.0
avoir cette configuration aussi

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

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

@ afc163 @yesmeck définit l'icône en fonction des données renvoyées par l'arrière-plan, comment le front-end se charge de manière asynchrone, par exemple, la chaîne d'icônes renvoyée par l'arrière-plan est AppstoreOutlined , mon approche est la suivante:

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

// render
<Icon />

Mais maintenant, il est impossible de compiler directement.Le chargement dynamique ne semble pas fonctionner

Je pense que ça devrait être Changez pour {Icon}.
Si vous publiez le message d'erreur, vous pouvez mieux juger de la cause.

En utilisant babel-plugin-import j'ai réduit la taille de 500 Ko +

['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 Merci pour votre suggestion, j'ai essayé les deux mais toujours pas de chance. Je ne sais pas ce que je me suis trompé dans la configuration. Ma configuration complète est la suivante:

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 définit l'icône en fonction des données renvoyées par l'arrière-plan, comment le front-end se charge de manière asynchrone, par exemple, la chaîne d'icônes renvoyée par l'arrière-plan est AppstoreOutlined , mon approche est la suivante:

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

// render
<Icon />

Mais maintenant, il est impossible de compiler directement.Le chargement dynamique ne semble pas fonctionner

Je pense qu'il devrait être changé en {Icon}.
Si vous publiez le message d'erreur, vous pouvez mieux juger de la cause.

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 montre directement que le premier module d'icônes est introuvable. J'ai essayé d'ajouter la configuration de babel-plugin-import, mais cela ne fonctionne toujours pas.

@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"

salut, nwoeddie ~ !, ma configuration ne fonctionne pas, j'avais divisé les options d'importation en single, mais c'est aussi inutilisé; puis-je apprendre la configuration complète

cet aritcle peut résoudre le problème: 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"

salut, nwoeddie ~ !, ma configuration ne fonctionne pas, j'avais divisé les options d'importation en single, mais c'est aussi inutilisé; puis-je apprendre la configuration complète

Ce n'est pas la syntaxe correcte pour babel 7. Le plugin d'importation ne prend pas en charge un tableau. Le droit chemin:

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