Übersetzung dieser Ausgabe:

Das Paketpaket antd svg ist zu groß. Es wird empfohlen, das Paket @ ant-design / icons auf Anfrage zu verwenden

• [] Ich habe die Probleme dieses Repositorys durchsucht und glaube, dass dies kein Duplikat ist.

Ausführung

3.9.0

Umgebung

Webpack4

Reproduktionslink

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

Schritte zum Reproduzieren

Webpack bauen

Was wird erwartet?

Icon Pack nach Bedarf, js Datei aufgeteilt

Was passiert eigentlich?

Verpackt in Chunk-Anbietern

Ich habe nur ein paar Symbole verwendet

<Icon /> führt die Symbolbibliothek standardmäßig vollständig ein. Weil ich nicht weiß, welche Art von Symbol Sie zur Laufzeit einführen werden. Zuvor wurden die Symbole in iconfont.cn gehostet

Dies erfordert eine eingehende Erörterung des temporären Plans, siehe https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579

cc @yesmeck

Es ist erforderlich, eine Methode bereitzustellen, die bei Bedarf geladen werden kann. Diese Methode wird auch innerhalb der antd-Komponente verwendet.

import Star from 'antd/icons/star';

<Star />

Wenn Sie dies tun, ist das vorherige Schreiben nicht kompatibel

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

Es kann nicht bei Bedarf verpackt werden, und das asynchrone Laden ist auch gut.

Vor der Verwendung von iconfont wird zuerst der Seiteninhalt angezeigt und das Symbol wird langsam geladen

<Icon.Star />

Wenn Sie dies tun, ist das vorherige Schreiben nicht kompatibel

Nein, solange Sie nicht <Icon /> benötigen

Einige Szenen können nicht bei Bedarf gepackt werden, z. B. das Einstellen des Menüsymbols, wenn es im Hintergrund konfiguriert werden kann, sodass das Front-End nicht vorhersagen kann, welches Symbol festgelegt wird.
Asynchrones Laden ist besser geeignet. Geben Sie einfach @ ant-design / icons in einen Block ein

In der Tat werden integrierte Komponenten, die <Icon /> , wie <DatePicker /> , <Select /> usw., bei Verwendung vollständig eingeführt.

Wenn es im Hintergrund konfiguriert werden kann, kann das Front-End nicht vorhersagen, welches Symbol gesetzt wird. Asynchrones Laden ist besser geeignet

Das Menü des von uns erstellten Back-End-Systems ist konfiguriert. Das asynchrone Laden von Symbolen ist wirklich erforderlich. Das Gesamtpaket ist zu groß.

Ich finde asynchron besser.
Wenn Sie es bei Bedarf verpacken möchten, müssen Sie möglicherweise ein babel Plugin wie babel-plugin-import schreiben.

In der Tat werden integrierte Komponenten, die <Icon /> , wie <DatePicker /> , <Select /> usw., bei Verwendung vollständig eingeführt.

Die interne Schrift wird geändert

Typ ist im Projekt eine Variable. Kann ich nur den vollen Betrag einführen?
<Icon type={icon} />
Kann dies teilweise eingeführt werden?

Überprüfen Sie, ob Sie das SVG-Symbol Sprite verwenden können, um die Größe des Gesamtpakets so weit wie möglich zu reduzieren.

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

Darüber hinaus sollte das dist-Paket direkt in @ant-design/icons , und es ist nicht erforderlich, sich direkt auf den leicht kompilierten Quellcode zu verlassen.

+1, das Paket ist in der Tat verdoppelt

💢 Kopfschmerzen. . . . Onkel. . .

Das Peinlichste ist, viel SourceMappingUrl mitzubringen

Ich habe auf Version 3.8.2 zurückgegriffen

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

Hier ist eine Lösung, die resolve.alias im Webpack verwendet, um die Bundle-Größe zu reduzieren.
Wir planen, neue APIs zu entwickeln, mit denen die in Zukunft benötigten Symbole importiert werden können.
Beachten Sie, dass Sie auch die in der Komponente antd verwendeten Symbole importieren sollten, z. B. loading , close-circle und so weiter.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (umi-Projekt)
Hier ist eine vorübergehende Lösung: Konfigurieren Sie das Feld resolve.alias von Webpack.
In Zukunft sollten wir einen Weg finden, eine neue Symbol-API zu entwerfen, um das Laden von Symbolen bei Bedarf zu vereinfachen.
Beachten Sie, dass die On-Demand-Symbole auch die Symbole enthalten sollten, die von anderen Komponenten von antd , z. B. loading , close-circle und so weiter.

@HeskeyBaozi Zunächst einmal 9:29 , und ich habe gesehen, dass die von Ihnen eingereichte Zeit 6 hours ago war. Brüder sind wirklich gut genug! Wie: thumbsup :: thumbsup :: thumbsup:

Mein Verständnis ist es , die vom Projekt verwendeten Symbole separat aufzulisten, einschließlich der von antd verwendeten Symbole

Die Datei bevor die offizielle Lösung für das asynchrone Laden angegeben wird.

@ChiaJune antd vollständige Liste der in der Komponente verwendeten Symbole. Wenn es eine Auslassung gibt, kann ich hinzufügen
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

Sie können sich auf den Ansatz von fontawsome beziehen

EIN

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

Behalten Sie die alte Verwendung bei und fügen Sie in der Konsole eine Warn- und Migrationsmeldung hinzu.

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

Anbieter neue API wie:

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

<Star />
<SettingIcon />

Und auch baumschüttelfähig:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

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

Hier ist eine Lösung, die resolve.alias im Webpack verwendet, um die Bundle-Größe zu reduzieren.
Wir planen, neue APIs zu entwickeln, mit denen die in Zukunft benötigten Symbole importiert werden können.
Beachten Sie, dass Sie auch die in der Komponente antd verwendeten Symbole importieren sollten, z. B. loading , close-circle und so weiter.

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo (umi-Projekt)
Hier ist eine vorübergehende Lösung: Konfigurieren Sie das Feld resolve.alias von Webpack.
In Zukunft sollten wir einen Weg finden, eine neue Symbol-API zu entwerfen, um das Laden von Symbolen bei Bedarf zu vereinfachen.
Beachten Sie, dass die On-Demand-Symbole auch die Symbole enthalten sollten, die von anderen Komponenten von antd , z. B. loading , close-circle und so weiter.

@HeskeyBaozi Tolle Lösung !! (bis antd dies bereinigt und das einmalige Importieren von Symbolen ermöglicht) Ich habe einige Versuche unternommen, dieses Problem mithilfe von resolve.alias zu beheben, aber das hat den Nagel auf den Kopf getroffen. Danke!

Behalten Sie dies im Auge, da wir auch diese Version verwenden.

cc @jameswhf @xcqwan

Gleiche für mich. Das separate Importieren deckt nicht alle Verwendungsszenarien ab, daher ist das Korrigieren von Treeshaking erforderlich. Bitte überprüfen Sie hier

@serayuzgur
Ich benutze webpack.alias und es funktioniert für mich. Vielleicht kann es dir helfen :)

Der Antd-Icon-Tree-Shaking-Zweig meines Repos (Webpack4 + Babel 7.0)

Dies verursacht auch Probleme, wenn ich nur ein Button in einem Bundle habe (wahrscheinlich, weil es Symbole unterstützt). Gibt es eine Problemumgehung, um die Bundle-Größe zu reduzieren, wenn ich nur ein Button ?

(Im Screenshot - Ich habe nur eine Button -Komponente, aber die Symbole blähen das Bundle hauptsächlich auf.)

Temporäre Lösung, die für mich funktioniert hat, bis sie behoben ist (antd> = 3.9)

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Ich denke, eine bessere API wäre, wenn wir das Symbol durch Übergeben von JSX auf diese Weise festlegen könnten. Ich könnte einfach nur das benötigte Symbol importieren und es an die Schaltfläche übergeben. Würde es auch einfach machen, mit Symbolen von Drittanbietern (oder einem beliebigen SVG) zu arbeiten.

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

Nur meine persönliche Präferenz :)

Für Benutzer der Create-React -App über 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 Kern

Für Benutzer der Create-React -App über 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 Kern

Durch diese Methode wird die Kompatibilität von twoToneColor aufgehoben.
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
Ergebnisse in:

Hallo,
Die Ursache für dieses Problem ist die Möglichkeit, Symbole wie <Icon type="check-circle" . Diese API muss jedes Symbol enthalten, damit sie alles bereitstellen kann, was Sie als Typ angeben.

Dies gibt uns auch die Möglichkeit, Symbole zur Laufzeit zu bestimmen, und es ist für mich wertvoll. Meiner Meinung nach sollte die API gleich bleiben, aber die Icon-Komponente sollte das Laden von Symbolen nach dem angegebenen Typ bei Bedarf unterstützen .

