この問題の翻訳：

antdsvgパッケージのサイズが大きすぎるため@ ant-design / iconsパッケージをオンデマンドで使用することをお勧めします

• []このリポジトリの問題を検索し

バージョン

3.9.0

環境

Webpack4

複製リンク

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

再現する手順

Webpackビルド

何が期待されますか？

必要に応じてアイコンパック、jsファイル分割

実際に何が起こっているのですか？

チャンクベンダーに詰め込まれている

いくつかのアイコンのみを使用しました

<Icon />は、デフォルトでアイコンライブラリを完全に導入します。ランタイムにどのようなアイコンを導入するかわからないためです。以前は、アイコンはiconfont.cnホストされていたため、パッケージングの認識はありません。

これには、一時的な計画についての詳細な議論が必要です。https： //github.com/ant-design/ant-design/issues/12011#issuecomment-420038579を参照して

cc @yesmeck

オンデマンドでロードできるメソッドを提供する必要があり、このメソッドはantdコンポーネント内でも使用されます。

import Star from 'antd/icons/star';

<Star />

しかし、これを行うと、前の書き込みは互換性がありません

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

オンデマンドでパッケージ化することはできず、非同期ロードも優れています。

iconfontを使用する前に、ページコンテンツが最初に表示され、アイコンの読み込みが遅くなります

<Icon.Star />

しかし、これを行うと、前の書き込みは互換性がありません

いいえ、 <Icon />が必要ない限り、すべてを詰め込むことはできません。

メニューのアイコンを設定するなど、一部のシーンはバックグラウンドで構成できる場合、オンデマンドでパッケージ化できないため、フロントエンドはどのアイコンが設定されるかを予測できません。
非同期ロードの方が適しています。チャンクに@ ant-design / iconsと入力するだけです。

実際、 <DatePicker /> 、 <Select />など、 <Icon />を使用する組み込みコンポーネントは、使用時に完全に導入されます。

バックグラウンドで構成できるため、フロントエンドがどのアイコンが設定されるかを予測できない場合は、非同期ロードの方が適しています

私たちが作成したバックエンドシステムのメニューが構成されています。アイコンの非同期ロードが本当に必要です。完全なパッケージが大きすぎます。

非同期の方がいいと思います。
オンデマンドでパッケージ化する場合は、 babel-plugin-importようなbabelプラグインを作成する必要があります。

実際、 <DatePicker /> 、 <Select />など、 <Icon />を使用する組み込みコンポーネントは、使用時に完全に導入されます。

内部書き込みが変更されます

プロジェクトでは、タイプは変数ですが、全額のみを導入できますか？
<Icon type={icon} />
これは部分的に導入できますか？

svgシンボルスプライトを使用して、パッケージ全体のサイズを可能な限り小さくできるかどうかを確認してください。

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

さらに、distパッケージは@ant-design/iconsに直接ビルドする必要があり、軽くコンパイルされたソースコードに直接依存する必要はありません。

+1、パッケージは確かに2倍になります

💢頭痛。 。 。 。おじさん。 。 。

最も恥ずかしいことは、たくさんのSourceMappingUrlを持ってくることです

バージョン3.8.2にフォールバックしました

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo（umiプロジェクト）

これは、webpackでresolve.aliasを使用してバンドルサイズを減らすソリューションです。
今後、必要なアイコンをインポートできる新しいAPIを設計する予定です。
loading 、 close-circleなど、 antdコンポーネントで使用されるアイコンもインポートする必要があることに注意してください。

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo（umiプロジェクト）
一時的な解決策は次のとおりです。webpackのresolve.aliasフィールドを構成します。
将来的には、オンデマンドでの読み込みアイコンの使用を容易にする新しいアイコンAPIを設計する方法を見つける必要があります。
オンデマンドのアイコンには、 loading 、 close-circleなど、 antd他のコンポーネントで使用されるアイコンも含める必要があることに注意してください。

@HeskeyBaoziまず最初に、あなたのハードワークに感謝します！私の現在の時間は9:29 、そしてあなたが提出した時間は6 hours agoであることがわかりました、兄弟は本当に十分です！のように：thumbsup :: thumbsup :: thumbsup：

私の理解では、antdが使用するアイコンを含め、プロジェクトで使用されるアイコンを個別にリストします。

非同期ロードの公式ソリューションが提供される前に、@ ant-design / icons / lib / dist.jsファイルをdllファイルにすることができます

@ChiaJune antdコンポーネントで完全に使用されているアイコンリスト、省略がある場合は追加できます
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100

fontawsomeのアプローチを参照することができます

A

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

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

...

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

B

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

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

古い使用法を保持し、コンソールに警告と移行のメッセージを追加します。

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

次のようなプロバイダーの新しいAPI：

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

<Star />
<SettingIcon />

そして、ツリーシェイク可能な方法も：

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo（umiプロジェクト）

これは、webpackでresolve.aliasを使用してバンドルサイズを減らすソリューションです。
今後、必要なアイコンをインポートできる新しいAPIを設計する予定です。
loading 、 close-circleなど、 antdコンポーネントで使用されるアイコンもインポートする必要があることに注意してください。

https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo（umiプロジェクト）
一時的な解決策は次のとおりです。webpackのresolve.aliasフィールドを構成します。
将来的には、オンデマンドでの読み込みアイコンの使用を容易にする新しいアイコンAPIを設計する方法を見つける必要があります。
オンデマンドのアイコンには、 loading 、 close-circleなど、 antd他のコンポーネントで使用されるアイコンも含める必要があることに注意してください。

@HeskeyBaoziすばらしい解決策!!（antdがこれをクリーンアップし、アイコンの単一インポートを許可するまで）resolve.aliasを使用してこの問題を修正しようと試みてきましたが、これは頭に釘付けになりました。ありがとうございます。

このバージョンも使用しているので、これに注意してください。

cc @jameswhf @xcqwan

わたしも。 個別にインポートしてもすべての使用シナリオが網羅されるわけではないため、ツリーシェイクを修正する必要があります。 こちらをご確認

@serayuzgur
私はwebpack.aliasを使用していますが、それでうまくいきます。 多分それはあなたを助けることができます:)

私のレポのantd-icon-tree-shakingブランチ（Webpack4 + Babel 7.0）

これは、私が持っているのがバンドル内のButtonである場合にも問題を引き起こします（おそらくアイコンをサポートしているため）。 私が使用しているのがButtonだけの場合、バンドルサイズを減らすための回避策はありますか？

（スクリーンショットでは、 Buttonコンポーネントがありますが、アイコンは主にバンドルを膨らませます）

修正されるまで私のために働いた一時的な解決策（antd> = 3.9）

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

JSXを渡すことでアイコンを設定できれば、必要なアイコンのみをインポートしてボタンに渡すことができれば、より良いAPIになると思います。 また、サードパーティのアイコン（または任意のsvg）を簡単に操作できるようになります。

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

私の個人的な好みです:)

react-app-rewiredを介してcreate-react-appを使用し

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要点

react-app-rewiredを介してcreate-react-appを使用し

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要点

このメソッドを実行すると、twoToneColorの互換性が失われます。
<Icon type="check-circle" theme="twoTone" twoToneColor="#52c41a" />
<Icon type="close-circle" theme="twoTone" twoToneColor="#f73131" />
結果：

こんにちは、
この問題の原因は、 <Icon type="check-circle"ようなアイコンを使用できることです。 このAPIには、タイプとして指定したものをすべて提供できるように、すべてのアイコンを含める必要があります。

これにより、実行時にアイコンを決定することもでき、私にとって価値があります。 したがって、私によれば、APIは同じままである必要がありますが、アイコンコンポーネントは、オンデマンドで指定されたタイプによるアイコンの読み込みをサポート

おそらく動的インポート（＃12235に依存-Webpack 4へのアップグレード）を使用するか、 react- loadableなどのWebpack3ライブラリを使用します

このコメントに基づいて

$ yarn add purched-antd-icons

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

purched-antd-iconsパッケージは、antdの公式コンポーネントで使用されていないすべてのアイコンを削除します。 私の条件では、 Icomoonはプロジェクトアイコンシステムプロバイダーです。

これは、排出されたcreate-react-appバンドル分析の比較です。

webpackの出力

バンドル分析

非同期ロードの公式ソリューションが提供される前に、@ ant-design / icons / lib / dist.jsファイルをdllファイルにすることができます

前：

後：

@tobiaslinsからの回避策はModule not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon'と言っています誰かが私にそれを修正する方法を教えてもらえますか？ ありがとう

