如何使用webpack优化250页（33MB）的reactjs项目？

我们正在使用react.js 16.13.1。我们的项目有超过250页。使用Webpack构建后，它是33MB。它是一个巨大的尺寸。以平均互联网速度加载需要30秒。我们正在使用Webpack4。此外，我们正在使用代码拆分

以下规则用于网页包配置。但仍然没有优化。使用找到来自/src文件夹的大小

也可以使用其他选项代替webpack进行更好的优化

请帮我解决这个问题

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    mode         : 'production',
    entry        : path.resolve(__dirname, './src/index.js'),
    output       : {
        path     : path.resolve(__dirname, 'dist'),
        filename : '[name].[contenthash].js'
    },
    mode         : process.env.NODE_ENV || 'production',
    devtool      : 'eval-source-map',
    resolve      : {
        modules : [ path.resolve(__dirname, 'src'), 'node_modules' ]
    },
    devServer    : {
        historyApiFallback : true,
        port               : 8000
    },
    module       : {
        rules : [
            {
                test    : /\.js$/,
                exclude : /node_modules/,
                use     : {
                    loader  : 'babel-loader',
                    options : {
                        presets : [ '@babel/preset-env' ]
                    }
                }
            },
            {
                test : /\.s[ac]ss$/i,
                use  : [ 'style-loader', 'css-loader', 'sass-loader' ]
            },
            {
                test : /\.css$/i,
                use  : [ 'style-loader', 'css-loader' ]
            },
            {
                test : /\.(png|svg|woff|woff2|eot|ttf|otf)$/,
                use  : [ 'url-loader?limit=100000' ]
            }
        ]
    },
    optimization : {
        splitChunks : {
            chunks      : 'initial',
            minSize     : 20000,
            maxSize     : 10000,
            cacheGroups : {
                default  : false, // disable the built-in groups, default & vendors (vendors is overwritten below)
                reactDom : {
                    test     : /[\\/]node_modules[\\/]react-dom[\\/]/,
                    name     : 'vendor.react-dom',
                    enforce  : true,
                    priority : 20
                },
                vendors  : {
                    test     : /[\\/]node_modules[\\/]/,
                    name     : 'vendors',
                    priority : 10,
                    enforce  : true
                }
            }
        }
    },
    plugins      : [
        new HtmlWebpackPlugin({
            template : path.join(__dirname, 'src', 'index.html')
        }),
        new MiniCssExtractPlugin({
            filename : '[hash].css'
        }),
        new webpack.DefinePlugin({
            'process.env' : {
                NODE_ENV : JSON.stringify('production')
            }
        })
    ]
};

---

坦率地说，我不知道如何将33mb优化到3mb。分割块不起作用吗？坦白说，我不知道如何优化33mb到3mb。分割块不起作用吗？