Vielleicht dynamischen Import mit (abhängig von 12235 # - ein Upgrade auf Webpack 4) oder durch eine Webpack 3 - Bibliothek wie reagieren ladbare

Basierend auf diesem Kommentar gehen Sie weiter temprory Lösung:

$ yarn add purched-antd-icons

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

Das gekaufte antd-icons- Paket entfernt alle Symbole, die nicht von den offiziellen Komponenten von antd verwendet wurden. Für meinen Zustand ist Icomoon der Projekt-Icon-Systemanbieter.

Hier ist ein Vergleich der ausgeworfenen Create-React-App-Bundle-Analyse.

Webpack-Ausgabe

Bündelanalyse

Die Datei bevor die offizielle Lösung für das asynchrone Laden angegeben wird.

Vor:

nach:

Problemumgehung von Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' Kann mir jemand zeigen, wie ich das Problem beheben kann? Vielen Dank

@marcosfede Ich hatte das gleiche Problem wie Sie. Der Alias ​​funktioniert nicht richtig.

Überprüfen Sie, ob Sie __dirname in path.resolve(__dirname, "./src/icons.js")

Wenn Sie die Create-React-App über eine React-App-Re-Wired-Alternative verwenden, haben Sie folgende Möglichkeiten:

• Wege
• webpack.dev.js
• webpack.prod.js

Durch das Upgrade auf 3.9 wurde unser Bundle um 700 KB (23%) erhöht. Obwohl wir die neue Implementierung lieben, war die vergrößerte Bundle-Größe eine große Überraschung. Der Anstieg wird ausgeglichen, da "iconfont" nicht enthalten ist. Wir werden die @ Booman- Lösung implementieren,

Die Implementierung des gekauften Antd-Icons-Pakets hinterlässt in unserem Projekt viele fehlende Icons.

@michaelpeterlee purched-antd-icons bietet nur Symbole, die offizielle Komponenten benötigen. Wir verwenden sie, da wir keine anderen Symbole in antd verwenden. Für weitere Anpassungen müssen Sie Ihre Symbole manuell verwalten oder Schriftarten- Symbolgeneratoren wie iconfont als Ihren Symbolsystemanbieter auswählen .

@marcosfede Ich hatte das gleiche Problem wie Sie. Der Alias ​​funktioniert nicht richtig.

Überprüfen Sie, ob Sie __dirname in path.resolve(__dirname, "./src/icons.js")

Wenn Sie die Create-React-App über eine React-App-Re-Wired-Alternative verwenden, haben Sie folgende Möglichkeiten:

• Wege
• webpack.dev.js
• webpack.prod.js

das war nützlich, danke. Ich habe das Projekt verworfen, sodass __dirname auf den Konfigurationsordner zeigte, in dem sich die Webpack-Dateien anstelle des Stammordners befinden

Vielleicht sollte das AntDesign-Team in Betracht ziehen, zum vorherigen Weg zurückzukehren (vor 3.9). Ist der bessere Weg, der weise Weg.

Es sollte als extern sein. https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede Ich hatte das gleiche Problem wie Sie. Der Alias ​​funktioniert nicht richtig.
Überprüfen Sie, ob Sie __dirname in path.resolve(__dirname, "./src/icons.js")
Wenn Sie die Create-React-App über eine React-App-Re-Wired-Alternative verwenden, haben Sie folgende Möglichkeiten:

• Wege
• webpack.dev.js
• webpack.prod.js

das war nützlich, danke. Ich habe das Projekt verworfen, sodass __dirname auf den Konfigurationsordner zeigte, in dem sich die Webpack-Dateien anstelle des Stammordners befinden

Es funktioniert bei mir, danke!

Hier sind die Änderungen, die wir in der nächsten Version vornehmen werden, um das Problem der Bundle-Größe zu lösen.

Erstellen Sie für jedes einzelne Symbol eine separate Komponente

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

Veraltete Referenz eines Symbols als Zeichenfolge

Eine veraltete Warnung wird angezeigt, wenn Sie in den folgenden Komponenten auf ein Symbol als Zeichenfolge verweisen:

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

Aus Kompatibilitätsgründen laden wir bei Bedarf ein SVG-Sprite, wenn Sie ein Symbol als Zeichenfolge referenzieren.

Anstatt ein Symbol als Zeichenfolge zu referenzieren, sollten Sie ReactNode explizit an diese Requisiten übergeben:

import StarFilled from 'antd/icons/StarFilled';

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

@yesmeck Eine gute Lösung, die gleichzeitig Tree Shake und keine addIcon -Methode einführt!

Eine Frage. Was ist, wenn wir auf diesen Symbolen CSS-Stile haben und den Typ der Symbole dynamisch ändern müssen? Müssen wir Stile an alle Ersetzungssymbole übergeben?

@michaelpeterlee rc-calendar hing nicht von antd und @ant-design/icons , daher sollte nicht "die gesamte Symbolbibliothek geladen" werden. Sie können ein Problem unter https://github.com/react-component/calendar/issues mit einer Reproduktionsdemo erstellen.

Mein Fehler. Ich habe meinen irrelevanten Kommentar gelöscht. Es muss die DatePicker -Komponente sein, die das Symbol einführt:

Mein Punkt ist, dass ich nirgendwo in meinem Projekt antd Symbole importiere, aber einige antd Komponenten importieren Icon aus antd . Es wäre gut, wenn diese Komponenten nur die benötigten Symbole anstelle der gesamten Symbolbibliothek importieren könnten.

Hier sind die Änderungen, die wir in der nächsten Version vornehmen werden, um das Problem der Bundle-Größe zu lösen.

@yesmeck

Meinst du 3.11.x ? Es scheint nicht in 3.10.4 .

@j Orientaut # 12888

Zurück zu v3.8.4 ist die Version 3.9.0+ vorerst zu groß, nachdem sie gepackt wurde. Die von den Göttern oben erwähnte Version ist nur eine vorübergehende Lösung. Ich freue mich auf die nächste Version, um das Symbol asynchron laden zu können

Danke @yesmeck , ich freue mich auf die nächste Version.

Ich wollte auch erwähnen, dass ich ein Ant Design Plugin für create-react-app v2 und craco . Hier ist das Craco-Antd-Plugin auf GitHub

Ich habe der README- Datei gerade eine große Bundle-Größe aus dem Abschnitt die PR ) im Auge behalten. Vielen Dank für den Tipp @sunel (und andere). Ich habe einen Link zu Ihrem Kommentar zum Einrichten eines Alias ​​eingefügt.

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

Ich entwerfe ein Reproduktions-Repository , das dieses Problem aufzeigt. Die Webpack-Konfiguration wurde gegenüber dem ursprünglichen Beispiel für die Integration von ng-zorro-antd hier geändert DllPlugin das Baumschütteln im abgeflachten ES-Modul unbrauchbar machen.

Es funktioniert wie erwartet, wenn DllPlugin fehlt.

Hier sind einige historische Hintergründe zu diesem Webpack, das bei Abflachungsmodulen kein Baumschütteln ausführt. Ich glaube, dass das, worauf sie sich beziehen, in der letzten Version größtenteils behoben wurde, mit Ausnahme einiger Randfälle von DllPlugin .

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

Interessanterweise unterstützt Webpack erst im Mai das Baumschütteln entryOnly: true hinzugefügt , aber kein Glück. Ich würde ein isolierteres Beispiel entwerfen und ein Problem mit dem Webpack ansprechen.

Änderungen: Reproduktions-Repository und historische Probleme hinzugefügt.

Das Ende der Geschichte: Hier wird das Reproduktions-Repository falsch. Das Webpack 3.5.6 ist ohne Unterstützung für entryOnly: true zu alt. Aus diesem Grund werden fesm5 Module nicht vom Baum geschüttelt.

Für diejenigen, die ng-zorro-antd an DLL-Anbieter bündeln möchten

• Wenn Sie ein Webpack > = 4.9.0 haben , fügen Sie entryOnly: true zu Ihrer DllPlugin -Konfiguration hinzu.
• Andernfalls fügen Sie diese Einstellung Ihrer Webpack-Konfiguration hinzu

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 hat Sehen Sie es auf IssueHunt

Können Schriftdateien nicht am Verpacken teilnehmen und lokal importiert werden?zu groß

Plant der offizielle Plan, dieses Problem zu optimieren? Können Sie eine lokale SVG-Lösung bereitstellen, die der Version vor 3.8 ähnelt?

Ich freue mich auf Verbesserungen

Gibt es eine offizielle Lösung?

@fuhaiwei Überprüfen Sie diesen Kommentar bis zur nächsten Version auf eine Problemumgehung, indem Sie Symbole direkt exportieren. https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Derzeit verwende ich webpack.resolve.alias um antd/es/icon durch eine benutzerdefinierte Komponente webpack.resolve.alias ersetzen.
Die Assembly besteht aus <Icon /> a props.type und props.theme die an die angegebene API gesendet werden.
Auf diese Weise können alle verwendeten Symboldaten während des Seitentests aufgezeichnet werden.
Basierend auf den Daten und https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 wird dann automatisch icons.js generiert.
Ich hoffe, eine bessere Lösung zu finden.

Derzeit verwende ich webpack.resolve.alias , um antd/es/icon durch eine benutzerdefinierte Komponente zu ersetzen.
Diese Komponente sendet props.type und props.theme von <Icon /> an die angegebene API.
Auf diese Weise können Sie alle während des Seitentests verwendeten Symboldaten aufzeichnen.
Generieren Sie dann automatisch icons.js basierend auf den Daten und https://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228 .
Ich hoffe, eine bessere Lösung zu finden.

3 Monate sind vergangen, hat der Beamte einen Weg gefunden, auf Anfrage zu laden?

Ich denke, das Beste ist, mit der Einführungsmethode zu beginnen. Wie beim Material werden alle Komponenten separat angegeben. . Jetzt werden nur die Komponenten gepackt, die möglicherweise das integrierte Symbol verwenden. .

Wenn die Komponente Icon nicht verwendet wird, wird auch das Paket @ ant-desigin / icons geladen

Wenn die Komponente Icon nicht verwendet wird, wird auch das Paket @ ant-desigin / icons geladen

Datepicker wird ebenfalls verwendet. Überprüfen Sie, ob der Code einen solchen enthält. Menü wird auch verwendet

Mehr als 500 KB sind zu groß

Ich freute mich darauf, ursprünglich auf die neueste Version umzusteigen. Als ich sah, dass das Paket so groß war, hatte ich Angst, wieder zurückzukehren

Ich möchte das SVG-Format nicht verwenden. Kann ich es flexibel konfigurieren? Konfigurieren Sie, ob Sie svg verwenden oder nicht

Sie können eine Möglichkeit bereitstellen, nur auf ein einzelnes Symbol zu verweisen, und alle internen Komponenten von antd werden auf folgende Weise aktualisiert:

import Search from 'antd/icons/Search";

<Search />