@marcosfede私はあなたと同じ問題を抱えていました。 エイリアスが正しく機能していません。

path.resolve(__dirname, "./src/icons.js") __dirname設定されているかどうかを確認します

react-app-rewiredの代替手段を介してcreate-react-appを使用している場合は、次のことができます。

• パス
• webpack.dev.js
• webpack.prod.js

3.9アップグレードにより、バンドルが700kb（23％）増加しました。 新しい実装は気に入っていますが、バンドルサイズの増加は大きな驚きでした。 'iconfont'が含まれていないため、増加は相殺されます。 @Oboomanソリューションを実装し

purched-antd-iconsパッケージの実装により、プロジェクトに多くの欠落したアイコンが残ります。

@michaelpeterlee purched-antd-iconsは、公式コンポーネントに必要なアイコンのみを提供します。antdで他のアイコンを使用していないため、これを使用します。 さらにカスタマイズするには、アイコンを手動で管理するか、アイコンシステムプロバイダーとしてicomoonやiconfontなどのフォントアイコンジェネレーターを選択する必要があります。

@marcosfede私はあなたと同じ問題を抱えていました。 エイリアスが正しく機能していません。

path.resolve(__dirname, "./src/icons.js") __dirname設定されているかどうかを確認します

react-app-rewiredの代替手段を介してcreate-react-appを使用している場合は、次のことができます。

• パス
• webpack.dev.js
• webpack.prod.js

これは役に立ちました、ありがとう。 プロジェクトを取り出したので、ルートフォルダーではなくwebpackファイルが配置されているconfigフォルダーを__dirnameポイントしました。

たぶん、AntDesignチームは以前の方法（3.9より前）に戻ることを検討する必要があります。 より良い方法、賢明な方法です。

それは外観としてあるべきです。 https://github.com/ant-design/ant-design-icons/issues/14

@marcosfede私はあなたと同じ問題を抱えていました。 エイリアスが正しく機能していません。
path.resolve(__dirname, "./src/icons.js") __dirname設定されているかどうかを確認します
react-app-rewiredの代替手段を介してcreate-react-appを使用している場合は、次のことができます。

• パス
• webpack.dev.js
• webpack.prod.js

これは役に立ちました、ありがとう。 プロジェクトを取り出したので、ルートフォルダーではなくwebpackファイルが配置されているconfigフォルダーを__dirnameポイントしました。

それは私のために働きます、ありがとう！

バンドルサイズの問題を解決するために、次のリリースで行う変更は次のとおりです。

アイコンごとに個別のコンポーネントを作成する

import StarFilled from 'antd/icons/StarFilled';

<StarFilled />

アイコンを文字列として参照することを非推奨

次のコンポーネントでアイコンを文字列として参照すると、非推奨の警告が表示されます。

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

互換性のために、アイコンを文字列として参照するときに、オンデマンドでSVGスプライトをロードします。

アイコンを文字列として参照する代わりに、ReactNodeをこれらの小道具に明示的に渡す必要があります。

import StarFilled from 'antd/icons/StarFilled';

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

@yesmeckツリーシェイクを導入し、同時にaddIconメソッドを導入しない優れたソリューション！

質問。 これらのアイコンにCSSスタイルがあり、アイコンのタイプを動的に変更する必要がある場合はどうなりますか？ すべての置換アイコンにスタイルを渡す必要がありますか？

@michaelpeterlee rc-calendarはantdと@ant-design/iconsに依存していなかったため、「アイコンライブラリ全体をロードする」ことは想定されていません。 https://github.com/react-component/calendar/issuesで、再現デモを使用して問題を作成できます。

私の間違い。 無関係なコメントを削除しました。 アイコンを導入するのはDatePickerコンポーネントである必要があります。

私のポイントは、プロジェクトのどこにもantdアイコンをインポートしていませんが、一部のantdコンポーネントはIconからantd Iconをインポートしています。 これらのコンポーネントが、アイコンライブラリ全体ではなく、必要なアイコンのみをインポートできると便利です。

バンドルサイズの問題を解決するために、次のリリースで行う変更は次のとおりです。

@yesmeck

3.11.xですか？ 3.10.4含まれていないようです。

@ johnernaut ＃12888

とりあえずv3.8.4に戻ると、3.9.0以降のバージョンはパッケージ化された後は大きすぎます。上記の神々が言及したバージョンは一時的な解決策にすぎません。アイコンを非同期でロードする次のバージョンを楽しみにしています。

@yesmeckに感謝し

また、 create-react-app v2およびcraco用のAntDesignプラグインを公開したことにも言及したいと思います。 これがGitHubのcraco-antdプラグインです

Ant Design IconsセクションからLargeBundle SizeをREADMEに追加しました。この問題（およびPR ）に注目します。

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

この問題を紹介する複製リポジトリを作成しここにある元のng-zorro-antd統合の例から変更されており、 DllPluginは、フラット化されたESモジュールのツリーシェイクを役に立たないようにしています。

DllPluginがない場合は、期待どおりに機能します。

これは、webpackがフラット化されたesモジュールでツリーシェイクを行わないことに関するいくつかの歴史的背景です。 彼らが言及していることは、 DllPluginいくつかのエッジケースを除いて、最近のリリースでほとんど修正されていると思います。

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

興味深いことに、webpackがDllPluginでのツリーシェイクをサポートするのは、5月になってentryOnly: trueを追加しましたが、運がありません。 もっと孤立した例をドラフトして、webpackに問題を提起します。

編集：複製リポジトリと歴史的な問題を追加しました。

話の終わり：複製リポジトリを偽造するのはここです。 webpack 3.5.6は、 entryOnly: trueサポートがないと古すぎます。 そのため、 fesm5モジュールはツリーシェイクされません。

ng-zorro-antdをdllベンダーにバンドルしたい人のために

• webpack > = 4.9.0の場合は、 DllPlugin構成にentryOnly: trueを追加します。
• それ以外の場合は、この設定をwebpack構成に追加します

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

@issuehuntfestは、この問題に$ 200.00の資金を提供しました。 IssueHuntでご覧ください

フォントファイルをパッケージ化に参加させてローカルにインポートすることはできませんか？大きすぎる

この問題を最適化する公式の計画はありますか？ 3.8より前のバージョンと同様のローカルsvgソリューションを提供できますか？

改善を楽しみにしています

公式の解決策はありますか？

@fuhaiwei次のバージョンまで、アイコンを直接エクスポートして回避策についてこのコメントを確認してくださいhttps://github.com/ant-design/ant-design/issues/12011#issuecomment -423173228

現在、 webpack.resolve.alias 、 antd/es/iconをカスタムコンポーネントwebpack.resolve.alias置き換えています。
アセンブリは<Icon /> a props.typeおよびprops.themeが指定されたAPIに送信されます。
このようにして、使用されたすべてのアイコンデータをページテスト中に記録できます。
次に、データとhttps://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228に基づいて、 icons.js自動的に生成されます。
より良い解決策を見つけることを願っています。

現在、 webpack.resolve.aliasを使用してantd/es/iconをカスタムコンポーネントに置き換えています。
そのコンポーネントは、指定されたAPIにprops.typeとprops.themeの<Icon />を送信します。
これにより、ページテスト中に使用されたすべてのアイコンデータを記録できます。
次に、データとhttps://github.com/ant-design/ant-design/issues/12011#issuecomment-423173228に基づいて、 icons.js自動的に生成します。
より良い解決策を見つけることを願っています。

3か月が経過しましたが、当局はオンデマンドでロードする方法を見つけましたか？

導入方法から始めるのが一番いいと思いますし、素材のようにすべての構成要素を別々に引用するのもいいですね。 。これで、組み込みのアイコンを使用できるコンポーネントのみがパッケージ化されました。 。

Iconコンポーネントが使用されていない場合、@ ant-desigin / iconsパッケージもロードされます

Iconコンポーネントが使用されていない場合、@ ant-desigin / iconsパッケージもロードされます

Datepickerも使用されます。コードにそのようなものがあるかどうかを確認してください。 メニューも使用されます

500KBを超えると大きすぎます

楽しみにしていたのですが、もともと最新バージョンに切り替えていたのですが、パッケージがとても大きいのを見て、また戻るのが怖かったです。

SVG形式を使用したくないのですが、柔軟に構成できますか？ svgを使用するかどうかを構成する

単一のアイコンのみを参照する方法を提供でき、antdのすべての内部コンポーネントはこの方法を使用するように更新されます。

