How to optimize a 250 pages(33MB) reactjs project with webpack?

Question

We are using react.js 16.13.1. Our project has more than 250+ pages. After building using Webpack, it is 33MB. It is a huge size. It is taking 30s to load with an average internet speed. We are using Webpack 4. Also, we are using code splitting.

The following rules used for the Webpack configuration. But still not optimizing. Found the size which is coming from /src folder using Webpack Bundle Analyzer

Or instead of webpack, any other option available for better optimization.

Please help me to resolve this issue.

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')
            }
        })
    ]
};