1

我们正在使用 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')
            }
        })
    ]
};
4

0 回答 0