import Search from 'antd/icons/Search";

<Search />

既存のプロジェクトとの互換性のために、 import { Icon } from 'antd';引き続き予約されていますが、 import { Icon } from 'antd';が使用されている限り、アイコンの全量がインポートされます。

2階で同意する

完璧な解決策を待っているマーク

500kアイコン、解決策はありますか？

誰かがこれについて英語で私を更新できますか？ 500kbは私のバンドルの4分の1です。 私はwebpackを使用しており、次のようにアイコンをインポートしています。

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

私はそれらをインポートするさまざまな方法を試し、アイコンのインポートをすべて削除することさえ試みましたが、私が何をしても500kbが残っているようです。 私はwebpackを使用しており、区画の実験スコープの巻き上げ機能を使用してアイコンを適切にツリーシェイクすることができましたが、他の20か所でアプリが破損するため使用できません。

人々はこの問題をどのように扱っていますか？ ここにいる全員が500kbを追加してプロジェクトを出荷しているだけですか、それとも私が無視している明らかな回避策ですか？

そのようにインポートすると、標準のWebpackビルドで機能しますか？

import Star from 'antd/icons/star';
誰かが私を更新することができれば、私はそれを本当に感謝します。

@ApolloGun回避策はこのスレッドで数回参照されており、すべてがこのコメントにあります： https ：

それが機能する方法は、Webpackに別の場所からアイコンを解決するように指示することです。具体的には、使用したいアイコンを正確にエクスポートする新しいファイルです。 これを行った後、アイコンは通常どおり機能し、コンポーネントを変更する必要はありません。

私はアイコンを使用していませんが、それでもその巨大なファイルを取得します。 たぶん、antdのコンポーネントはそれを内部で使用しています。 コンポーネントで使用されているアイコンを確認するにはどうすればよいですか。 これは、選択、ドロップダウンなどのカスタムアイコンでAntdアイコンを置き換えるための良い方法のようです。

私はアイコンを使用していませんが、それでもその巨大なファイルを取得します。 たぶん、antdのコンポーネントはそれを内部で使用しています。 コンポーネントで使用されているアイコンを確認するにはどうすればよいですか。 これは、選択、ドロップダウンなどのカスタムアイコンでAntdアイコンを置き換えるための良い方法のようです。

@HeskeyBaoziは、webpackエイリアスを使用して、antdコンポーネントで使用されるアイコンのリストを作成しました。
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo/blob/master/src/icons.js#L10 -L100
この方法を理解するには、問題の説明全体をお読みください。

@ApolloGun現在、公式の解決策はありません。
プルリクエスト：＃12888はまだ進行中です。

@ yesmeck 、 @ afc163これをすぐに閉じる予定はありますか？

@HeskeyBaozi @ afc163 、あなたが書いたこの新しいものをどのように使用しますか？ ？

@HeskeyBaoziなぜ皆さんがこれに取り組んでいないのか聞いてもいいですか？ 5ヶ月以上経ちました。 皆さんはこれを優先度が低いと思いますか？

@HeskeyBaoziなぜ皆さんがこれに取り組んでいないのか聞いてもいいですか？ 5ヶ月以上経ちました。 皆さんはこれを優先度が低いと思いますか？

同意します、それは本当に迷惑です=（

コード検査の後にantd 、私が見ているそのコンポーネントなどButton輸入Icon 、ひいては輸入に（生成されたコードに応じて）

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

//...

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

これにより、ツリーシェイクが失敗し、すべてのアイコンがインポートされます。 インポートを@ant-design/icons/lib/index.es.jsポイントし、必要になるまですべてのアイコンで操作を実行しないことを検討してください。 また、この行の履歴を確認してください： //github.com/ant-design/ant-design/blob/master/components/icon/index.tsx#L3時間の経過とともに少し変化しています。

これにより、プロジェクト全体が直接利用できなくなります

@poorel 、

<Icon />は、デフォルトでアイコンライブラリを完全に導入します。ランタイムにどのようなアイコンを導入するかわからないためです。以前は、アイコンはiconfont.cnホストされていたため、パッケージングの認識はありません。

これには、一時的な計画についての詳細な議論が必要です。 ＃12011（コメント）を参照してください。

このソリューションは引き続き使用できます。テストしましたが、プロジェクトに含まれるアイコンを整理する必要があります。これはもう少し面倒です。

ただし、プロジェクトに含まれるアイコンを整理する必要があります...

以前読んでみたところ、アイコンの参照の多くはantd独自のコンポーネントで作成されており、その数は少なくありません。ビジネスで直接引用したものは非常に少ないですが、コンポーネントが参照されている可能性があることを考えると、数を数えるのは簡単ではありません。

@chenyongええと、その卵が痛い。 。 。

@aryzingあなたのアプローチは魅力的に聞こえます。 ＃12888よりも労力が少なくなりますか？ そのPRには、あまりにも多くの重大な変更が含まれています。おそらく、それが数か月経ってもまだ完了していない理由の1つです。

@ zachguo ＃

一部のantdコンポーネントで使用されるアイコンは、小道具に基づいて動的にレンダリングされます（つまり、実行時に決定されます）。 たとえば、ButtonのAPIを見てください。

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

このコンポーネントが正しくレンダリングされるためには、Buttonコンポーネント（または使用される基になるIconコンポーネント）が（実行時に）すべてのアイコンにアクセスできる必要があり、ツリーの揺れを許可しません。

解決策は、次のようなAPIを使用することです。

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

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

このシナリオでは、必要なものだけをインポートしているので、ツリーシェイクを開始して、例@antd/some-icons-packageからの未使用のエクスポートをすべて削除できます。

この問題は半年以上続いており、まだ公式の解決策はありません。私が現在使用している解決策は、非同期ロードにimport()を使用することです。
この問題は半年以上経過しており、まだ正式な解決策はありません。現在使用している解決策は、非同期読み込みにimport()を使用することです。

Reactのロード可能なコンポーネントを使用してください。
Reactのロード可能なコンポーネントを使用してください。

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

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

• 最初のステップは、依存関係をインストールすることです： @loadable/componentおよび@babel/plugin-syntax-dynamic-import 。
  最初のステップは、依存関係をインストールすることです： @loadable/componentおよび@babel/plugin-syntax-dynamic-import 。

• 2番目のステップは、プロジェクトのルートディレクトリにフォルダiconsを作成し、スクリプトを使用して@ant-design/icons内のすべてのアイコンをエクスポートすることです。
  2番目のステップは、プロジェクトルートにフォルダーiconsを作成し、スクリプトを使用して@ant-design/icon内のすべてのアイコンをエクスポートすることです。

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

  ノードを使用してプロジェクトの直下でこのスクリプトを実行し、 @ant-design/iconsにエクスポートされたすべてのアイコンをiconsディレクトリに保存します。
  ノードを使用してプロジェクトの直下でこのスクリプトを実行し、 @ ant-design/iconsからエクスポートされたすべてのアイコンをiconsフォルダーに保存します。

• 3番目のステップは、Antdコードリポジトリ内のcomponents / icon / index.tsxをプロジェクトルートディレクトリにコピーし、 Icon.jsxまたはIcon.jsという名前を付けてから、コード内のTypeScriptタイプ定義を削除して純粋にすることです。 JavaScriptコード。 （プロジェクトでTypeScriptを使用している場合は、 Icon.tsxまたはIcon.tsという名前を直接付けることもできるため、タイプ定義を削除する必要はありません）
  3番目のステップでは、Antdコードリポジトリのcomponents / icon / index.tsxをプロジェクトルートにコピーし、 Icon.jsxまたはIcon.jsという名前を付けてから、コード内のTypeScriptタイプ定義を次のように削除します。純粋なJavaScriptコードを取得します（プロジェクトでTypeScriptを使用している場合は、 Icon.tsxまたはIcon.tsとして直接名前を付けることもできるため、タイプ定義を削除する必要はありません）
  次に、このコードファイルを変更し、 import()と@loadable/componentを使用して、オンデマンドでアイコンファイルをロードします。
  次に、コードファイルを変更し、 import()と@loadable/componentを使用して、必要に応じてアイコンファイルをロードします。

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

