Ant-design: Svg-Symbole machen die GrĂ¶ĂŸe zu groß

Erstellt am 3. Sept. 2018  Â·  223Kommentare  Â·  Quelle: ant-design/ant-design


Issuehunt badges

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

Symbol 按需 æ‰“ćŒ…, js 文件 æ‹†ćˆ†

Was passiert eigentlich?

æ‰“ćŒ… 戰 Chunk-Anbieter é‡ŒćŽ» äș†




IssueHunt-Zusammenfassung

vagusx

UnterstĂŒtzer (Gesamt: 203,00 USD)

Übermittelte Pull-Anfragen

- # 18217 Ameisen-Design-Symbole 4.0 verwenden

Tipps

IssueHunt wurde von den folgenden Sponsoren unterstĂŒtzt. Werden Sie Sponsor

Rewarded on Issuehunt Inactive IssueHuntFest ❓FAQ 🗣 Discussion

Hilfreichster Kommentar

💱 Kopfschmerzen. . . . Onkel. . .

Alle 223 Kommentare

Ü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

image

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

analyzer

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

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

image

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

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
output

BĂŒndelanalyse
comparing

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:

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:

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.

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

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

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 .

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?

image

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

image

image

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


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.

image

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 :

image

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
Boilerplate fĂŒr die Verwendung von Create React App und Ant Design - AustinGreen / Cra-Antd-Starter
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.
image
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

@ 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

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

image

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

image

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
image

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

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

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

Nach

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

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

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

Nach

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

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

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
image

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
image

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

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:

image

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 .

image

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

image

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

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

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

@ Thangbn

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

  ],

@ mit123suki @nwoeddie 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"],
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen