Reactjs 网页包4，React项目，包大小

在React项目中使用Webpack4，因此使用的NPM软件包很少，但捆绑包的大小很大，例如6MB

我已经阅读了Webpack4文档，了解如何缩小和构建可用于生产的捆绑包，但文件大小似乎没有减少那么多

我也尝试过拆分捆绑包，但没有真正成功。例如，试图将所有与React相关的软件包放入一个捆绑包中，但这会破坏web应用程序-浏览器会抛出错误，表示找不到软件包。不过我可能做错了什么

因此，我正在寻找一些帮助来改进我的构建设置，并将文件拆分成更小的文件，通常只是让事情变得更好

我的网页包4配置文件：

const path = require('path');
const precss = require('precss');
const webpack = require('webpack');
const packageJson = require('./package.json');
const autoprefixer = require('autoprefixer');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

const filenames = {
    css: '[name].bundle.css',
    js: '[name].bundle.js',
};

console.log('#########################################');

/* Cache busted names for production */
if (process.env.NODE_ENV === 'production') {
    console.log('#   XXXXXX v', packageJson.version, ' PRODUCTION   #');

    const timestamp = +new Date();

    filenames.css = `[name].bundle.${timestamp}.css`;
    filenames.js = `[name].bundle.${timestamp}.js`;
} else {
    console.log('#   XXXXXX v', packageJson.version, ' DEVELOPMENT   #');
}

console.log('#########################################');
console.log('');

module.exports = (env, options) => ({
    entry: './src/assets/js/Scheduler.jsx',
    output: {
        publicPath: '/',
        filename: `assets/js/${filenames.js}`,
        path: path.resolve(__dirname, 'public'),
    },
    watchOptions: {
        ignored: /node_modules/,
    },
    node: {
        fs: 'empty',
    },
    devtool: (options.mode === 'production') ? 'source-map' : 'cheap-module-source-map',
    devServer: {
        hot: true,
        watchContentBase: true,
        historyApiFallback: true,
        contentBase: path.join(__dirname, 'src'),
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules|bower_components/,
            use: [
                'babel-loader',
                'eslint-loader',
            ],
        }, {
            test: /\.(css)$/,
            exclude: /node_modules|bower_components/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    /* Interprets `@import` and `url()` like `import/require()` and will resolve them */
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        }, {
            test: /\.(scss)$/,
            exclude: /node_modules|bower_components/,
            use: [
                {
                    loader: 'css-hot-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                /**
                 * Commented out as we want to extract the styles into a seperate file which the mini CSS extract plugin will do.
                 * If you want to keep the styles within the scripts, comment this back in and comment out mini CSS extract plugin line below.
                 */
                /*
                {
                    loader: 'style-loader',
                    options: {
                        sourceMap: true,
                    },
                },
                */
                MiniCssExtractPlugin.loader,
                {
                    /* Interprets `@import` and `url()` like `import/require()` and will resolve them */
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    },
                }, {
                    /* Loader for webpack to process CSS with PostCSS */
                    loader: 'postcss-loader',
                    options: {
                        autoprefixer: {
                            browsers: ['last 3 versions'],
                        },
                        plugins: loader => [
                            precss(),
                            autoprefixer(),
                        ],
                        sourceMap: true,
                    },
                }, {
                    /* Loads a SASS/SCSS file and compiles it to CSS */
                    loader: 'sass-loader',
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        }, {
            test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            exclude: /node_modules|bower_components/,
            use: 'url-loader?limit=10000',
        }, {
            test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
            exclude: /node_modules|bower_components/,
            use: 'file-loader',
        }, {
            test: /\.(png|jp(e*)g|svg|gif)$/,
            exclude: /node_modules|bower_components/,
            use: [{
                loader: 'url-loader',
                options: {
                    limit: 8000, /* Convert images < 8kb to base64 strings */
                    name: 'assets/img/[name]-[hash].[ext]',
                },
            }],
        }, {
            test: /\.html$/,
            exclude: /node_modules|bower_components/,
            use: {
                loader: 'html-loader',
                options: {
                    minimize: true,
                },
            },
        }, {
            test: /bootstrap\/dist\/js\/umd\//,
            use: 'imports-loader?jQuery=jquery',
        }],
    },
    resolve: {
        extensions: ['*', '.jsx', '.js', '.scss', '.css', '.html'],
    },
    performance: {
        hints: false,
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: 'vendors',
                    chunks: 'initial',
                    test: /node_modules/,
                },
            },
        },
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true,
            }),
            new OptimizeCSSAssetsPlugin(),
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: `assets/css/${filenames.css}`,
        }),
        new HtmlWebPackPlugin({
            template: 'src/index.html',
            filename: 'index.html',
            hash: (options.mode === 'production'),
        }),
        new HtmlWebPackPlugin({
            template: 'src/404.html',
            filename: '404.html',
            hash: (options.mode === 'production'),
        }),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
        new webpack.HashedModuleIdsPlugin(),
        new CopyWebpackPlugin([
            {
                force: true,
                cache: true,
                to: 'assets/icons',
                from: 'src/assets/icons',
            }, {
                force: true,
                cache: true,
                to: 'assets/img',
                from: 'src/assets/img',
            }, {
                force: true,
                cache: true,
                to: 'assets/fonts',
                from: 'src/assets/fonts',
            }, {
                force: true,
                cache: true,
                to: 'assets/fonts',
                from: 'node_modules/font-awesome/fonts',
            },
        ]),
    ],
});