• 最後のステップは、Webpackを構成することです。
  最後のステップは、Webpackを構成することです。
  `` `diff
  diff-a / webpack.js b / webpack.js
  --- a / webpack.js
  +++ 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 @@
  プラグイン：[
  新しいHtmlWebpackPlugin（{
  タイトル：「素晴らしいページ」、
  テンプレート：path.join（__ dirname、 'public / index.html'）、
  メタ：{
  ビューポート： 'width = device-width、initial-scale = 1'、
  }、
  ハッシュ：true、
  }）、

  • 新しいwebpack.NormalModuleReplacementPlugin（
  • /node_modules\/antd\/es\/icon\/index.js/、
  • path.resolve（__ dirname、 'Icon.jsx'）
  • ）、
    ]、
    解決：{
    モジュール：['node_modules']、
    @@ -56,13 +61,14 @@
    使用する： [{
    ローダー： 'babel-loader'、
    オプション：{
    プリセット：[
    ['@ babel / prefix-env'、{ターゲット： '> 2.486％、死んでいない'}]、
    '@ babel / prefix-react'、
    ]、
    プラグイン：[
  • ['@ babel / plugin-syntax-dynamic-import']、
    ['@ babel / plugin-proposal-class-properties']、
    ['import'、{libraryName： 'antd'、libraryDirectory： 'es'、style：true}]、
    ]、
    }、
    }]
    

    `` `

このソリューションの利点は、すべてのアイコンを保持でき、アイコンの不足を心配することなく、構成可能な背景管理システムでアイコンを任意に変更できることです。アイコンはオンデマンドで読み込まれ、特定のページのアイコンがレンダリングされたときにのみ読み込まれます。対応するアイコンファイル。ロードする必要があるのは、パッケージ化されたインデックスの約50Kのアイコンリストデータだけです（ Icon.jsxのWebpackマジックコメントで短い名前を指定すると、サイズを小さくできます）。
このソリューションの利点は、すべてのアイコンを保持できること、欠落しているアイコンを気にせずに構成可能なバックグラウンド管理システムでアイコンを変更できること、およびアイコンがオンデマンドでロードされることです。レンダリングに必要なアイコンのみがロードされます。特定のページのレンダリングを開始したとき。ロードする必要のあるパッケージ化されたインデックスファイルには、約50Kのアイコンリストデータしかありません（ Icon.jsxのWebpackマジックコメントで短い名前を指定すると、このサイズを減らすことができます）。

このソリューションの欠点は、各アイコンにアイコンの内容に加えて追加のWebpackモジュール情報が含まれているため、iconsフォルダーのサイズが、パッケージ化された単一ファイルのサイズに加えて、インデックスの50Kよりもはるかに大きいことがわかります。アイコンリストのデータは、実際には3Mに近いサイズでパックされています。ただし、実際に前後に使用できるアイコンは数個または数十個しかないため、ユーザーのブラウザによってダウンロードされるデータの量はそれほど多くはなく、1つのページに同時に表示されるアイコンの数がない限り、非同期で読み込まれます。さらに、ロード速度にはほとんど影響しません。
このソリューションの欠点は、各アイコンにアイコンの内容に加えてWebpackモジュール情報が含まれているため、 iconsフォルダーのサイズが以前にパッケージ化された単一ファイルのサイズよりもはるかに大きいことです。インデックスファイル内の50Kのアイコンリストデータ、実際のパッケージサイズは3Mに近いです。ただし、実際に使用できるアイコンは数個または数十個しかないため、ユーザーのブラウザによってダウンロードされるデータの量はそれほど多くありません。 、非同期で読み込まれるため、1ページに表示されるアイコンの数が多くない限り、読み込み速度への影響は大きくありません。

@ jinliming2はクールな変更ですが、webpackインポートが実際に変数を渡すことができることを見つけるだけです

webpackには少なくともいくつかのファイルの場所情報が必要なため、import（foo）などの完全に動的なステートメントは失敗します。これは、fooがシステムまたはプロジェクト内の任意のファイルへのパスである可能性があるためです。import（）には少なくともいくつかのファイルが含まれている必要があります。モジュールが配置されている場所に関する情報。したがって、バンドルを特定のディレクトリまたはファイルのセットに制限できます。

実際には、ディレクトリのプレフィックスがある限り、以前は受け入れられませんでした。
そうは言っても、antdユーザーはwebpackを使用するだけでなく、少し恥ずかしいことです。

@aryzing提案されたAPIのオプション1は、実際には＃12888が達成しようとしているもののようです。 多くの重大な変更が含まれるため、おそらくAntDesignチームがそれを完了するのを待つ必要があります。

xhrを使用してsvgを非同期にロードすることを検討できますか？
アーチャー-svgs

ant deisgn自体がより多くのアイコンを使用するため、 图标文件を非同期ロードスキームに変更して、メインファイルボリュームを占有しないようにすることを検討してください。これを参照できます。

ant deisgn自体はより多くのアイコンを使用するため、アイコンファイルを非同期ロードスキームに変更して、メインファイルサイズを占有する必要がないようにすることを検討してください。これを参照できます。

webpack-ant-icon-loader

@rororofffはこの問題に$ 2.00の資金を提供しました。

• この報酬を受け取るには、 IssueHuntを介してプルリクエストを送信して
• 貢献したいですか？ IssueHuntを介してこの問題にチップインします。
• IssueHunt Issue Explorerをチェックして、資金提供されている問題を確認してください。
• 開発者の助けが必要ですか？ IssueHuntにリポジトリを

この会話の長さに怯えていて、create-react-appとant-designを使いたいだけの人のために、私はここで定型プロジェクトを作成しましたhttps://github.com/AustinGreen/cra-antd-starter

これには、アイコンバンドルサイズの問題の修正と、イジェクトなしのカスタムWebpack構成が含まれます。 @ ndbroadbent 、 @ patricklafrance 、そしてant-designチーム全体の懸命な努力に感謝します。

この会話の長さに怯えていて、create-react-appとant-designを使いたいだけの人のために、私はここで定型プロジェクトを作成しましたhttps://github.com/AustinGreen/cra-antd-starter

これには、アイコンバンドルサイズの問題の修正と、イジェクトなしのカスタムWebpack構成が含まれます。 @ ndbroadbent 、 @ patricklafrance 、そしてant-designチーム全体の懸命な努力に感謝します。

Nextjsアプリでどのように使用できますか？

@AustinGreen私はあなたの例を試しました。

サイドバーとボタンが1つあり、サイズが約100kBのアプリの場合、Gzip圧縮はまだ多すぎます。

@anjmaoバンドルサイズをさらに縮小する方法がある場合は、お知らせください。追加します。エンタープライズWebアプリケーションを構築している場合は、フロントエンドフレームワーク用に最大100kB Gzipで圧縮され、最大5つのコンポーネント（包括的なコンポーネントライブラリ）、アイコン、およびその他のユーティリティはかなり標準的です。

@anjmaoバンドルサイズをさらに縮小する方法がある場合は、お知らせください。追加します。エンタープライズWebアプリケーションを構築している場合は、フロントエンドフレームワーク用に最大100kB Gzipで圧縮され、最大5つのコンポーネント（包括的なコンポーネントライブラリ）、アイコン、およびその他のユーティリティはかなり標準的です。

https://github.com/ant-design/ant-design/issues/12011#issuecomment-420038579 。 これが良い解決策です

@ Oscar-renプロジェクトはすでにアイコンのエイリアスを使用しています（これがバンドルサイズが〜400kBではなく〜100kBである理由です）

@tobiaslins前回のコメント以降
これをNuxtプロジェクトで使用すると、クライアントとサーバーサイドのレンダリングが同期しなくなります。
The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

参考までに、webpackエイリアスを使用してバンドルサイズを縮小するVueのバージョン：
https://github.com/atjason/ant-design-vue-demo

参照：
https://github.com/HeskeyBaozi/reduce-antd-icons-bundle-demo

Hello Worldパッケージサイズ：

ant deisgn自体がより多くのアイコンを使用するため、 图标文件を非同期ロードスキームに変更して、メインファイルボリュームを占有しないようにすることを検討してください。これを参照できます。

ant deisgn自体はより多くのアイコンを使用するため、アイコンファイルを非同期ロードスキームに変更して、メインファイルサイズを占有する必要がないようにすることを検討してください。これを参照できます。

webpack-ant-icon-loader

後世のために、これはReactでのみ機能します。

こんにちは、 @ jinliming2ソリューションはいつリリースされますか？
webpack-ant-icon-loaderが機能しません。

こんにちは、使用に関する情報を提供できますか
webpack-ant-icon-loaderあなたと？
私がそれを解決するのを手伝うことができるかどうか見てみましょう。

こんにちは@ beven91！

