Antd webpack packing

problem description

antd package jsBundle is too large

the environmental background of the problems and what methods you have tried

the packaged antd has more than 600 KB, which is too large, and the webpack requirement is less than 244KB

.

related codes

package.json file
{
"name": "react",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {

"build": "webpack --progress --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js --progress"

},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {

"@babel/core": "^7.2.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.2.3",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"babel-minify-webpack-plugin": "^0.3.1",
"babel-plugin-import": "^1.11.0",
"clean-webpack-plugin": "^1.0.0",
"css-loader": "^2.1.0",
"file-loader": "^3.0.1",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.11.0",
"prop-types": "^15.6.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"

},
"dependencies": {

"antd": "^3.12.3",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1"

}
}

webpack configuration file
"use strict";
const path = require ("path");
const HtmlPlugin = require (" html-webpack-plugin");
const CleanPlugin = require ("clean-webpack-plugin");
const MinifyJSPlugin = require ("babel-minify-webpack-plugin");

/ / restart is required after configuration modification
module.exports = {

//
entry: {
    main: "./src/index.js"
},

//
output: {
    path: path.resolve(__dirname, "./dist/"),
    filename: "[name].js?hash=[hash]",
},

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            include: path.resolve(__dirname, "./src"),
            exclude: path.resolve(__dirname, "./node_modules"),
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/env", "@babel/react"],
                    plugins: [
                        "@babel/plugin-syntax-dynamic-import",
                        ["import", {
                            //antd
                            libraryName: "antd",
                            style: "css" // `style: true`  less 
                        }]
                    ]
                }
            }
        },

        //SCSSantdcss
        {
            test: /\.(scss|css)$/,
            exclude: /node_modules|antd\.css/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader",
                    options: {
                        modules: true
                    }
                },
                {
                    loader: "sass-loader"
                }
            ]
        },


        //antdcss
        {
            test: /\.css$/,
            include: /node_modules|antd\.css/,
            use: [
                {
                    loader: "style-loader"
                },
                {
                    loader: "css-loader"
                }
            ]
        },


        //html
        {
            test: /\.html$/,
            use: [
                {
                    loader: "html-loader",
                    options: {
                        minimize: true,
                        removeComments: true,
                        collapseWhitespace: true
                    }
                }
            ],
        },

        //
        {
            test: /\.(png|jpg|jpeg|gif)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 10000
                    }
                },
                {
                    loader: "image-webpack-loader",
                    options: {
                        //jpeg
                        mozjpeg: {
                            progressive: true,
                            quality: 65
                        },
                        //png
                        optipng: {
                            enabled: false,
                        },
                        pngquant: {
                            quality: "65-90",
                            speed: 4
                        },
                        //gif
                        gifsicle: {
                            interlaced: false,
                        },
                        // //JPGPNGwebp
                        // webp: {
                        //     quality: 75
                        // }
                    }
                }
            ]
        },

        //
        {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            use: [
                {
                    loader: "url-loader",
                    options: {
                        limit: 10000
                    }
                }
            ]
        }
    ]
},

//
mode: "production",

//
devServer: {
    contentBase: "./src",
    port: 4000,
    open: true,
    proxy: {}
},

//
plugins: [
    new HtmlPlugin({
        template: "./src/index.html"
    }),
    new CleanPlugin("./dist"),
    new MinifyJSPlugin({
        removeConsole: true,
        removeDebugger: true
    }, {
        comments: false
    })
],

//
resolve: {
    //import, js
    extensions: [".jsx", ".json", ".js"],
},

//
optimization: {
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/](react|react-dom|react-router-dom|axios)/,
                name: "vendors",
                chunks: "all"
            },
        }
    }
}

};

what result do you expect? What is the error message actually seen?

the packaged antd package is smaller than 244KB

Apr.27,2022
Menu