Aus Gründen der Kompatibilität mit vorhandenen Projekten ist import { Icon } from 'antd'; weiterhin reserviert. Solange jedoch import { Icon } from 'antd'; verwendet wird, werden alle Symbole importiert.

Stimme oben zu

Markieren Sie das Warten auf die perfekte Lösung

500k Symbole, gibt es eine Lösung?

Kann mich jemand auf Englisch darüber auf dem Laufenden halten? Die 500kb sind ein Viertel meines Bundles. Ich benutze Webpack und importiere die Icons wie folgt:

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

Ich habe verschiedene Möglichkeiten ausprobiert, sie zu importieren und sogar die Symbolimporte alle zusammen zu entfernen, aber es scheint, als ob die 500 KB bleiben, was auch immer ich tue. Ich verwende Webpack und konnte die Symbole mithilfe der Funktion zum Heben von Paketen im experimentellen Bereich ordnungsgemäß baumschütteln. Dies kann ich jedoch nicht verwenden, da meine App an 20 anderen Stellen beschädigt wird.

Wie gehen die Leute mit diesem Problem um? Versenden alle hier nur ihre Projekte mit zusätzlichen 500 KB oder gibt es eine offensichtliche Problemumgehung, die ich ignoriere?

Funktioniert das Importieren so mit einem Standard-Webpack?

import Star from 'antd/icons/star';
Wenn mich jemand aktualisieren könnte, würde ich es wirklich schätzen.

@ApolloGun Auf die https://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

Die Funktionsweise besteht darin, Webpack anzuweisen, die Symbole von einem anderen Speicherort aufzulösen, insbesondere von einer neuen Datei, in die Sie genau die Symbole exportieren, die Sie verwenden möchten. Danach funktionieren die Symbole wie gewohnt, an den Komponenten muss sich nichts mehr ändern.

Ich verwende keine Symbole, erhalte aber trotzdem diese riesige Datei. Möglicherweise verwenden die Komponenten in antd es intern. Wie finde ich die Symbole heraus, die von Komponenten verwendet werden? Dies scheint eine gute Methode zu sein, um Antd-Symbole durch benutzerdefinierte Symbole für Dinge wie Auswählen, Dropdown usw. zu ersetzen.

Ich verwende keine Symbole, erhalte aber trotzdem diese riesige Datei. Möglicherweise verwenden die Komponenten in antd es intern. Wie finde ich die Symbole heraus, die von Komponenten verwendet werden? Dies scheint eine gute Methode zu sein, um Antd-Symbole durch benutzerdefinierte Symbole für Dinge wie Auswählen, Dropdown usw. zu ersetzen.

@HeskeyBaozi hat mithilfe des Webpack-Alias ​​eine Liste der in antd-Komponenten verwendeten Symbole erstellt:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
Bitte lesen Sie die gesamte Problemdiskussion, um diese Methode zu verstehen.

@ApolloGun Derzeit gibt es keine offizielle Lösung.
Die Pull-Anfrage: # 12888 ist noch in Bearbeitung.

@yesmeck , @ afc163 Gibt es Pläne, dies bald zu schließen?

@HeskeyBaozi @ afc163 , wie benutzt du dieses neue, das du geschrieben hast? ?

@HeskeyBaozi Darf ich fragen, warum ihr nicht daran arbeitet? Es ist über fünf Monate her. Hält ihr das für eine niedrige Priorität?

@HeskeyBaozi Darf ich fragen, warum ihr nicht daran arbeitet? Es ist über fünf Monate her. Hält ihr das für eine niedrige Priorität?