以前にいくつかのテストを実行しましたが、機能せず、実行できませんでした
理由を理解してください。 しかし、あなたの質問により、私はケースを
専用プロジェクト私はあなたとこれを示すためにサンプルテストを作成しました
それがうまくいった時間！ 結果のバンドルから常に1.21Mbを節約しています
デモプロジェクトと取り組んでいるプロジェクトの両方から素晴らしい
商業的に。

他の誰かが同じものを持っている場合に備えて、ここにサンプルプロジェクトを投稿しています
問題：
https://github.com/vladimirmoushkov/ant-icons-webpack-loade-test/#readme

webpack-ant-icon-loaderがないと、次の結果が得られます。
bundle.development.js 4.59MiBアプリ[放出]アプリ

webpack-ant-icon-loaderを使用すると、次のようになります。
../../index.html555バイト[放出]
0.bundle.development.js 1.21 MiB 0 [放出]
bundle.development.js 3.41MiBアプリ[放出]アプリ

注意事項のカップル：

• 生成された0.bundle.development.jsを削除するとより良いと思います
  アーティファクト。
• アイコンは最終製品から消えます。つまり、ページに表示されません。 umirc.jsの設定を見ましたが、react-routerを使用しています。 どうすればそれらを再表示させることができますか？

金、2019年4月5日には2時38分PMにbeven91 [email protected]書きました：

こんにちは、使用に関する情報を提供できますか
webpack-ant-icon-loaderと一緒ですか？
私がそれを解決するのを手伝うことができるかどうか見てみましょう。

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/ant-design/ant-design/issues/12011#issuecomment-480244343 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AUPfoCCVrb5j4s8Qleju8LvdPsxC02FFks5vdzW7gaJpZM4WW7EA
。

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

あなたのソリューション異なるが、Antが文書化よりもどのように、単に好奇心@AustinGreen react-app-rewiredとbabel-plugin-importここで説明する方法- https://ant.design/docs/react/use-with-create-react -アプリ？

GitHub

AustinGreen / cra-antd-starter

createreactアプリとantデザインを使用するためのボイラープレート-AustinGreen / cra-antd-starter

Antデザイン-UIデザイン言語

エンタープライズクラスのUIデザイン言語とReactベースの実装と高品質のReactコンポーネントのセット、企業向けの最高のReactUIライブラリの1つ

@annjawn create-react-app 2.0以降、react-app-rewiredは維持されなくなったため、私のプロジェクトでは、CRA2.0のreact-app-rewiredを置き換えるために作成されたcraco + craco-antdを使用しています。

@ Beven91私の前のコメントのこの部分を手伝ってくれませんか。

• アイコンは最終製品から消えます。つまり、ページに表示されません。 umirc.jsの設定を見ましたが、react-routerを使用しています。 どうすればそれらを再表示させることができますか？

バンドル全体でアイコンが分離されているのは素晴らしいことですが、使用されているアイコンは分離されたバンドルの一部のままなので、それらを使用すると、分離が無意味になる別個のバンドルとして含まれることになります。

@annjawn create-react-app 2.0以降、react-app-rewiredは維持されなくなったため、私のプロジェクトでは、CRA2.0のreact-app-rewiredを置き換えるために作成されたcraco + craco-antdを使用しています。

@AustinGreenは理にかなっていますが、

@vladimirmoushkov
遅れてすみません、私はそれを解決しようとします。

こんにちは@vladimirmoushkov

詳細はこちらをご覧ください。 ant-icons-webpack-loade-test＃1

修正されるまで私のために働いた一時的な解決策（antd> = 3.9）

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

これは、アイコンを使用するAntコンポーネントでは機能しません。 たとえば、アラートコンポーネントはチェックアイコンと閉じるアイコンを使用しますが、このソリューションでは表示されません

@ Venugopal46これらのアイコン（antコンポーネントで使用される）をicons.js追加することもできます。
私にとってはうまくいきます。

解決策に近づいているようです。 最後に、ビルドプロセスの一部としてicons.jsを自動生成するユーティリティを作成できます。

どのアイコンがantの独自のコンポーネントを介してインポートされているかを正確に把握して、それらをicons.jsに配置するにはどうすればよいですか？

私にとって上記のハック：

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

そして、次のgenerateIconsList.shファイルを使用してsrc/icons.jsを生成します。

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

プロジェクトルートからgenerateIconsList.sh 2>/dev/null >src/icons.jsを実行することによって-仕事をします！ 。
スクリプトは醜いハックであり、明らかに内部アイコン参照や複数行の<Icon />参照をキャッチしません。 私の場合、いくつかのアイコンケースを手動で追加する必要がありましたが、スクリプトはその仕事をしますが、最終的には最終バンドルで1.1MB少なくなります。

どのアイコンがantの独自のコンポーネントを介してインポートされているかを正確に把握して、それらをicons.jsに配置するにはどうすればよいですか？

Webページにない（表示されていない）アイコンを追加しているだけですが、そこにあるはずです。 使用しているantdのコンポーネントの量によって異なりますが、私にとっては、追加するのに約10分かかりました。 （私は多くのantdコンポーネントを使用していますが）

たとえば、テーブルのソーター矢印が欠落している場合：

1. antテーブルを調べて、 <i aria-label="icon: caret-down" class="anticon anticon-caret-down ant-table-column-sorter-down off">を見つけます。 この<i />タグが空であることがわかります。 ここで、アイコンの名前がcaret-downであることがわかります。
2. @ant-design/icons/libフォルダーでこのアイコンを見つけ、 filledまたはoutlineフォルダー（必要なアイコンの種類に応じて）を選択し、 icons.js新しいインポートを追加します。 ：

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

最善のアプローチではありませんが、期待どおりに機能します。 このような汚いハッキングを回避できるように、将来のリリースでこれを修正するant開発チームを楽しみにしています。

こんにちは ！

このテーマに関するニュースはありますか？ 次のantdのリリースの候補ですか？
この問題を解決するためにいくつかのことを試みましたが（ webpack-ant-icon-loader 、 babel-import-plugin ）、どれも機能しませんでした。

ありがとう！

本当にこれに対する解決策が必要です、バンドルサイズが大きすぎます！

@zlab @nuintun @anjmaoヘルプが必要な場合は、 https： //zlab.github.io/report.htmlに問い合わせてください。このページが生成するプラグインは何ですか。自分のプロジェクトを分析したい

私はそれを見つけました、それはwebpack-bundle-analyzerです

モーダルのみが使用されますが、500kアイコンライブラリがパッケージ化されています

半年以上経ちましたが、進展はありませんか？

antdを放棄して、そのような重要な問題は重要とマークされていません...

オンデマンドでアイコンにパッケージ化する必要のあるファイルをロードします、500kb

Webpackにエイリアスを追加し、icon.tsにアイコンをエクスポートしましたが、 npm start実行すると、エラーが発生しました

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

これは私のwebpack解決設定です

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

1.アイコンアイコンはプロジェクトで使用されていませんが、パッケージがあるのはなぜですか？助けてください。

2. webpackexternalsの使用= {'antd'： 'antd'}はうまく機能しません。パッケージ分析中にantdが表示されますか？

1.アイコンアイコンはプロジェクトで使用されていませんが、パッケージがあるのはなぜですか？助けてください。
2. webpackexternalsの使用= {'antd'： 'antd'}はうまく機能しません。パッケージ分析中にantdが表示されますか？

@wiiler

1. これを参照してください、それはアイコンを参照するコンポーネントである可能性があります

   https://github.com/ant-design/ant-design/issues/12011#issuecomment -418003883
   実際、 <DatePicker /> 、 <Select />など、 <Icon />を使用する組み込みコンポーネントは、使用時に完全に導入されます。

2. 外部を使用する場合は、babel-plugin-importプラグインをオフにする必要があります

Webpackにエイリアスを追加し、icon.tsにアイコンをエクスポートしましたが、 npm start実行すると、エラーが発生しました

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

これは私のwebpack解決設定です

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

これらの2つの方法をお勧めします

• エイリアスを使用する
• プラグインを使用する

@ As3ass1n
'../src/utils/antdIcon.ts'に '..'があるのはなぜですか？ webpack構成は別のディレクトリに配置されていますか？

1.アイコンアイコンはプロジェクトで使用されていませんが、パッケージがあるのはなぜですか？助けてください。
2. webpackexternalsの使用= {'antd'： 'antd'}はうまく機能しません。パッケージ分析中にantdが表示されますか？

