ant design - huge imports

UPD: the underlying issue seems to be resolved for the new (4.0) version of antd.
Therefore, if you try to resolve this issue for the earlier versions, the recommended way is to migrate onto antd 4

Previous answer:

At the moment, a huge part of antd dist is SVG icons.
There is no official way to deal with it yet (check the issue on github).

But a workaround exists.

1. Adapt webpack to resolve icons differently. In your webpack config:

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

2. Create icons.js in the folder src/ or wherever you want it. Be sure it matches the alias path!
   In this file you define which icons antd should include.

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

It's also possible to do this with react-app-rewire (create-react-app modifications) within config-overwrites.js

1) Prevent antd to load the all moment localization. Add webpack plugin and configure it in webpack.config.js like the follow:

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

2) Use the same moment version as in antd library.

3) Use modularized antdUse babel-plugin-import

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

I use BundleAnalyzerPlugin to analyze the bundle.

plugins: [new BundleAnalyzerPlugin()]

Looking at the docshttps://ant.design/docs/react/getting-started#Import-on-Demandthere is a recommedation to import individual components on demand.So, you can try and replace

import { Button} from 'antd' 

with

import Button from 'antd/lib/button'