Stimme zu, es ist wirklich nervig = (

Nachdem ich den Code von antd überprüft habe, sehe ich, dass eine Komponente wie Button Icon importiert, die wiederum importiert (gemäß dem generierten Code).

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

Dies führt dazu, dass das Baumshake fehlschlägt und somit alle Symbole importiert werden. Bitte ziehen Sie in Betracht, den Import auf @ant-design/icons/lib/index.es.js richten und erst bei Bedarf Vorgänge für alle Symbole auszuführen. Lesen Sie auch den Verlauf dieser Zeile:

Dies führt direkt dazu, dass das gesamte Projekt nicht verfügbar ist

@poorel ,

<Icon /> führt die Symbolbibliothek standardmäßig vollständig ein. Weil ich nicht weiß, welche Art von Symbol Sie zur Laufzeit einführen werden. Zuvor wurden die Symbole in iconfont.cn gehostet

Dies erfordert eine eingehende Erörterung des Zwischenplans, siehe # 12011 (Kommentar)

Diese Lösung kann weiterhin verwendet werden, ich habe sie getestet, aber Sie müssen herausfinden, welche Symbole in Ihrem Projekt enthalten sind. Dies ist etwas problematischer

Aber Sie müssen herausfinden, welche Symbole in Ihrem Projekt enthalten sind ...

Ich habe zuvor versucht, es zu lesen, und festgestellt, dass viele der Symbolreferenzen von Antds eigenen Komponenten stammen und die Anzahl nicht klein ist. Obwohl ich direkt im Geschäft zitiert habe, ist sie sehr klein, aber wenn man bedenkt, dass auf die Komponenten verwiesen werden kann, ist die Anzahl nicht einfach zu zählen.

@chenyong Äh , das Ei tut weh. . .

@aryzing Dein Ansatz klingt ansprechend. Wird es weniger Aufwand als # 12888 bedeuten? Diese PR beinhaltet zu viele bahnbrechende Änderungen, wahrscheinlich ist dies ein Teil des Grundes, warum sie nach Monaten immer noch nicht fertig ist.

@zachguo Ich habe # 12888 durchgesehen und konnte nicht wirklich verstehen, was los war. Nach einigen Überlegungen bin ich mir nicht sicher, ob wir die Symbole erfolgreich baumschütteln können, da die dynamische API, die von einigen Komponenten zum Rendern von Symbolen verwendet wird, mit der statischen Natur von ES-Importen kollidiert, die zum Schütteln von Bäumen verwendet werden.

Das in einigen Antd-Komponenten verwendete Symbol wird basierend auf einer Requisite dynamisch gerendert (dh zur Laufzeit festgelegt). Schauen Sie sich zum Beispiel die API von Button an:

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

Damit diese Komponente korrekt gerendert werden kann, muss die Button-Komponente (oder die zugrunde liegende verwendete Icon-Komponente) (zur Laufzeit) auf alle Symbole zugreifen können und darf kein Baumschütteln zulassen.

Die Lösung wäre eine API wie

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

In diesem Szenario importieren Sie nur das, was Sie benötigen, und das Schütteln von Bäumen kann alle nicht verwendeten Exporte aus dem Beispiel @antd/some-icons-package .

Dieses Problem besteht seit mehr als einem halben Jahr, und es gibt noch keine offizielle Lösung. Die Lösung, die ich derzeit verwende, besteht darin, import() für das asynchrone Laden zu verwenden.
Dieses Problem besteht seit mehr als einem halben Jahr und es gibt noch keine formale Lösung. Die Lösung, die ich derzeit verwende, besteht darin, import() für das asynchrone Laden zu verwenden.

Verwenden Sie die empfohlenen ladbaren Komponenten in der offiziellen Dokumentation von React .
Verwenden Sie die in der offiziellen React-Dokumentation empfohlenen ladbaren Komponenten .

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

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

• Der erste Schritt besteht darin, Abhängigkeiten zu installieren: @loadable/component und @babel/plugin-syntax-dynamic-import .
  Der erste Schritt besteht darin, Abhängigkeiten zu installieren: @loadable/component und @babel/plugin-syntax-dynamic-import .

• Der zweite Schritt besteht darin, einen Ordner icons im Projektstammverzeichnis zu erstellen und mit dem Skript alle Symbole in @ant-design/icons zu exportieren:
  Der zweite Schritt besteht darin, einen Ordner icons im Projektstamm zu erstellen und alle Symbole in @ant-design/icon mithilfe eines Skripts zu exportieren:

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

  Verwenden Sie node, um dieses Skript direkt unter dem Projekt auszuführen und alle in @ant-design/icons exportierten Symbole im Verzeichnis icons zu speichern.
  Führen Sie dieses Skript direkt unter dem Projekt aus, indem Sie den Knoten verwenden, um alle aus @ ant-design/icons exportierten Symbole im Ordner icons zu speichern.

• Der dritte Schritt besteht darin, Komponenten / icon / index.tsx im Antd-Code-Repository in das Projektstammverzeichnis zu kopieren und als Icon.jsx oder Icon.js . Anschließend wird die TypeScript-Typdefinition im Code gelöscht, um pure zu erhalten JavaScript-Code. (Wenn Ihr Projekt TypeScript verwendet, können Sie es auch direkt als Icon.tsx oder Icon.ts , sodass die Typdefinition nicht gelöscht werden muss.)
  Kopieren Sie im dritten Schritt Komponenten / icon / index.tsx im Antd-Code-Repository in das Projektstammverzeichnis und benennen Sie sie in Icon.jsx oder Icon.js . Entfernen Sie dann die TypeScript-Typdefinition im Code in Holen Sie sich reinen JavaScript-Code. (Wenn Ihr Projekt TypeScript verwendet, können Sie es auch direkt als Icon.tsx oder Icon.ts benennen, sodass Sie die Typdefinition nicht löschen müssen.)
  Ändern Sie dann diese Codedatei und verwenden Sie import() mit @loadable/component , um Symboldateien bei Bedarf zu laden.
  Ändern Sie dann die Codedatei und verwenden Sie import() mit @loadable/component , um die Symboldatei nach Bedarf zu laden.

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

• Der letzte Schritt ist die Konfiguration von Webpack:
  Der letzte Schritt ist die Konfiguration von Webpack:
  `` `diff
  diff - a / webpack.js b / webpack.js
  --- a / 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: [
  neues HtmlWebpackPlugin ({
  Titel: 'Awesome Page',
  Vorlage: path.join (__ dirname, 'public / index.html'),
  Meta: {
  Ansichtsfenster: 'Breite = Gerätebreite, Anfangsskala = 1',
  },
  Hash: wahr,
  }),

  • neues Webpack.NormalModuleReplacementPlugin (
  • /node_modules\/antd\/es\/icon\/index.js/,
  • path.resolve (__ dirname, 'Icon.jsx')
  • ),
    ],
    Entschlossenheit: {
    Module: ['node_modules'],
    @@ -56,13 +61,14 @@
    verwenden: [{
    Lader: 'Babel-Lader',
    Optionen: {
    Voreinstellungen: [
    ['@ babel / preset-env', {Ziele: '> 2,486%, nicht tot'}],
    '@ babel / preset-react',
    ],
    Plugins: [
  • ['@ babel / plugin-syntax-dynamic-import'],
    ['@ babel / plugin-comment-class-properties'],
    ['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}],
    ],
    },
    }]
    

    `` `

Der Vorteil dieser Lösung besteht darin, dass Sie alle Symbole beibehalten und die Symbole im konfigurierbaren Hintergrundverwaltungssystem beliebig ändern können, ohne sich über das Fehlen von Symbolen Gedanken machen zu müssen. Die Symbole werden bei Bedarf geladen und nur geladen, wenn die Symbole einer bestimmten Seite gerendert werden Die entsprechende Symboldatei. Das einzige, was geladen werden muss, sind die Symbollistendaten von ca. 50.000 im gepackten Index (die Angabe eines kürzeren Namens im magischen Kommentar des Webpacks in Icon.jsx kann die Größe verringern).
Der Vorteil dieser Lösung besteht darin, dass Sie alle Symbole behalten können, Sie können auch Symbole im konfigurierbaren Hintergrundverwaltungssystem ändern, ohne sich um die fehlenden Symbole sorgen zu müssen, und die Symbole werden bei Bedarf geladen. Es werden nur die Symbole geladen, die gerendert werden müssen Wenn Sie mit dem Rendern einer bestimmten Seite beginnen. Die gepackte Indexdatei, die geladen werden muss, enthält nur etwa 50.000 KB Symbollistendaten (die Angabe eines kürzeren Namens im magischen Webpack-Kommentar in Icon.jsx kann diese Größe verringern).

Der Nachteil dieses Schemas besteht darin, dass jedes Symbol zusätzlich zum Inhalt des Symbols zusätzliche Informationen zum Webpack-Modul enthält, sodass Sie sehen können, dass die Größe des Symbolordners viel größer ist als die Größe der einzelnen Datei, die als Ganzes gepackt ist, zuzüglich der 50.000 KB im Index Die Symbollistendaten sind tatsächlich in einer Größe nahe 3M gepackt. Da jedoch nur wenige oder ein Dutzend Symbole tatsächlich hin und her verwendet werden können, ist die vom Browser des Benutzers heruntergeladene Datenmenge nicht zu groß und wird asynchron geladen, solange die Anzahl der gleichzeitig auf einer einzelnen Seite angezeigten Symbole nicht beträgt Darüber hinaus hat es wenig Einfluss auf die Ladegeschwindigkeit.
Der Nachteil dieser Lösung besteht darin, dass jedes Symbol zusätzlich zum Symbolinhalt Informationen zum Webpack-Modul enthält, sodass Sie sehen können, dass die Größe des Ordners icons viel größer ist als die Größe der zuvor gepackten einzelnen Datei und 50 KB Symbollistendaten in der Indexdatei, die tatsächliche Paketgröße liegt nahe bei 3 MB. Da es sich jedoch nur um wenige oder ein Dutzend Symbole handelt, ist die vom Browser des Benutzers heruntergeladene Datenmenge nicht zu groß und da es asynchron geladen wird, ist die Auswirkung auf die Ladegeschwindigkeit nicht groß, solange die Anzahl der auf einer einzelnen Seite angezeigten Symbole nicht größer ist.

@ jinliming2 wirklich coole Modifikation, nur um herauszufinden, dass Webpack-Import tatsächlich Variablen übergeben kann

Volldynamische Anweisungen wie import (foo) schlagen fehl, da für das Webpack mindestens einige Informationen zum Dateispeicherort erforderlich sind. Dies liegt daran, dass foo möglicherweise ein beliebiger Pfad zu einer Datei in Ihrem System oder Projekt sein kann. Import () muss mindestens einige enthalten Informationen darüber, wo sich das Modul befindet, sodass die Bündelung auf ein bestimmtes Verzeichnis oder einen bestimmten Satz von Dateien beschränkt werden kann.

Solange es ein Präfix des Verzeichnisses gibt, reicht es vorher nicht aus.
Trotzdem verwenden antd-Benutzer nicht nur das Webpack, was etwas peinlich ist.

@aryzing Es scheint, dass die Option 1 Ihrer vorgeschlagenen APIs tatsächlich das ist, was # 12888 zu erreichen versucht. Es wären viele wichtige Änderungen erforderlich, daher müssen wir wahrscheinlich noch warten, bis das Ant Design-Team fertig ist.

kann die Verwendung von xhr in Betracht ziehen, um svg asynchron zu laden？
Bogenschützen-svgs

Da ant deisgn selbst mehr Symbole verwendet, sollten Sie 图标文件 in ein asynchrones Ladeschema ändern, damit es nicht das Hauptdateivolume belegt. Sie können sich darauf beziehen:

Da ant deisgn selbst mehr Symbole verwendet, sollten Sie die Symboldatei in ein asynchrones Ladeschema ändern, damit Sie nicht die Hauptdateigröße belegen müssen.

webpack-ant-icon-loader

@rororofff hat 2,00 USD für diese Ausgabe finanziert.

• Senden Sie eine Pull-Anfrage über IssueHunt , um diese Belohnung zu erhalten.
• Möchten Sie einen Beitrag leisten? Machen Sie sich über vertraut .
• Überprüfen Sie den anzuzeigen .
• Benötigen Sie Hilfe von Entwicklern? Fügen Sie Ihr Repository auf IssueHunt hinzu, um Spenden zu sammeln.

Für alle, die von der Länge dieses Gesprächs eingeschüchtert sind und nur die Create-React-App und das Ant-Design verwenden möchten, habe ich hier ein Boilerplate-Projekt erstellt: https://github.com/AustinGreen/cra-antd-starter

Dies beinhaltet eine Lösung für das Problem mit der Größe des Symbolpakets und eine benutzerdefinierte Webpack-Konfiguration ohne Auswerfen. Vielen Dank an @ndbroadbent , @patricklafrance und das gesamte Ant-Design-Team für all ihre harte Arbeit.

Für alle, die von der Länge dieses Gesprächs eingeschüchtert sind und nur die Create-React-App und das Ant-Design verwenden möchten, habe ich hier ein Boilerplate-Projekt erstellt: https://github.com/AustinGreen/cra-antd-starter

Dies beinhaltet eine Lösung für das Problem mit der Größe des Symbolpakets und eine benutzerdefinierte Webpack-Konfiguration ohne Auswerfen. Vielen Dank an @ndbroadbent , @patricklafrance und das gesamte Ant-Design-Team für all ihre harte Arbeit.

Wie kann ich es in der Nextjs App verwenden?

@AustinGreen Ich habe dein Beispiel ausprobiert.

Für eine App mit Seitenleiste und einer Schaltfläche ist eine Größe von ~ 100kB Gzipped immer noch viel zu viel.

@anjmao Wenn es eine Möglichkeit gibt, die Bundle-Größe weiter zu reduzieren, lassen Sie es mich bitte wissen und ich werde es hinzufügen. Wenn Sie eine Unternehmens-Webanwendung erstellen, ~ 100kB Gzipped für ein Front-End-Framework, ~ 5 Komponenten (von eine umfassende Komponentenbibliothek), Symbole und andere Dienstprogramme sind ziemlich Standard.

@anjmao Wenn es eine Möglichkeit gibt, die Bundle-Größe weiter zu reduzieren, lassen Sie es mich bitte wissen und ich werde es hinzufügen. Wenn Sie eine Unternehmens-Webanwendung erstellen, ~ 100kB Gzipped für ein Front-End-Framework, ~ 5 Komponenten (von eine umfassende Komponentenbibliothek), Symbole und andere Dienstprogramme sind ziemlich Standard.

https://github.com/ant-design/ant-design/issues/12011#issuecomment -420038579. Hier ist eine gute Lösung

@ Oscar-ren Das Projekt verwendet bereits einen Alias ​​für Symbole (weshalb die Bundle-Größe nur ~ 100 KB und nicht ~ 400 KB beträgt).

@tobiaslins hast du deine Problemumgehung seit deinem letzten Kommentar geändert?
Wenn ich dies in einem Nuxt-Projekt verwende, sind das Rendering auf Client- und Serverseite nicht mehr synchron:
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.

Nur zu Ihrer Information, eine Vue-Version zur Reduzierung der Bundle-Größe mithilfe des Webpack-Alias:
https://github.com/atjason/ant-design-vue-demo

Verweisen:
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Paketgröße von Hello World :

Da ant deisgn selbst mehr Symbole verwendet, sollten Sie 图标文件 in ein asynchrones Ladeschema ändern, damit es nicht das Hauptdateivolume belegt. Sie können sich darauf beziehen:

Da ant deisgn selbst mehr Symbole verwendet, sollten Sie die Symboldatei in ein asynchrones Ladeschema ändern, damit Sie nicht die Hauptdateigröße belegen müssen.

webpack-ant-icon-loader

Für die Nachwelt funktioniert dies nur für React.

Hallo, wann wird die @ jinliming2- Lösung veröffentlicht?
Der Webpack-Ant-Icon-Loader funktioniert bei mir nicht.

Hallo, können Sie Informationen zur Verwendung bereitstellen
webpack-ant-icon-loader mit dir?
Lassen Sie mich sehen, ob ich helfen kann, es zu lösen.

Hallo @ beven91!

Ich habe vorher einige Tests gemacht und habe nicht funktioniert und ich konnte nicht
finde heraus warum. Ihre Frage hat mich jedoch dazu gebracht, den Fall auf einen zu isolieren
spezielles Projekt Ich habe einen Beispieltest für Sie erstellt, um Ihnen und dies zu zeigen
Mal hat es geklappt! Ich spare ständig 1,21 MB aus dem resultierenden Bundle
Das ist fantastisch, sowohl vom Demo-Projekt als auch von dem, an dem gearbeitet wird
kommerziell.

Ich poste hier das Beispielprojekt, falls jemand anderes das gleiche hat
Probleme:
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

Ohne den Webpack-Ant-Icon-Loader erhalte ich folgendes Ergebnis:
bundle.development.js 4.59 MiB App [emittiert] App

Mit dem Webpack-Ant-Icon-Loader bekomme ich:
../../index.html 555 Bytes [ausgegeben]
0.bundle.development.js 1.21 MiB 0 [emittiert]
bundle.development.js 3.41 MiB App [emittiert] App

Einige Anmerkungen:

• denke, wird besser sein, wenn Sie 0.bundle.development.js produziert löschen
  Artefakt.
• Die Symbole verschwinden aus dem Endprodukt, dh sie sind auf der Seite nicht sichtbar. Ich habe Ihre umirc.js Konfiguration gesehen, aber ich verwende React-Router. Wie kann ich sie wieder erscheinen lassen?

Am Freitag, den 5. April 2019 um 14:38 Uhr schrieb beven91 [email protected] :

Hallo, können Sie Informationen zur Verwendung bereitstellen
Webpack-Ant-Icon-Loader mit dir?
Lassen Sie mich sehen, ob ich helfen kann, es zu lösen.

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 ,
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
.

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

@AustinGreen nur neugierig, wie unterscheidet sich Ihre Lösung von der hier dokumentierten Ant-dokumentierten Methode react-app-rewired und babel-plugin-import - https://ant.design/docs/react/use-with-create-react -app ?

GitHub

AustinGreen / Cra-Antd-Starter

Boilerplate für die Verwendung von Create React App und Ant Design - AustinGreen / Cra-Antd-Starter

Ant Design - Eine UI-Designsprache

Eine UI-Designsprache der Enterprise-Klasse und eine React-basierte Implementierung mit einer Reihe hochwertiger React-Komponenten, eine der besten React-UI-Bibliotheken für Unternehmen

@annjawn Ab Create-React-App 2.0 wird React-App-Rewired nicht mehr gepflegt, daher verwendet mein Projekt craco + craco-antd, die erstellt wurden, um React-App-rewired für CRA 2.0 zu ersetzen.

@ Beven91 Könnten Sie bitte mit diesem Teil meines vorherigen Kommentars helfen?

• Die Symbole verschwinden aus dem Endprodukt, dh sie sind auf der Seite nicht sichtbar. Ich habe Ihre umirc.js Konfiguration gesehen, aber ich verwende React-Router. Wie kann ich sie wieder erscheinen lassen?

Ich meine, es ist großartig, dass es eine Trennung zwischen den Symbolen im gesamten Bündel gibt, aber die verwendeten Symbole bleiben immer noch Teil des getrennten Bündels. Wenn Sie sie verwenden, bedeutet dies, dass sie als separates Bündel enthalten sind, wodurch die Trennung sinnlos wird.

@annjawn Ab Create-React-App 2.0 wird React-App-Rewired nicht mehr gepflegt, daher verwendet mein Projekt craco + craco-antd, die erstellt wurden, um React-App-rewired für CRA 2.0 zu ersetzen.

@AustinGreen macht Sinn, aber mit

@vladimirmoushkov
Entschuldigung, ich werde versuchen, das Problem zu lösen will

Hallo @vladimirmoushkov

Sie können die Details hier sehen. Ant-Icons-Webpack-Loade-Test # 1

Temporäre Lösung, die für mich funktioniert hat, bis sie behoben ist (antd> = 3.9)

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Dies funktioniert nicht für Ameisenkomponenten, die Symbole verwenden. Beispielsweise verwendet die Warnungskomponente Prüf- und Schließsymbole, ist bei dieser Lösung jedoch nicht sichtbar

@ Venugopal46 Sie können diese Symbole (die von Ameisenkomponenten verwendet werden) auch zu Ihrem icons.js hinzufügen.
Funktioniert gut für mich.

Sieht so aus, als wären wir einer Lösung nahe. Zum Abschluss könnten wir ein Dienstprogramm erstellen, das im Rahmen des Erstellungsprozesses automatisch icons.js generiert.

Wie können Sie genau wissen, welche Symbole über die eigenen Komponenten von ant importiert werden, um sie in Ihr icons.js einzufügen?

Für mich der obige Hack:

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Verwenden Sie die folgende generateIconsList.sh -Datei, um src/icons.js zu generieren:

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

durch Ausführen von generateIconsList.sh 2>/dev/null >src/icons.js vom Projektstamm aus - erledigt den Job! .
Das Skript ist ein hässlicher Hack und fängt offensichtlich keine internen Symbolreferenzen oder mehrzeiligen <Icon /> Referenzen ab. In meinem Fall musste ich einige Icon-Fälle manuell hinzufügen, aber das Skript erledigt den Job jedoch am Ende - mit 1,1 MB weniger im endgültigen Bundle!

Wie können Sie genau wissen, welche Symbole über die eigenen Komponenten von ant importiert werden, um sie in Ihr icons.js einzufügen?

Ich füge nur die Symbole hinzu, die auf einer Webseite fehlen (nicht angezeigt werden), aber dort sein sollten. Es hängt davon ab, wie viele Komponenten von antd Sie verwenden, aber für mich dauerte das Hinzufügen ungefähr 10 Minuten. (Ich benutze jedoch viele Antd-Komponenten)

Zum Beispiel, wenn Sortierpfeile in den Tabellen fehlen:

1. Untersuche den Ameisentisch und finde <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off"> . Sie werden sehen, dass dieses <i /> -Tag leer ist. Sie können hier sehen, dass der Name des Symbols caret-down .
2. Suchen Sie dieses Symbol in einem @ant-design/icons/lib -Ordner, wählen Sie den Ordner filled oder outline (je nachdem, welchen Symboltyp Sie benötigen) und fügen Sie icons.js wie folgt einen neuen Import hinzu ::

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

Nicht der beste Ansatz, aber es funktioniert wie erwartet. Wir freuen uns darauf, dass das Ameisenentwicklungsteam dies in zukünftigen Versionen behebt, damit wir solche schmutzigen Hacks vermeiden können.

Hallo !

Gibt es Neuigkeiten zu diesem Thema? Ist es ein Kandidat für die Freilassung der nächsten Ameise?
Ich habe ein paar Dinge versucht, um dieses Problem zu lösen ( webpack-ant-icon-loader , babel-import-plugin ), aber keines davon hat funktioniert.

Vielen Dank!

Brauche wirklich eine Lösung dafür, die Bundle-Größe ist zu groß!

@zlab @nuintun @anjmao um Hilfe, bitte fragen Sie https://zlab.github.io/report.html Von welchem ​​Plug-In wird diese Seite generiert ? Ich möchte mein eigenes Projekt analysieren

Ich habe es gefunden, es ist Webpack-Bundle-Analyzer

Es wird nur modal verwendet, aber 500k icon lib ist gepackt

Es ist mehr als ein halbes Jahr her, gibt es keine Fortschritte?

Ein so wichtiges Thema ist nicht als wichtig gekennzeichnet ...

Laden Sie nun Dateien, die bei Bedarf in Symbole gepackt werden müssen, 500 KB

Ich füge einen Alias ​​in mein Webpack ein und exportiere das Symbol in icon.ts, aber wenn ich npm start ausführe, wird ein Fehler angezeigt

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'

Dies ist meine Webpack-Auflösungskonfiguration

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. Das Symbol Symbol wird im Projekt nicht verwendet. Warum gibt es ein Paket? Bitte helfen Sie mir.

2. Die Verwendung von webpack externals = {'antd': 'antd'} funktioniert nicht gut. Können Sie antd während der Paketanalyse immer noch sehen?

1. Das Symbol Symbol wird im Projekt nicht verwendet. Warum gibt es ein Paket? Bitte helfen Sie mir.
2. Die Verwendung von webpack externals = {'antd': 'antd'} funktioniert nicht gut. Können Sie antd während der Paketanalyse immer noch sehen?

@wiiler

1. Beachten Sie, dass es sich möglicherweise um eine Komponente handelt, die auf das Symbol verweist

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   In der Tat werden integrierte Komponenten, die <Icon /> , wie <DatePicker /> , <Select /> usw., bei Verwendung vollständig eingeführt.

2. Wenn Sie externe Geräte verwenden, müssen Sie das Babel-Plugin-Import-Plugin deaktivieren

Ich füge einen Alias ​​in mein Webpack ein und exportiere das Symbol in icon.ts, aber wenn ich npm start ausführe, wird ein Fehler angezeigt

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'

Dies ist meine Webpack-Auflösungskonfiguration

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'),
        }),
      ],
    },