@wiiler

1. これを参照してください、それはアイコンを参照するコンポーネントである可能性があります
   > ＃12011（コメント）
   >実際、 <DatePicker /> 、 <Select />など、 <Icon />を使用する組み込みコンポーネントは、使用時に完全に導入されます。
2. 外部を使用する場合は、babel-plugin-importプラグインをオフにする必要があります

了解しました、ありがとう

Webpackにエイリアスを追加し、icon.tsにアイコンをエクスポートしましたが、 npm start実行すると、エラーが発生しました

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

これは私のwebpack解決設定です

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

これらの2つの方法をお勧めします

• エイリアスを使用する
• プラグインを使用する

@ As3ass1n
'../src/utils/antdIcon.ts'に '..'があるのはなぜですか？ webpack構成は別のディレクトリに配置されていますか？

すみません、それは私のせいです。 間違ったファイル名を書き込んだのですが、エイリアスを使用して解決しました。 ありがとう

この問題は将来解決されないのでしょうか？ 400k近く増加

こんにちは、それがいつ解決されるかについて少なくとも大まかな時間の見積もりを提供することは可能ですか？

バンドルに490kbを追加すると、 Icon実質的に使用できなくなります。 これはかなり大きな問題ですが、これに対する修正をリリースするまでに実行できる一時的な修正はありますか？

@smddzcyはスレッドを読みましたか？

@ schester44さまざまな言語で書かれたスレッドで…アルファベット、あるいは音節文字を言うところだったが、スクリプトまで行かなければならないと思う…言語学が通常言語に限定されている人にとってはかなり難しいと思う何が起こっているのかを完全に明確にするために、エトルリア語から派生したアルファベットに制限されています。

こんにちは皆さん、私は非常に単純なpurched-antd-iconsパッケージの実装で成功しましたが、それは完全に手動です。 DOMを調べて、欠落しているアイコンを調整するために3〜4時間いじくり回していると推定します。 これは、開発/リリースサイクルの最後の段階で実装する予定です。 パッケージ化された/オフラインファーストのアプリケーションの場合、唯一の問題は、非常に控えめなiOS WKWebviewRAMの制限に近づくことです。 私たちにとって、iOSモバイルプロファイルが引き続きアーティファクトを示さない場合は、これを完全に無視します。 ここでは進展がないので、私の好みは、この新しいIcon APIが棚上げされ、古いAPIが復活するのを見ることです。

@ afc163 、

2018年9月15日に書いたものは、良い解決策のように思えます（以下のGoogle翻訳）。 これがいつ実装されるかについての見積もりを提供できますか？

古い使用法を保持し、コンソールに警告と移行のメッセージを追加します。

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

次のようなプロバイダーの新しいAPI：

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

<Star />
<SettingIcon />

そして、ツリーシェイク可能な方法も：

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

<Star />
<SettingIcon />

@HeskeyBaozi @yesmeck

V4ロードマップによると、これは今年の第4四半期に修正される予定です。

かっこいい：スマイリー：

VAOのTh 7、6 THG 1、2019 VAO LUC 1時51分ザック郭[email protected]
đãviết：

V4ロードマップによると
https://github.com/ant-design/ant-design/issues/16911 、これは
今年の第4四半期に修正されました。

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/ant-design/ant-design/issues/12011?email_source=notifications&email_token=ADKDE4RXC63VER4GSUMG5Q3PYFXT7A5CNFSM4FS3WEAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/ADKDE4TGAYRMSJQB246RQ33PYFXT7ANCNFSM4FS3WEAA
。

ICYMI、アイコンのドキュメントはこれに言及しました。 以下にそのコピー。

"⚠️3.9.0でインポートしたすべてのSVGアイコンによってもたらされる追加のバンドルサイズについて、開発者が必要に応じてアイコンをインポートできるようにする新しいAPIを提供します。さらに進んでいくために＃12011をトレースできます。
その前に、コミュニティのwebpackプラグインを使用して、アイコンファイルをチャンク化できます。」

最後のビットはクールです。コードを分割してアイコンを非同期にロードします。私の場合は、コードを分割してアイコンをまったく使用しません。

当局はこれをあきらめましたか？それはどれくらいの期間であり、まだそれを解決していませんか？

当局はこれをあきらめましたか？それはどれくらいの期間であり、まだそれを解決していませんか？

@ zhe-he

明確な解決策はありません！

この役人は本当にこの問題を解決するつもりはないのですか？そのような大きな不要なパッケージは本当に去るように説得されます

@DemoHu

@tibotiberアイコンローダーへのリンクに感謝しますが、アイコンチャンクはまだindex.htmlに挿入されますか？ index.htmlからの挿入からチャンクを削除する方法に関する提案

@ jasan-sバンドルを作成する方法と、アイコンを使用する場所によって異なると思います。 たとえば、私はコード分​​割を構成する最新のcreate-react-appを使用しており、メインバンドルのコンポーネントツリーのどこにもimportアイコンがないことを確認しています（アイコンは使用しません） 。

@tobiaslinsからの回避策はModule not found: Error: Can't resolve '@ant-design/icons/lib/dist' in '/Users/fede/Projects/despe/deliveries/node_modules/antd/es/icon'と言っています誰かが私にそれを修正する方法を教えてもらえますか？ ありがとう

@marcosfede私はcustomize-

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

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

@marcosfedeああ！ 私の悪い。 分かりました。

アイデアがあります💡 @ afc163

svgアイコンを使用して、以前の使用法を維持できます。

<Icon type='search' />

次に、babelプラグインを介して次の場所に移動します。

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

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

次に、ツリーシェイクを使用して、使用されているアイコンのみをパッケージ化できます。

動的タイプについては、サポートされていない場合にのみ使用してください。動的なニーズに使用できます。

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

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

実際、元のタイプの実際の機能は削除され、すべてのタイプの使用法はコンポーネントの使用法に変換されます。

アイデアがあります💡@ afc163

svgアイコンを使用して、以前の使用法を維持できます。

<Icon type='search' />

次に、babelプラグインを介して次の場所に移動します。

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

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

次に、ツリーシェイクを使用して、使用されているアイコンのみをパッケージ化できます。

動的タイプについては、サポートされていない場合にのみ使用してください。動的なニーズに使用できます。

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

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

実際、元のタイプの実際の機能は削除され、すべてのタイプの使用法はコンポーネントの使用法に変換されます。

考え方は4.0変換と同じですが、babelエスケープを使用すると明らかにワークロードが軽減され、動的な変更のみを手動で処理する必要があります。

昨夜コメントを投稿した後、一時的にBabelプラグインを作成しました。ローカルで試しましたが、完全に実行可能です@ afc163 、

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

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

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

また、ダウンコンバージョンルールとキャストレーションタイプの実際の機能を改善する必要があります。

何か進展はありますか？

公式アイコンソースコードでパッケージ化されたソリューションを参照し、アイコンを個別にjsにパッケージ化します
https://github.com/Beven91/webpack-ant-icon-loader

@ARKKYN antd v4が進行中です＃16911

antd4のアルファ版を今すぐ試すことができます

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

アイコンを引き出して、木の揺れをサポートします。

この役人は本当にこの問題を解決するつもりはないのですか？そのような大きな不要なパッケージは本当に去るように説得されます

実際、これはafc163がクリスマスにしたのと同じ色調を持っています。サブテキストは「私はそれが好きです、あなたはそれが好きですか？」です。

@ lizy0329 4.0.0-alpha.2が変更されました。エネルギーと時間の調整が必要です。お急ぎの場合は、フォークで自分で変更してください...

@ lizy0329https ： //github.com/ant-design/ant-design/pull/18217を参照してください

かっこいい、本当に。

@ lizy0329 ＃

かっこいい、本当に。

本当にかっこいいじゃない。しかし、これを変えると、その結果を想像する必要があります。HO！HO！と同じ色調は、比較せずに比較することはできません。

@ lizy0329

今东西跟afc163在圣诞节的所作所是一的的调性、潜台词是「老子喜欢、你爱用不用」

フォントの代わりにSVGを使用するのはなぜですか？
アイコンフォントの代わりにReactSVGコンポーネントをアイコンに使用する

会社は以前にこれを行ったことがありますか？
SVGでオクティコンを配信

今の問題は何ですか？
前のアイコンはcdnによってロードされたフォントを使用しており、サイズはベンダーに反映されません。 svgアイコンをホストするためのデフォルトのcdnはありません（すべてのアイコンをチャンクに入れて、独自のcdnをホストに使用できます）。この部分はベンダーに反映されます。
この号で説明しているのは、ツリーの揺れを行う方法、アイコンをオンデマンドでロードする方法です。

