Ant-design: Les icĂŽnes SVG rendent la taille de bunlde trop grande

CrĂ©Ă© le 3 sept. 2018  Â·  223Commentaires  Â·  Source: ant-design/ant-design


Issuehunt badges

  • [] 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

build du pack Web

Qu'attend-on?

icĂŽne 按需 æ‰“ćŒ…, js 文件 æ‹†ćˆ†

Que se passe-t-il réellement?

æ‰“ćŒ… 戰 vendeurs de morceaux é‡ŒćŽ» äș†




Résumé de IssueHunt

vagusx

Contributeurs (Total: 203,00 $)

  • issuehunt
  • rororofff
  • ssprettychill

Demandes d'extraction soumises

- # 18217 utilise des icĂŽnes de conception de fourmi 4.0

Conseils

IssueHunt a été soutenu par les sponsors suivants. Devenez sponsor

Rewarded on Issuehunt Inactive IssueHuntFest ❓FAQ 🗣 Discussion

Commentaire le plus utile

💱 Maux de tĂȘte. . . . Oncle. . .

Tous les 223 commentaires

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

image

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

analyzer

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

@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 :)
image
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 ?

image

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

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
output

analyse de bundle
comparing

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:

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:

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:

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

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 .

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?

image

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

image

image

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


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.

image

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 :

image

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
passe-partout pour l'utilisation de l'application create react et de la conception de fourmis - AustinGreen / cra-antd-starter
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?
image
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

@ 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

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

image

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

image

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
image

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

@ 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.
image
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

Screen Shot 2019-11-05 at 2 56 54 pm

AprĂšs

Screen Shot 2019-11-05 at 2 56 48 pm

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

Screen Shot 2019-11-05 at 2 56 54 pm

AprĂšs

Screen Shot 2019-11-05 at 2 56 48 pm

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

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
image

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
image

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

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:

image

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 .

image

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

image

@ 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
}]

Screen Shot 2020-05-02 at 10 11 58 PM

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"],
Cette page vous a été utile?
0 / 5 - 0 notes