1.原因を見つけます

antd鍋を知らないから始め、後にいくつかのツールは、JSのパッケージの一部を分析するためのUIを提供することができました。たとえば、この：https://www.npmjs.com/package/webpack-bundle-analyzer

このツールを使用すると、私はJSのパックはほとんどantdもたらしました。私は問題外オンデマンドでロードするべきではありませんので、私の最初の公式は、オンデマンドでロードantdを設定して確認しました。慎重に分析した後、および主な理由は以下の4つであることがわかりました。

アイコン

アイコンのantdは、大部分を取ります。その理由は、通常の状況下のアイコンは、需要、のみ全体にロードされていないということです。多くの人々がこの問題に遭遇してきた、antdあなたがあなた自身の引用、それらのアイコンを見つける必要があるため、公式には、この問題を回避するには、トラブルの少しを与えます。https：//github.com/ant-design/ant-design/issues/ 12011＃issuecomment-420038579

基本CSS

マイページでは、基本的に1つのテーブルのみを使用しますが、CSSのボリュームも数百キロバイトに達しantd。あなたはオンデマンドで読み込むことができますが、その理由は、CSSのantdされていますが、いくつかの基本的なベースのCSSは、包装されるはずです。これは、解決策を見つけることではありません。

moment.js

私はmoment.jsを使用していないが、antdもmoment.js、moment.jsを使用しています何の少量を取りません。これはmoment.jsの量を減らすことができるプラグインです。WebPACKの原理は、あなただけのロード言語パックを使用できるようにすることです。プラグインは、次のとおりです。新しい新しいのWebPACK 。ContextReplacementPlugin （/モーメント[ \ / \\ ] ロケール$ / 、 / ZH-CN / ）

LODS

また、私はlodashを使用しますが、用途がantdませんでした。梱包の量を低減するためのプラグインlodashのWebPACKのもあります：lodash-WebPACKの-プラグイン

2.使用して解決するために、公共のCDNをantd。

それはなぜ上記antd大きな理由を分析しました。いくつかは、このような問題の多くはCSSとして、解決されることはありません。だから、当然、我々は助けるが、中に詰めantdが、WebページにCDNそれによってantd導入を考えることはできませんか？CDN私のウェブサイトの帯域幅に行きません。答えはイエス、これは外観の設定のWebPACKのです。だから私は大きな問題を解決するために、CDNパッケージボリュームのantdを使用することにしました。

3. antdは、問題を解決するために定義されていません。

私たちはantdで構成された外観のWebPACKの中で、そうし始めています

  外観：{
     ' antd '：' antd ' 
  }、

そのページで紹介したCDN antd

<リンクのrel = " スタイルシート"のhref = " https://cdn.bootcss.com/antd/3.23.3/antd.min.css " > 
<スクリプトSRC = " https://cdn.bootcss.com/antd/ 3.23.3 / antd.min.js "タイプ= " テキスト/ javascriptの" > </ SCRIPT>

そうした後、直接、数百キロバイトまでのパッケージ全体のボリュームが、残念ながらオープニングページがantdが定義されていません登場しました。また、これは無力開始し、良い解決策へのオンライン検索です。その後、私はまた、依存antdミックスに追加する必要があります。この前CDNその他のリソースの理由を、直接導入することはできませんantdを見つけました。だから何が依存antdん？まず、反応し、反応-DOMをする必要があります。その後、ミックスに追加し、問題が残っています。だから、慎重に書類のantdを読んで、以下のが見つかりました：

＃支援的環境

    近代的なブラウザとIE9とは、上記（polyfillsが必要）。

    それは、オンデマンドでロードすることはできませんので、強く、ビルドファイルを使用することが推奨されており、根本的なバグに依存するモジュールクイックフィックスのサポートを得ることは困難です。

    注意：3.0 antd.jsの導入後に、あなたが自分自身の瞬間を導入する必要があります前に。

この勧告の下Tucao。強くファイルを使用することをお勧めしますが構築されていますが、方法は、ああ、antd負荷需要は確かに問題はありませんか。

私はバージョン3.xを使用し、そしてのでそれはまた、polyfillsモーメントを導入しました。プラスの後、最終的にそれ。そして、WebPACKを削除polyfillsは、反応し、（gzip圧縮前）100キロバイトの梱包の唯一の最終容量-DOMを反応させるため。

最終的なコード：

  外観：{
     ' 反応'：' リアクト' 、
     ' 反応-DOMを'：' ReactDOM ' 、
     ' antd '：' antd ' 
  }、

  <リンクのrel = " スタイルシート"のhref = " https://cdn.bootcss.com/antd/3.23.3/antd.min.css " > 
  <スクリプトSRC = " https://cdn.bootcss.com/babel-ポリフィル/ 7.6.0 / polyfill.min.js " > </ SCRIPT> 
  <スクリプトSRC = " https://cdn.bootcss.com/react/16.9.0/umd/react.production.min.js " > < /スクリプト> 
  <スクリプトSRC = " https://cdn.bootcss.com/react-dom/16.9.0/umd/react-dom.production.min.js " > </ SCRIPT> 
  <スクリプトSRC = " HTTPS： //cdn.bootcss.com/moment.js/2.24.0/moment.min.js "> </ SCRIPT> 
  <スクリプトSRC = "https://cdn.bootcss.com/moment.js/2.24.0/locale/zh-cn.js " > </ SCRIPT> 
  <スクリプトSRC = " https://cdn.bootcss.com/antd/3.23。 3 / antd.min.js "タイプ= " テキスト/ javascriptの" > </ SCRIPT>

CDN最高のCDNプラスフォールバック、との最後のヒントは、残念ながら別のCDNのために、そして、ハングアップ。

<スクリプト> window.antd ||にdocument.write（" <スクリプトSRC = "https://cdnjs.cloudflare.com/ajax/libs/antd/3.23.6/antd.min.js"> <\ /スクリプト> "）</ SCRIPT>

antdは過剰包装のボリュームの問題を解決するためにアリのデザインをdefined`されていない `解決を忘れないでください