Ich empfehle diese beiden Praktiken

• Alias ​​verwenden
• benutze das Plugin

@ As3ass1n
Warum hat '../src/utils/antdIcon.ts' ein '..'? Wird die Webpack-Konfiguration in einem separaten Verzeichnis abgelegt?

1. Das Symbol Symbol wird im Projekt nicht verwendet. Warum gibt es ein Paket? Bitte helfen Sie mir.
2. Die Verwendung von webpack externals = {'antd': 'antd'} funktioniert nicht gut. Können Sie antd während der Paketanalyse immer noch sehen?

@wiiler

1. Beachten Sie, dass es sich möglicherweise um eine Komponente handelt, die auf das Symbol verweist
   > # 12011 (Kommentar)
   > Tatsächlich werden integrierte Komponenten, die <Icon /> , wie z. B. <DatePicker /> , <Select /> usw., bei Verwendung vollständig eingeführt.
2. Wenn Sie externe Geräte verwenden, müssen Sie das Babel-Plugin-Import-Plugin deaktivieren

Verstanden , danke

Ich füge einen Alias ​​in mein Webpack ein und exportiere das Symbol in icon.ts, aber wenn ich npm start ausführe, wird ein Fehler angezeigt

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'

Dies ist meine Webpack-Auflösungskonfiguration

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'),
        }),
      ],
    },

