Ant Design - Huge Import

Question

I use and design a library for my application.

And I came across a huge import that harms my package (currently 1.1 MB in a miniature version due to the ant-design library).

How can I import AntD components in different ways through my entire application?

UPDATE:

There seem to antdbe some huge or non-optimized modules. That's the point - the difference is only in importing the Datepicker module and ... boom! + almost 2 MB (included in the development kit)

Answer 1

1) antd . webpack webpack.config.js, :

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

2) , antd-.

3) antd babel-plugin

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

BundleAnalyzerPlugin .

plugins: [new BundleAnalyzerPlugin()]

Answer 2

, , 1.2M . , , .

antd , babel-plugin-import. " antd", .

docs Create-React-App, , , CRA.

Answer 3

webpack . . ant framework.

Answer 4

https://ant.design/docs/react/getting-started#Import-on-Demand, . ,

import { Button} from 'antd' 

import Button from 'antd/lib/button'