それを許容できない場合は、すべてのアイコンを一度にロードしてください。（問題では）回避する方法が少なくとも3つあります。

@ afc163
3.9の変更ログは非常に不親切だと思います。 なぜSVGに変更されたのか説明しませんでした。 フォントの欠点とその利点は何ですか？

ところで、私はsvg（このように、1024 * 1024までのviewBox）を使用することに反対します。これは、複合レイヤー操作の時間のかかる増加を引き起こします。

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

@ afc163これは短すぎて、SVGに変更する必要がある理由を説明するには不十分です。 関係者は、svgを使用する理由とアイコンをオンデマンドでロードする方法を説明するのに十分に目立つ説明をしていませんでした。これがこの問題の多くの否定的な感情の理由の1つだと思います。

@muzea提案をありがとう
ブラウザーでのsvgのレンダリングパフォーマンスに対するviewBox影響は、 svg ∥子pathパス描画の定義、数、およびノー​​ドの関係と比較して小さいです。頭に。複合層の操作の増加を実際に引き起こしたのは、後者が大きな頭です。
svgアイコン自体（幅と高さ）が大きすぎることを意味する場合、大きなアイコンは確かに描画の複雑さをもたらしますが、相関係数は比較的低くなります。保証できるのは、デザイナーから入手したアイコンを処理する過程で、ユーザーの認知体験が可能な限り向上し（アイコンが大きく変形しない）、パスの圧縮と関連する最適化が最高の大まかな精度で実行されることです。実際、ブラウザがコンポジションレイヤーの段階でレンダリングされるようにしたい場合は、 svg spriteスキームが考慮されますが、これは通常、ページに副作用を追加します（ヘッダーまたは他の位置に関連する定義を追加します）。これは、メンテナンスと汎用性の要件が高いライブラリの場合、考慮されない場合があります。

どのような状況で、人々は認識に値するWebアプリケーションアイコンソリューションとしてsvgを嫌いますか？

• IE8ユーザー
• ユーザーのネットワーク状態は良好です
• アイコンが見える限り（明瞭さは気にしないでください）
• モノクロのアイコンは、現在も将来も常に十分です

この問題に関する公式のフォローアップの欠如は、確かに、割り当てに対応する人は問題を解決していませんが、それはもうありません。

@ lizy0329人が他人のこの行動について推測することをいとわない悪意のある人は、他人に干渉する権利がありません。しかし、この人はまだPRに言及することを歓迎します

@HeskeyBaozi
ドキュメントのアイコン部分のブラウザでのパフォーマンスが非常に低くなっています。

実際、osxのクロムは、ページにantdアイコンがたくさんあると、パフォーマンスが非常に悪くなります。

たぶんbabel-plugin-macrosはこの問題の解決に役立つでしょうか？

@ lizy0329人が他人のこの行動について推測することをいとわない悪意のある人は、他人に干渉する権利がありません。しかし、この人はまだPRに言及することを歓迎します

これは悪意のある推測ではなく、「共通性を求める」と呼ばれます。 HO！HO！事件は偶然ではなく、長期的な蓄積であるに違いありません。私は私をだましませんでした、私はantdがより良く開発し、各アップデートの結果と解決策について考えたいだけです。

それで、いつこれを使用できますか？プロジェクトでantdを使用し、何もしなかったので、ボタンをインポートし、パッケージ化されたバンドルを177kから1.1mに変更しました...アナライザーがそれを見て、それもアイコンでした。大きい

使用していないときにバンドルからアイコンを削除する方法はありますか？

create-react-appでオーバーライドを使用しています。 そのようです：

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

@ qaiser110のソリューションをantd@3チェックする必要があります。

antdソースはすべてのアイコンのワイルドカードインポートを行うため、バンドルサイズは膨大です。 リンクポスト上記の溶液はWebPACKの使用することですresolve.aliasリダイレクトするために@ant-design/icons/lib/distから桜が、選んだアイコン持つカスタムファイルへのインポートを@ant-design/icons 。

大きなバンドルを用意するよりはましですが、アイコンを手動で選択する必要があるため、それでも理想的ではありません。 ただし、通常は必要に応じてチェリーピックを行います（アイコンがない場合）。 何を厳選する必要があるかを理解するには、 antdとソースコードを検索して、使用されているアイコンを探します。

antdソースから厳選されたアイコンの共有ファイルまたはパッケージがあると便利です。 このように、私達は私達自身の源のためのチェリーピッキングについて心配する必要があるだけです。 これがアイデアの要点です。 antdコンポーネントがエクスポートするアイコンをグループ化することができ、antdソースを調べて手動でチェリーピックする代わりに、カスタムアイコンファイルにexport * from 'antd-cherry-pick-icons/icon'を入れることができます。 これは、 antdソースを使用して可能な限り最新の状態に保つためのコミュニティの努力によって行うことができます。