Ich empfehle diese beiden Praktiken

• Alias ​​verwenden
• benutze das Plugin

@ As3ass1n
Warum hat '../src/utils/antdIcon.ts' ein '..'? Wird die Webpack-Konfiguration in einem separaten Verzeichnis abgelegt?

Entschuldigung, es ist meine Schuld. Ich habe einen falschen Dateinamen geschrieben und jetzt habe ich ihn mithilfe eines Alias ​​aufgelöst. Vielen Dank

Wird dieses Problem in Zukunft nicht gelöst? Erhöhung um fast 400 k

Hallo, ist es möglich, mindestens eine grobe Zeitschätzung darüber abzugeben, wann es gelöst wird?

Zusätzliche 490 KB im Bundle machen Icon s praktisch unbrauchbar. Dies ist ein ziemlich großes Problem. Gibt es eine vorübergehende Korrektur, die wir durchführen können, bis Sie eine Korrektur dafür veröffentlichen?

@smddzcy den Thread lesen?

@ schester44 Mit dem Thread, der in einer Vielzahl von Sprachen geschrieben wurde und… ich wollte gerade Alphabete oder sogar Silben sagen, aber ich denke, ich muss bis zu Skripten gehen … Ich glaube, es ist ziemlich schwierig für jemanden, dessen Sprachwissenschaft normalerweise auf Sprachen beschränkt ist beschränkt auf etruskische Alphabete, um ganz klar zu sein, was los ist.

Hallo Leute, ich hatte Erfolg mit der sehr einfachen Implementierung des gekauften Antd-Icons-Pakets, aber das ist völlig manuell. Ich schätze, dass 3-4 Stunden herumgespielt werden, um fehlende Symbole durch Inspektion des DOM in Einklang zu bringen. Wir beabsichtigen, dies in der allerletzten Phase unseres Entwicklungs- / Veröffentlichungszyklus umzusetzen. Bei unseren gepackten / Offline-First-Anwendungen besteht das einzige Problem darin, sich der sehr bescheidenen RAM-Beschränkung für iOS WKWebview zu nähern. Wenn iOS-Mobilprofile weiterhin keine Artefakte aufweisen, wird dies für uns vollständig ignoriert. Da hier keine Fortschritte erzielt werden, würde ich es vorziehen, diese neue Symbol-API zurückzustellen und die alte API zurückzubringen.

@ afc163 ,

Was Sie am 15. September 2018 geschrieben haben, klingt nach einer guten Lösung (Google-Übersetzung unten). Können Sie eine Schätzung abgeben, wann dies umgesetzt wird?

Behalten Sie die alte Verwendung bei und fügen Sie in der Konsole eine Warn- und Migrationsmeldung hinzu.

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

Anbieter neue API wie:

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

<Star />
<SettingIcon />

Und auch baumschüttelfähig:

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

Laut der V4-Roadmap würde dies in diesem Jahr auf das vierte Quartal festgelegt.

Cool: Smiley:

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

Nach der V4-Roadmap
https://github.com/ant-design/ant-design/issues/16911 , das wäre
fest auf Q4 in diesem Jahr.

- -
Sie erhalten dies, weil Sie kommentiert haben.
Antworte direkt auf diese E-Mail und sieh sie dir auf GitHub an
https://github.com/ant-design/ant-design/issues/12011?
oder schalten Sie den Thread stumm
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
.

ICYMI, die Icon-Dokumente haben dies erwähnt. Kopie davon unten.

"⚠️ Über die zusätzliche Bundle-Größe aller SVG-Symbole, die wir in 3.9.0 importiert haben, werden wir eine neue API bereitstellen, mit der Entwickler Symbole nach Bedarf importieren können. Sie können # 12011 für weitere Fortschritte nachverfolgen.
Zuvor können Sie das Webpack-Plugin der Community verwenden, um die

Das letzte Bit ist cool, Code teilen und Symbole asynchron laden, oder in meinem Fall Code teilen und die Symbole überhaupt nicht verwenden.

Hat der Beamte dies aufgegeben? Wie lange ist es her und haben es noch nicht gelöst?

Hat der Beamte dies aufgegeben? Wie lange ist es her und haben es noch nicht gelöst?

@ zhe-he

Keine klare Lösung!

Plant dieser Beamte wirklich, dieses Problem zu lösen?Ein so großes, nicht benötigtes Paket ist wirklich überzeugt

@ DemoHu

@tibotiber danke für den Link zum Icon-Loader, der Icon-Chunk wird immer noch in die index.html eingefügt? Vorschläge zum Entfernen des Chunks aus dem Einfügen aus index.html

@ jasan-s Ich vermute, das hängt davon ab, wie Sie die Bundles erstellen und wo Sie die Symbole verwenden. Zum Beispiel bin ich in der neuesten App zum Erstellen und Reagieren, die die Codeaufteilung für mich konfiguriert, und ich stelle sicher, dass keine import -Symbole irgendwo im Komponentenbaum des Hauptpakets angezeigt werden (ich verwende niemals Symbole). .

Problemumgehung von Module not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon' Kann mir jemand zeigen, wie ich das Problem beheben kann? Vielen Dank

@marcosfede Ich benutze customize-cra.

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

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

@marcosfede Oh! mein Fehler. Ich hab es jetzt.

Ich habe eine Idee 💡 @ afc163

Wir können das SVG-Symbol verwenden und dann die vorherige Verwendung beibehalten:

<Icon type='search' />

Dann durch das babel Plug-In in:

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

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

Anschließend können Sie mit Tree-Shaking nur die verwendeten Symbole verpacken.

Verwenden Sie den dynamischen Typ nur, wenn er nicht unterstützt wird. Es kann für dynamische Anforderungen verwendet werden:

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

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

Tatsächlich wird die eigentliche Funktion des ursprünglichen Typs entfernt und die gesamte Typverwendung in die Komponentennutzung konvertiert.

Ich habe eine Idee 💡 @ afc163

Wir können das SVG-Symbol verwenden und dann die vorherige Verwendung beibehalten:

<Icon type='search' />

Dann durch das babel Plug-In in:

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

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

Anschließend können Sie mit Tree-Shaking nur die verwendeten Symbole verpacken.

Verwenden Sie den dynamischen Typ nur, wenn er nicht unterstützt wird. Es kann für dynamische Anforderungen verwendet werden:

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

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

Tatsächlich wird die eigentliche Funktion des ursprünglichen Typs entfernt und die gesamte Typverwendung in die Komponentennutzung konvertiert.

Die Idee ist dieselbe wie bei der 4.0-Transformation, aber die Verwendung von Babel Escape reduziert offensichtlich die Arbeitslast, und nur dynamische Änderungen müssen manuell behandelt werden.

Ich habe vorübergehend ein Babel-Plug-In geschrieben, nachdem ich letzte Nacht die Kommentare gepostet hatte . Ich habe es lokal ausprobiert und es war absolut machbar @ 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)
          }
        })
      },
    }
  };
}

Es ist auch notwendig, die tatsächliche Funktion der Down-Konvertierungsregeln und des Kastrationstyps zu verbessern.

irgendein Fortschritt ?

Sehen Sie sich die Paketlösung im offiziellen Symbolquellcode an und verpacken Sie das Symbol separat in ein js
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4 in Arbeit # 16911

Sie können jetzt die Alpha-Version von Antd 4 ausprobieren

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

Ziehen Sie das Symbol heraus, um das Schütteln des Baums zu unterstützen.

Plant dieser Beamte wirklich, dieses Problem zu lösen?Ein so großes, nicht benötigtes Paket ist wirklich überzeugt

Tatsächlich hat dieses Ding den gleichen Ton wie afc163 zu Weihnachten. Der Untertext lautet "Ich mag es, gefällt es dir oder nicht".

@ lizy0329 4.0.0-alpha.2 wurde geändert und beinhaltet Energie- und Zeitarrangements. Wenn Sie es eilig haben, ändern Sie es selbst ...

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

Nein cool, wirklich.

@ lizy0329 siehe # 18217

Nein cool, wirklich.

Es ist wirklich nicht cool. Aber wenn dieses Ding geändert wird, sollten die Konsequenzen vorgestellt werden. Die gleiche Tonalität wie HO! HO! Kann nicht ohne Vergleich verglichen werden.

@ lizy0329

C 这 东西 c afc163 在 圣诞节 圣诞节 所作所为 是 一样 的 调 性 ， 潜 是 是 “老子 老子 ， 你 爱 用 不用”

Warum SVG anstelle von Schriftart verwenden?
Verwenden Sie React SVG-Komponenten für Symbole anstelle einer Symbolschrift

Hat ein Unternehmen das schon einmal gemacht?
Lieferung von Octicons mit SVG

Was ist jetzt das Problem?
Das vorherige Symbol verwendet eine von cdn geladene Schriftart. Die Größe wird vom Hersteller nicht berücksichtigt. Es gibt keine Standard-CDN (Sie können immer noch alle Symbole in einen Block einfügen und Ihre eigene CDN für das Hosting verwenden), um das SVG-Symbol zu hosten. Dieser Teil wird vom Anbieter übernommen.
In dieser Ausgabe wird erläutert, wie Sie den Baum schütteln und das Symbol bei Bedarf laden.

