web-dev-qa-db-ja.com

蟻のデザイン-巨大な輸入品

反応アプリケーションに および設計ライブラリ を使用しています。

そして私は巨大なインポートに直面しました。それは私のバンドルを傷つけます（現在、ant-design libのために縮小版では1.1 mb）。

すべてのアプリからantdコンポーネントを異なる方法でインポートするにはどうすればよいですか？

enter image description here

UPDATE：

antdにはいくつかの巨大な、または最適化されていないモジュールがあるようです。ここでのこと-唯一の違いは、Datepickerモジュールのインポートとブームです！ +ほぼ2MB（開発バンドルofc内）

enter image description here

reactjsantd
20
WebArtisan

現時点では、antd distの大部分はsvgアイコンです。
これに対処する公式の方法はまだありません（ githubで問題を確認してください ）。

ただし、 回避策 が存在します。

  1. アイコンを別の方法で解決するようにwebpackを調整します。 webpack configで：
module.exports = {
  //...
  resolve: {
    alias: {
      "@ant-design/icons/lib/dist$": path.resolve(__dirname, "./src/icons.js")
    }
  }
};
  1. icons.jsフォルダーまたは任意の場所にsrc/を作成します。エイリアスパスと一致することを確認してください！
    このファイルでは、antdに含めるアイコンを定義します。
export {
  default as DownOutline
} from "@ant-design/icons/lib/outline/DownOutline";

react-app-rewire内でconfig-overwrites.js（create-react-appモディフィケーション）を使用してこれを行うこともできます。

10
Daydreaming Duck

1）antdがすべてをロードしないようにしますモーメントローカリゼーション。 webpackプラグインを追加し、webpack.config.jsで次のように構成します。

_plugins: [
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /ru/),
],
resolve: {
    alias: {moment: `moment/moment.js`}
},
target: `web`
}
_

2）antdライブラリと同様にsame moment versionを使用します。

3）Use modularized antd Use babel-plugin-import

_// .babelrc or babel-loader option
{
  "plugins": [
    ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
    // `style: true` for less
  ]
}
_

BundleAnalyzerPluginを使用してバンドルを分析します。

plugins: [new BundleAnalyzerPlugin()]

7
sultan

ドキュメントを見る https://ant.design/docs/react/getting-started#Import-on-Demand 個々のコンポーネントをオンデマンドでインポートすることを推奨します。だから、あなたは試すことができます

import { Button} from 'antd'

と

import Button from 'antd/lib/button'
3
partyelite

これらの少数のコンポーネントは、確かに一緒に1.2Mではありません。少数のコンポーネントのみが必要な場合、ライブラリ全体をインポートしているように見えます。

antdを取得して必要なモジュールのみをロードするには、 babel-plugin-import を使用する必要があります。そのリンクで説明されている「antdのパッケージ全体を使用しています」という警告については、コンソールログを確認してください。

CRAを使用している場合の実装方法については、 Create-React-Appのドキュメント をご覧ください。

2
Jesper We

code splitting を使用してみてください。webpackとreact routerを使用してください。モジュールを非同期にロードするのに役立ちます。これは、antフレームワークを使用する場合にページの読み込み時間を改善するのに役立つ唯一のソリューションです。

0
Sivadass N