@LucasBassetti 、アイコンは必要ありませんか？ <Icon />直接使用していない場合でも、一部のantdコンポーネントは `を使用します 。 たとえば、 <Alert />です。

antd 4.0（アルファ版）では、ワイルドカードインポートを使用し、各コンポーネントのインポートを厳選します。

修正されるまで私のために働いた一時的な解決策（antd> = 3.9）

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

config-overwrites.js探しの方

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


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

@adinncアイコンのパスが変更され、 @ant-design/icons/lib/outline/DownOutlineはなくなりました

マークはこの問題に細心の注意を払っています。現在、antd 3が使用されており、ボタンが導入されています。瞬間とアイコンをリンクするだけです。アイコンファイルのサイズは50万を超えています。

@DemonCloudの瞬間の問題は、 https：//github.com/ant-design/babel-plugin-import/issues/352に注意を払うことができ

react-app-rewiredを介してcreate-react-appを使用し

config-overrides.js

Const  path  =  require ( ' path ' );

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

  Config . resolve . alias  = alias;

  Return config;
}

icons.js要点

理由はわかりませんが、icons.jsを使用すると、バンドルが600KB増加します。

コードでこのパッケージを使用する必要があるためかもしれませんhttps://www.npmjs.com/package/html-webpack-inline-source-plugin

config-override.jsように編集して、バンドルサイズを500KB削減しました。

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

前

後

config-override.jsように編集して、バンドルサイズを500KB削減しました。

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

前

後

ありがとうございました！ それは私を助けました！

@adinncアイコンのパスが変更され、 @ant-design/icons/lib/outline/DownOutlineはなくなりました

ねえ、あなたは回避策を見つけることができますか？ 私も同じエラーが発生します

組み込みのアイコンを使用しない場合、@ ant-designを削除するにはどうすればよいですか？

ここに表示されているのは、回避策のみです。 コンポーネントが使用するアイコンをインポートするだけの方がはるかに簡単でクリーンではないでしょうか。 これで根本的な原因が解決されます。代わりに名前付きインポートを使用している場合は、それほど難しくないと思いますね。

@Nomeasmo 、ロードマップによると、v4で修正する必要があります。

3.Xに修正があればいいのにと思います。 可能であれば4にアップグレードする予定はありません。

ボタンのような単純なもののCSSが非常に複雑で、ライブラリにアクセシビリティ機能がなく、パッチの更新でさえ1,000近くのコミットで埋め尽くされているため、いつか完全にAntから移行することを望んでいます。 それは私の好みにはあまりにも多くの解約です。

マーク

react-app-rewiredを介してcreate-react-appを使用し

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要点

動作しないアイコンのバンドルサイズが大きい

v4.0.0-beta.0では、アイコンのツリーシェイクがそのままでは機能しないようです。
誰かがアイコンバンドルを正常に縮小しましたか？ 設定を共有していただけますか？

後でv4.0.0-beta.1を試し、 @ant-design/compatibleパッケージを削除しましたが、すべてのアイコンはまだバンドルに含まれています。

react-app-rewiredを介してcreate-react-appを使用し
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要点

動作しないアイコンのバンドルサイズが大きい

https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531のように、インポートする必要のあるアイコンを含めるには、icons.jsファイルが必要です。

修正されるまで私のために働いた一時的な解決策（antd> = 3.9）

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

config-overwrites.js探しの方

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


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

おかげで私のバンドルを700kbから200kbに​​減らしました

v4.0.0-beta.0では、アイコンのツリーシェイクがそのままでは機能しないようです。
誰かがアイコンバンドルを正常に縮小しましたか？ 設定を共有していただけますか？

後でv4.0.0-beta.1を試し、 @ant-design/compatibleパッケージを削除しましたが、すべてのアイコンはまだバンドルに含まれています。

更新されたアイコンのインポートにもかかわらず、4.0.0-rc.0で同じ問題が発生する

@jhockett私も同じ問題を抱えていました！ 私の輸入品のいくつかがツリーシェイクプロセスを壊していることがわかりました。 例：_import Text from'antd / lib / typography / Text '; _
'antd'; _の_import {Typography}に置き換えたところ、アイコンがバンドルから削除されました。

@jhockett私も同じ問題を抱えていました！ 私の輸入品のいくつかがツリーシェイクプロセスを壊していることがわかりました。 例：_import Text from'antd / lib / typography / Text '; _
'antd'; _の_import {Typography}に置き換えたところ、アイコンがバンドルから削除されました。

私のantデザインのインポートはすべて、あなたが言及した構文を使用します：_import {Typography} from'antd '; _
ですから、これは私の問題ではないようですが、他の人が影響を受ける可能性があります。

修正されるまで私のために働いた一時的な解決策（antd> = 3.9）

1. アイコンを異なる方法で解決するようにwebpackを適応させます。 Webpack構成で：

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

1. icons.jsをフォルダsrc/または任意の場所に作成します。 エイリアスパスと一致していることを確認してください。
   このファイルでは、antdに含めるアイコンを定義します。 antdのSelectコンポーネントに必要なのは下向きアイコンだけです。

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

config-overwrites.js内のreact-app-rewire （create-react-appの変更）でこれを行うことも可能です

config-overwrites.js探しの方

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


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

おかげで私のバンドルを700kbから200kbに​​減らしました

これを使用すると、機能しません。次に何ができますか？

Parcel.jsを使用している人にとっては、次のことを行うことでうまくいきました。

npm install purched-antd-icons

そしてpackage.json追加します：

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

v4.0.0-beta.0では、アイコンのツリーシェイクがそのままでは機能しないようです。
誰かがアイコンバンドルを正常に縮小しましたか？ 設定を共有していただけますか？

後でv4.0.0-beta.1を試し、 @ant-design/compatibleパッケージを削除しましたが、すべてのアイコンはまだバンドルに含まれています。

このようにbabel-plugin-importの設定を変更することで、問題を解決しました。

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

https://github.com/ant-design/ant-design/issues/12011#issuecomment -552117531に触発されてantd@4 （https://github.com/ant-design/ant）で動作するようになりました-デザイン/問題/ 20661）。

次のresolve.aliasをwebpack追加します（ customize-craでも機能するはずです）。

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

icons.tsxは次のようになります。

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

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

たとえば、上記のLoadingOutlinedアイコンは、 Buttonコンポーネントに必要です。 そのファイルに必要なすべてのアイコンを追加します。 また、そのファイルを再利用することもできます。 ただし、 @ant-design/iconsからの直接インポートも使用できるため、これはあなた次第です。

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

@matzeeableが提案した解決策は私にとってはうまくicons.tsxどのアイコンを含めるべきかを知る正しい方法は何ですか？ 例：InputNumberやSelectドロップダウンなどのフォーム要素があります。 ヒントはありますか？

icons.tsxどのアイコンを含めるべきかを知る正しい方法は何ですか？ 例：InputNumberやSelectドロップダウンなどのフォーム要素があります。 ヒントはありますか？

@ pradeepb6 antdからソースに新しいコンポーネントを含めると想像してください。 Webpackはアイコンを解決しようとしますが、 icons.tsx定義したことがないため、名前付きエクスポートを見つけることができません。 次のような警告が表示されます。

その後、コンポーネントが期待どおりに機能するように、 icons.tsxエクスポートする必要のあるアイコンがわかります。 🙂

@matzeeableありがとうございます。 やってみました。 しかし、スクリーンショットに示すようにエラーが発生します。 コードはここにあります。

私はすでにbabel-plugin-importgithubで書いていますが、もっと多くの人がここにいるために、ここの誰かがその問題を抱えていたのかもしれません。 V4に移行しましたが、大きなバンドルサイズが見られます。
https://github.com/ant-design/ant-design/issues/12011#issuecomment -577513378に記述されているように"libraryDirectory": "es"を追加すると、次のエラーが発生します。

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

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

私はnext.jsを使用しています。 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",

誰でも？

@ afc163をするために$ 142.10を報いた@vagusx 。 IssueHuntでご覧ください

• ：moneybag：合計​​デポジット：$ 203.00
• ：tada：リポジトリ報酬（20％）：$ 40.60
• ：レンチ：サービス料（10％）：$ 20.30

@chemicalkosekと同じ問題が発生し[email protected] + next.jsあり、現在esmで解決されています。

yarn add esm

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

それが他の人に役立つことを願っています:)

@ i-tengfeiうわー、それは働いています！ どうもありがとうございました！

antd @ 4の場合、@ ant-design / iconsパッケージを上書きし、antdアイコンをfontawesomeアイコンに置き換える独自のパッケージを使用しています。

antdが必要とするアイコンのみを提供します。 また、ツリーシェイクを有効にすることができなかったため、バンドルサイズを大幅に削減しました。そのため、デザイン/アイコンパッケージ全体が含まれていました。

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

[email protected]にアップグレードしてください。この問題は完全に解決されています。

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

Parcel.jsを使用している人にとっては、次のことを行うことでうまくいきました。

npm install purched-antd-icons

そしてpackage.json追加します：

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

おかげで、それは動作します！

@ afc163 @yesmeckは、バックグラウンドから返されたデータに従ってアイコンを設定します。フロントエンドはどのように非同期で読み込まれますか。たとえば、バックグラウンドから返されるアイコン文字列はAppstoreOutlined 。私のアプローチは、次のとおりです。

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

// render
<Icon />

しかし、今では直接コンパイルすることは不可能です。動的読み込みが機能していないようです

@ afc163

[email protected]にアップグレードしてください。この問題は完全に解決されています。

20661

解決したかどうかはわかりません。 パッケージにはまだすべてのアイコンバンドルが含まれています。
すべてのアイコンをこの方法でインポートしました。
「@ ant-design / icons」を使用してい
この設定もあります

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

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

@ afc163 @yesmeckは、バックグラウンドから返されたデータに従ってアイコンを設定します。フロントエンドはどのように非同期で読み込まれますか。たとえば、バックグラウンドから返されるアイコン文字列はAppstoreOutlined 。私のアプローチは、次のとおりです。

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

// render
<Icon />

しかし、今では直接コンパイルすることは不可能です。動的読み込みが機能していないようです

私はそれがあるべきだと思います {Icon}に変更します。
エラーメッセージを投稿すると、原因をより適切に判断できます。

babel-plugin-importを使用して、サイズを500kb +から縮小しました

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

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

@thangbn

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

  ],

@ mit123suki @nwoeddie提案をありがとう、私は両方を試しましたが、それでも運がありません。 設定で何が間違っているのかわかりません。 私の完全な設定は以下の通りです：

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

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

};

module.exports = dev;

@ afc163 @yesmeckは、バックグラウンドから返されたデータに従ってアイコンを設定します。フロントエンドはどのように非同期で読み込まれますか。たとえば、バックグラウンドから返されるアイコン文字列はAppstoreOutlined 。私のアプローチは、次のとおりです。

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

// render
<Icon />

しかし、今では直接コンパイルすることは不可能です。動的読み込みが機能していないようです

{Icon}に変更する必要があると思います。
エラーメッセージを投稿すると、原因をより適切に判断できます。

Failed to compile.

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

@Xez​​zonは、最初のアイコンモジュールが見つからないことを直接示しています。 babel-plugin-import構成を追加しようとしましたが、それでも機能しません。

@nwoeddie

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

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

こんにちは、nwoeddie〜 !、私の設定は機能しません。インポートオプションを単一に分割しましたが、それも使用されていません。 完全な設定を学ぶことはできますか

このaritcleは問題を解決するかもしれません： https ：//www.cnblogs.com/fulu/p/13255538.html

@nwoeddie

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

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

こんにちは、nwoeddie〜 !、私の設定は機能しません。インポートオプションを単一に分割しましたが、それも使用されていません。 完全な設定を学ぶことはできますか

これはbabel7の正しい構文ではありません。インポートプラグインは配列をサポートしていません。 正しい方法：

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