---

开发包的大小不是什么大问题，因为您在本地机器上工作。重要的是生产捆绑包应该最小化。因为当你的应用上线时，它会使用产品包。因此，更小的捆绑包意味着，托管平台提供的服务器将更快地发送生产资产

在生产模式下，您安装的软件包将自动删除库中用于开发过程的许多内容

**Minification**

缩小功能包括删除空白、删除注释、删除不需要的分号、减少十六进制代码长度

该文件仍然是完全有效的代码。你可能不想去读它或者用它工作，但它并没有违反任何规则。浏览器可以像读取原始文件一样读取和使用它

缩小只是改变文本，而文件压缩则完全重写文件中的二进制代码

  const TerserPlugin = require("terser-webpack-plugin");
  optimization:{
  minimize:true //this should be set
  minimizer:[new TerserPluign()]}

压缩生产中的资产

默认情况下使用gzip算法。Gzip是标准的，所有浏览器都能理解。在webpack.prod-client.js中

    `const CompressionPlugin = require("compression-webpack-plugin");

     plugins: [
          new CompressionPlugin(),
        ]`

这将压缩除“jpeg”图像以外的资源文件。因为jpeg已经是压缩文件类型

我们创建了gzip文件，但还不能加载它们。因为在“网络”选项卡中，文件的内容类型应该是gzip。我们需要更好的服务器配置

   npm i express-static-gzip

   const expressStaticGzip = require("express-static-gzip");
   server.use(expressStaticGzip("dist")); //make sure you use this middleware first

我们以gzip下载文件，但浏览器使用未压缩版本

Brotli是最初由Google开发的另一种压缩算法，其压缩性能优于gzip

  const BrotliPlugin = require("brotli-webpack-plugin");
  new BrotliPlugin(),
  server.use(expressStaticGzip("dist", { enableBrotli: true, orderPreference: ["br", "gzip"] }));

现在我们有了一组新的文件：原始文件、gz版本和br版本，它们甚至更小

---

网页包压缩将在构建运行期间一次性压缩您的文件。然后将这些压缩版本保存到磁盘。expressstaticgzip随后可以服务于这些预编译版本，因此您不会在请求时受到gzip性能的影响。如果Node.js直接响应您的HTTP请求，而您没有使用上游代理/负载平衡器，则此功能非常有用。

首先检查您是否真的需要这些软件包。是的，我只安装了所需的库。我还安装了源地图资源管理器，以查看哪些包增加了重量。您确定该构建是生产构建吗？2.尝试gzip包，应该会有帮助。

  const BrotliPlugin = require("brotli-webpack-plugin");
  new BrotliPlugin(),
  server.use(expressStaticGzip("dist", { enableBrotli: true, orderPreference: ["br", "gzip"] }));