reactjs - 250ページ(33MB)のreactjsプロジェクトをwebpackで最適化するには?

Question

react.js 16.13.1 を使用しています。私たちのプロジェクトには 250 以上のページがあります。Webpackでビルドすると33MBです。それは巨大なサイズです。平均的なインターネット速度でロードするのに 30 秒かかります。Webpack 4 を使用しています。また、コード分割も使用しています。

Webpack 構成に使用される次の規則。しかし、まだ最適化されていません。Webpack Bundle Analyzerを使用して、/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')
            }
        })
    ]
};