ant design - huge imports

Question

I\'m using ant design library for my react application.

And I\'ve faced with huge imports, that hurts my bundle (currently 1.1 mb in minified version because of ant-

Answer 1

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 antd Use 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()]