Reactjs Web包生成和npm运行生成在react中的差异

我是react编程新手。我完成了我的项目，我正在努力理解构建优化技术。我的应用程序包含图形、antd和redux库。在完成我的项目后，我执行了npm运行构建和npm运行分析，包的组合大小显示为3MB。我使用webpack在互联网上搜索，我们可以减小构建的大小，然后我将webpack.config.js添加到我的项目中，并执行webpack--mode=production，bundle.js大小显示为5MB。我不明白我应该使用哪种方法

webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const withReport = process.env.npm_config_withReport
module.exports = {

    // webpack will take the files from ./src/index
    entry: './src/index',

    // and output it into /dist as bundle.js
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/'
    },

    devServer: {
        contentBase: path.join(__dirname, 'output'),
        compress: true,
        port: 3000,
        historyApiFallback: true,
        publicPath: '/'
    },

    // adding .ts and .tsx to resolve.extensions will help babel look for .ts and .tsx files to transpile
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },

    module: {
        rules: [

            // we use babel-loader to load our jsx and tsx files
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                },
            },

            // css-loader to bundle all the css files into one file and style-loader to add all the styles  inside the style tag of the document
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ico)$/,
                exclude: /node_modules/,
                loader: "file-loader"
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"]
            }

        ]
    },plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html',
            favicon: "./public/appicon.png",
            manifest: "./public/manifest.json"
        }),
        withReport ? new BundleAnalyzerPlugin() : '',
    ],
    optimization: {
        usedExports: true
    }
};

npm运行构建===>第一种方法。3MB

---

“构建”：“webpack--mode=production”，第二种方法==>5.2MB

您是如何创建react项目的？使用CreateReact应用程序？如果是，则您的项目正在使用webpack创建buildi使用create react app创建的项目，但如果我想添加更多压缩，如添加gzip，那么根据我的知识，我需要外部webpack配置。如果我用CreateReact应用程序内部创建项目，则节点模块包含网页包。是的，在这种情况下，您必须弹出网页包配置文件，或者您可以检查此问题-