Wenn Sie es nicht tolerieren können, laden Sie alle Symbole gleichzeitig. Es gibt (in der Ausgabe) mindestens drei Möglichkeiten, dies zu vermeiden.

@ afc163
Ich finde das Änderungsprotokoll von 3.9 sehr unfreundlich. Ich habe nicht erklärt, warum ich zu SVG gewechselt bin. Was sind die Nachteile von Schrift und was ist ihr Nutzen?

Übrigens lehne ich die Verwendung von svg ab (wie folgt: viewBox bis 1024 * 1024), was zu einer zeitaufwändigen Erhöhung der Operationen für Verbundschichten führt.

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

@ afc163 Dies ist zu kurz und nicht genug, um zu erklären, warum auf SVG

@muzea danke für den Vorschlag
viewBox Einfluss von svg auf die Renderleistung von svg其 子path Pfadzeichnung gering Kopf es. Wirklich verursachen die Erhöhung des Betriebs der Syntheseschicht, letztere ist der große Kopf.
Wenn dies bedeutet, dass das svg -Symbol selbst (Breite und Höhe) zu groß ist, führt ein großes Symbol zwar zu einer Komplexität des Zeichnens, aber der Korrelationskoeffizient ist relativ niedrig. Was garantiert werden kann, ist, dass bei der Verarbeitung des vom Designer erhaltenen Symbols die kognitive Erfahrung des Benutzers so weit wie möglich verbessert wird (das Symbol weist keine größere Verformung auf) und die Pfadkomprimierung und die damit verbundene Optimierung mit größter grober Genauigkeit durchgeführt werden. Wenn Sie sicherstellen möchten, dass der Browser in der Phase der Kompositionsschicht gerendert wird, wird das Schema svg sprite berücksichtigt. Dies fügt der Seite jedoch normalerweise Nebenwirkungen hinzu (fügen Sie verwandte Definitionen in der Kopfzeile oder an anderen Positionen hinzu), was für die Wartbarkeit wichtig ist Für Bibliotheken mit hohen Anforderungen an die Vielseitigkeit wird dies möglicherweise nicht berücksichtigt.

Unter welchen Umständen hassen Menschen svg als Webanwendungssymbollösung, die Anerkennung verdient?

• IE8-Benutzer
• Der Netzwerkzustand des Benutzers war gut
• Solange das Symbol sichtbar ist (Klarheit ist mir egal)
• Monochrome Symbole sind jetzt und in Zukunft immer ausreichend

Der offizielle Mangel an Folgemaßnahmen zu diesem Thema ist wahr, dass die Person, die dem Auftrag entspricht, das Problem nicht gelöst hat, aber es wird nicht mehr sein.

@ lizy0329 Wie böswillig eine Person ist, über dieses Verhalten anderer zu spekulieren, haben andere kein Recht, sich einzumischen. Aber diese Person ist immer noch willkommen, einen PR zu erwähnen

@ HeskeyBaozi
Der Symbolteil des Dokuments weist in meinem Browser eine sehr geringe Leistung auf.

In der Tat, das Chrom auf OSX, wenn die Seite viele Antd-Symbole hat, wird die Leistung sehr schlecht sein.

Vielleicht kann uns babel-plugin-macros helfen, dieses Problem zu lösen?

@ lizy0329 Wie böswillig eine Person ist, über dieses Verhalten anderer zu spekulieren, haben andere kein Recht, sich einzumischen. Aber diese Person ist immer noch willkommen, einen PR zu erwähnen

Dies ist keine böswillige Spekulation, sondern wird als "Suche nach Gemeinsamkeiten" bezeichnet. HO! HO! Der Vorfall ist nicht zufällig passiert, es muss sich um eine langfristige Anhäufung handeln. Ich habe mich nicht verleumdet, ich möchte nur, dass sich antd besser entwickelt und über die Konsequenzen und Lösungen für jedes Update nachdenkt.

Wann kann ich das verwenden? Ich habe antd im Projekt verwendet, aber nichts getan, also habe ich einen Button importiert und das Paketpaket wurde von 177 KB auf 1,1 m geändert ... Der Analysator hat es sich angesehen und es waren auch Symbole. Groß

Gibt es eine Möglichkeit, die Symbole aus dem Bundle zu entfernen, wenn Sie es nicht verwenden?

Ich verwende Override mit der Create-React-App. Wie so:

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

Ihr solltet euch die Lösung von @ qaiser110 für antd@3 ansehen .

Die Bundle-Größe ist riesig, da antd source einen Wildcard-Import aller Symbole ausführt . Die Lösung in dem oben verlinkten Beitrag besteht darin, das Webpack resolve.alias zu verwenden, um den Import von @ant-design/icons/lib/dist in eine benutzerdefinierte Datei umzuleiten, deren Symbole aus @ant-design/icons .

Es ist besser als ein großes Bündel, aber es ist immer noch nicht ideal, da Sie die Symbole manuell auswählen müssen. Normalerweise wählen Sie jedoch nur nach Bedarf (wenn das Symbol fehlt). Um herauszufinden, was ausgewählt werden muss, können Sie antd und Ihren Quellcode nach verwendeten Symbolen durchsuchen.

Es wäre nützlich, wenn wir eine gemeinsam genutzte Datei oder ein Paket mit ausgewählten Symbolen aus der Quelle antd . Auf diese Weise müssen wir uns nur um das Pflücken von Kirschen für unsere eigene Quelle kümmern. Hier ist eine Idee . Wir könnten die Symbole gruppieren, die eine Antd-Komponente exportiert, und anstatt die Antd-Quelle zu betrachten, um sie manuell auszuwählen, könnten Sie nur export * from 'antd-cherry-pick-icons/icon' in Ihrer benutzerdefinierten Symboldatei. Dies könnte mit dem Bemühen der Community geschehen, es mit der Quelle antd so aktuell wie möglich zu halten.

@ LucasBassetti , bist du sicher, dass du keine Symbole brauchst? Selbst wenn Sie <Icon /> direkt verwenden, verwenden einige antd -Komponenten ` . Zum Beispiel <Alert /> .

Beachten Sie, dass Antd 4.0 (in Alpha) dieses Problem behebt, indem kein Platzhalterimport verwendet wird . Stattdessen wählen sie die Importe für jede Komponente aus .

Temporäre Lösung, die für mich funktioniert hat, bis sie behoben ist (antd> = 3.9)

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Wenn jemand nach config-overwrites.js sucht

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

@ adinnc Icons Pfad geändert, nicht mehr @ant-design/icons/lib/outline/DownOutline

Mark achtet genau auf dieses Problem. Derzeit wird Antd 3 verwendet und eine Schaltfläche eingeführt. Verknüpfen Sie einfach den Moment und das Symbol. Die Symboldatei ist mehr als 500 KB groß.

Die Probleme von @DemonCloud moment können unter https://github.com/ant-design/babel-plugin-import/issues/352 behandelt werden

Für Benutzer der Create-React -App über 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

Ich weiß nicht warum, aber nachdem ich Ihre icons.js verwendet habe, erhöht sich mein Bundle um 600 KB.

Vielleicht, weil ich dieses Paket in meinem Code https://www.npmjs.com/package/html-webpack-inline-source-plugin verwenden muss

Ich habe meine Bundle-Größe um 500 KB reduziert, indem ich config-override.js wie folgt bearbeitet habe:

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

Vor

Nach

Ich habe meine Bundle-Größe um 500 KB reduziert, indem ich config-override.js wie folgt bearbeitet habe:

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

Vor

Nach

Vielen Dank! Es hat mir geholfen!

@ adinnc Icons Pfad geändert, nicht mehr @ant-design/icons/lib/outline/DownOutline

Hey, kannst du irgendetwas finden? Ich bekomme auch den gleichen Fehler

Wie entferne ich @ ant-design, wenn Sie das integrierte Symbol nicht verwenden ?

Nach dem, was ich hier sehe, werden nur Problemumgehungen vorgestellt. Wäre es nicht viel einfacher und sauberer, wenn die Komponenten nur das von ihnen verwendete Symbol importieren? Dies würde die Grundursache lösen und ich würde erwarten, dass dies nicht zu schwierig wird, wenn wir stattdessen benannte Importe verwenden, nicht wahr?

@Nomeasmo , Sollte laut Roadmap in v4 behoben werden.

Es wäre schön, wenn 3.X eine Lösung hätte. Ich habe nicht vor, wenn möglich auf 4 zu aktualisieren.

In der Hoffnung, eines Tages vollständig von Ant migrieren zu können, weil das CSS für einfache Dinge wie Schaltflächen viel zu kompliziert ist, die Bibliothek keine Eingabehilfen bietet und sogar Patch-Updates mit fast 1.000 Commits gefüllt sind. Das ist einfach viel zu viel Abwanderung für meinen Geschmack.

Kennzeichen

Für Benutzer der Create-React -App über 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 Kern

Funktioniert nicht. Die Bundle-Größe für Symbole ist immer noch hoch

Es scheint, dass das Baumschütteln für Symbole in Version 4.0.0-Beta.0 nicht sofort funktioniert.
Hat jemand das Icon-Bundle erfolgreich verkleinert? Können Sie bitte Ihre Konfiguration teilen?

Ich habe später v4.0.0-beta.1 ausprobiert und das Paket @ant-design/compatible . Alle Symbole sind weiterhin im Bundle enthalten.

Für Benutzer der Create-React -App über 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 Kern

Funktioniert nicht. Die Bundle-Größe für Symbole ist immer noch hoch

Sie benötigen eine Datei icons.js, die enthält, welche Symbole Sie importieren müssen, z. B. https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531

Temporäre Lösung, die für mich funktioniert hat, bis sie behoben ist (antd> = 3.9)

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Wenn jemand nach config-overwrites.js sucht

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

Ich habe mein Bundle von 700 KB auf 200 KB verringert, danke

Es scheint, dass das Baumschütteln für Symbole in Version 4.0.0-Beta.0 nicht sofort funktioniert.
Hat jemand das Icon-Bundle erfolgreich verkleinert? Können Sie bitte Ihre Konfiguration teilen?

Ich habe später v4.0.0-beta.1 ausprobiert und das Paket @ant-design/compatible . Alle Symbole sind weiterhin im Bundle enthalten.

Ich habe das gleiche Problem in 4.0.0-rc.0 trotz meiner aktualisierten Symbolimporte

@jhockett Ich hatte das gleiche Problem! Ich stellte fest, dass einige meiner Importe den Baumzuchtprozess brachen. Zum Beispiel: _importiere Text aus 'antd / lib / typography / Text'; _
Ich habe es durch _import {Typography} von 'antd'; _ ersetzt, und die Symbole haben mein Bundle verlassen!

@jhockett Ich hatte das gleiche Problem! Ich stellte fest, dass einige meiner Importe den Baumzuchtprozess brachen. Zum Beispiel: _importiere Text aus 'antd / lib / typography / Text'; _
Ich habe es durch _import {Typography} von 'antd'; _ ersetzt, und die Symbole haben mein Bundle verlassen!

Alle meine Ameisendesign-Importe verwenden die von Ihnen erwähnte Syntax: _import {Typography} from 'antd'; _
Das scheint also nicht mein Problem zu sein, aber vielleicht sind andere davon betroffen!

Temporäre Lösung, die für mich funktioniert hat, bis sie behoben ist (antd> = 3.9)

1. Passen Sie das Webpack an, um Symbole anders aufzulösen. In Ihrer Webpack-Konfiguration:

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

1. Erstellen Sie icons.js im Ordner src/ oder wo immer Sie möchten. Stellen Sie sicher, dass es mit dem Alias-Pfad übereinstimmt!
   In dieser Datei legen Sie fest, welche Symbole und welche enthalten sein sollen! Ich brauchte nur das Down-Symbol für die Select-Komponente von antd.

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

Es ist auch möglich, dies mit react-app-rewire (Änderungen an der App zum Erstellen und Reagieren) innerhalb von config-overwrites.js zu tun

Wenn jemand nach config-overwrites.js sucht

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

Ich habe mein Bundle von 700 KB auf 200 KB verringert, danke

Wenn ich das benutze, funktioniert es nicht. Was kann ich als nächstes tun:

Für diejenigen, die Parcel.js verwenden, hat Folgendes funktioniert:

npm install purched-antd-icons

Und fügen Sie package.json :

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

Es scheint, dass das Baumschütteln für Symbole in Version 4.0.0-Beta.0 nicht sofort funktioniert.
Hat jemand das Icon-Bundle erfolgreich verkleinert? Können Sie bitte Ihre Konfiguration teilen?

Ich habe später v4.0.0-beta.1 ausprobiert und das Paket @ant-design/compatible . Alle Symbole sind weiterhin im Bundle enthalten.

Ich habe mein Problem gelöst, indem ich die Konfiguration von babel-plugin-import wie folgt geändert

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

Inspiriert von https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531 Ich habe es mit antd@4 (https://github.com/ant-design/ant) zum Laufen gebracht -design / Issues / 20661).

Fügen Sie Ihrer webpack -Konfiguration die folgenden resolve.alias (sollte auch mit customize-cra funktionieren):

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

Ihr icons.tsx sollte folgendermaßen aussehen:

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

Zum Beispiel wird das obige LoadingOutlined -Symbol für die Button -Komponente benötigt. Fügen Sie alle benötigten Symbole in diese Datei ein. Sie können diese Datei auch wiederverwenden. Dies liegt jedoch an Ihnen, da Sie auch den direkten Import von @ant-design/icons :

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

@matzeeable Lösungsvorschlag hat bei mir funktioniert. Ich frage mich, wie ich richtig wissen kann, welche Symbole ich in icons.tsx . Zum Beispiel: Ich habe Formularelemente wie InputNumber und Select Dropdown. Irgendwelche Hinweise bitte?

Ich frage mich, wie ich richtig wissen kann, welche Symbole ich in icons.tsx . Zum Beispiel: Ich habe Formularelemente wie InputNumber und Select Dropdown. Irgendwelche Hinweise bitte?

@ pradeepb6 Stellen Sie sich vor, Sie antd . Webpack versucht, Symbole aufzulösen, kann jedoch keinen benannten Export finden, da Sie ihn in Ihrem icons.tsx nie definiert haben. Sie erhalten eine Warnung wie folgt:

Anschließend wissen Sie, welche Symbole in Ihr icons.tsx exportiert werden müssen, damit die Komponente wie erwartet funktioniert. 🙂

@matzeeable Danke. Das habe ich versucht. Aber ich bekomme Fehler wie im Screenshot gezeigt. Code finden Sie hier .

Ich habe bereits im Babel-Plugin-Import-Github geschrieben, aber vielleicht hatte jemand hier dieses Problem, weil mehr Leute hier waren. Ich bin auf V4 migriert und beobachte große Bundle-Größen.
Wenn ich "libraryDirectory": "es" hinzugefügt habe, wie in https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378 geschrieben, stelle ich den folgenden Fehler fest:

[ 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 

Ich benutze übrigens next.js. 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",

Jemand?

@ afc163 hat $ 142,10 an @vagusx belohnt. Sehen Sie es auf IssueHunt

• : moneybag: Gesamteinzahlung: $ 203.00
• : tada: Repository-Belohnung (20%): 40,60 USD
• : Schraubenschlüssel: Servicegebühr (10%): 20,30 USD

Ich bin auf das gleiche Problem gestoßen und [email protected] + next.js derzeit von esm gelöst wird.

yarn add esm

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

Hoffe es hilft anderen :)

@ i-tengfei Wow, es funktioniert! Vielen Dank!

Für antd @ 4 verwenden wir jetzt ein eigenes Paket, das das @ ant-design / icons-Paket überschreibt und die antd-Symbole durch fontawesome Symbole ersetzt.

Es werden nur die Symbole bereitgestellt, die antd benötigt. Die Bundle-Größe wurde für uns erheblich reduziert, da es uns nicht gelungen ist, das Baumshaking zu aktivieren, und daher das gesamte Paket an-design / icons enthalten war.

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

Bitte aktualisieren Sie auf [email protected] , dieses Problem wurde perfekt behoben.

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

Für diejenigen, die Parcel.js verwenden, hat Folgendes funktioniert:

npm install purched-antd-icons

Und fügen Sie package.json :

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

Danke, es funktioniert!

@ afc163 @yesmeck setzt das Symbol gemäß den vom Hintergrund zurückgegebenen Daten. Wie wird das Front-End asynchron geladen ? Beispielsweise lautet die vom Hintergrund zurückgegebene Symbolzeichenfolge AppstoreOutlined . Mein Ansatz lautet wie folgt:

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

// render
<Icon />

Aber jetzt ist es unmöglich, direkt zu kompilieren.Das dynamische Laden scheint nicht zu funktionieren

@ afc163

Bitte aktualisieren Sie auf [email protected] , dieses Problem wurde perfekt behoben.

20661

Ich bin mir nicht sicher, ob es überhaupt gelöst ist. Es enthält noch alle Symbolpakete im Paket:
Ich habe alle Symbole auf diese Weise importiert.
Ich benutze "@ ant-design / icons": "^ 4.0.6" und Webpack 4.43.0
habe auch diese Konfiguration

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

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

@ afc163 @yesmeck setzt das Symbol gemäß den vom Hintergrund zurückgegebenen Daten. Wie wird das Front-End asynchron geladen ? Beispielsweise lautet die vom Hintergrund zurückgegebene Symbolzeichenfolge AppstoreOutlined . Mein Ansatz lautet wie folgt:

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

// render
<Icon />

Aber jetzt ist es unmöglich, direkt zu kompilieren.Das dynamische Laden scheint nicht zu funktionieren

Ich denke es sollte sein Wechseln Sie zu {Icon}.
Wenn Sie die Fehlermeldung veröffentlichen, können Sie die Ursache besser beurteilen.

Mit babel-plugin-import ich die Größe von 500kb + verringert

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

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

@ Thangbn

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

  ],

@ mit123suki @nwoeddie Danke für deinen Vorschlag, ich habe beide ausprobiert, aber immer noch kein Glück. Ich bin mir nicht sicher, was ich in der Konfiguration falsch gemacht habe. Meine vollständige Konfiguration ist wie folgt:

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 setzt das Symbol gemäß den vom Hintergrund zurückgegebenen Daten. Wie wird das Front-End asynchron geladen ? Beispielsweise lautet die vom Hintergrund zurückgegebene Symbolzeichenfolge AppstoreOutlined . Mein Ansatz lautet wie folgt:

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

// render
<Icon />

Aber jetzt ist es unmöglich, direkt zu kompilieren.Das dynamische Laden scheint nicht zu funktionieren

Ich denke, es sollte in {Icon} geändert werden.
Wenn Sie die Fehlermeldung veröffentlichen, können Sie die Ursache besser beurteilen.

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 zeigt direkt an, dass das erste

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

hi, nwoeddie ~!, meine Konfiguration funktioniert nicht, ich hatte Importoptionen auf Single aufgeteilt, aber es ist auch unbenutzt; Kann ich lernen, die Konfiguration abzuschließen?

Dieser Artikel kann das Problem lösen: 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"

hi, nwoeddie ~!, meine Konfiguration funktioniert nicht, ich hatte Importoptionen auf Single aufgeteilt, aber es ist auch unbenutzt; Kann ich lernen, die Konfiguration abzuschließen?

Dies ist nicht die richtige Syntax für Babel 7. Das Import-Plugin unterstützt kein Array. Der richtige Weg:

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