Webpack 和 Lighthouse 性能测试

Question

嗨，

我是 webpack 的新手，经过努力学习，我知道我一无所知:-)。

我正在使用 React，我有 2 个问题：

如何在浏览器中运行我的构建版本，用于灯塔测试。目前我正在使用 npm 运行 dist（低于 package.json）。哪个有效，但我觉得这不是正确的方法，我的 dist 文件夹被删除了。如果我使用 npx create-react-app 我可以为此使用 serve -s build。
如果我进行 Lighthouse 性能测试，我会得到“启用文本压缩”。所以我安装了compression-webpack-plugin和brotli-webpack-plugin。我现在在 dist 文件夹中有 br 和 gz 文件，但在 HTTP 响应中 header 我没有得到 Content-Encoding: br or gzip 和 lighthouse 仍然有问题我为此。

package.jsong

"scripts": {
        "start": "webpack-dev-server --config webpack.dev.js --open --progress --colors --hot",
        "dist": "webpack-dev-server --config webpack.prod.js --open  --mode production",
        "build": "webpack --config webpack.prod.js"
}

webpack.common.js

const HtmlWebPackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    entry: {
        main: "./src/index.js"
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: {
                            attributes: true
                        }
                    }
                ]
            },
            {
                test: /\.(svg|png|jpg|gif|webp|jpeg)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "imgs"
                    }
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: "./src/index.html",
            filename: "./index.html"
        })
    ]
};

webpack.dev.js

var path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");

module.exports = merge(common, {
    mode: "development",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        publicPath: "/"
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./dist"
    }
});

webpack.prod.js

var path = require("path");
const { merge } = require("webpack-merge");
const common = require("./webpack.common");
const CompressionPlugin = require("compression-webpack-plugin");
const BrotliPlugin = require("brotli-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = merge(common, {
    mode: "production",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].bundle.js"
    },
    devtool: "source-map",
    performance: {
        hints: false
    },
    optimization: {
        splitChunks: {
            chunks: "all"
        },
        minimizer: [
            new TerserPlugin({
                parallel: true,
                cache: true,
                sourceMap: true
            })
        ]
    },
    plugins: [
        new CompressionPlugin({
            filename: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.(js|html|svg)$/,
            threshold: 8192,
            minRatio: 0.8
        }),
        new BrotliPlugin({
            asset: "[path].br[query]",
            test: /\.(js|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
});

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": [["@babel/transform-runtime"]]
}

感谢任何帮助。

Answer 1

如果您运行构建脚本，您将获得可以部署在网络服务器上的优化代码。运行 npx serve build 将是使用构建文件模拟网络服务器的简单方法。我猜 dist 脚本使用 webpack 开发服务器做同样的事情。

文本压缩是您通常会在托管您网站的网络服务器或代理上配置的内容。我猜这些 webpack 插件做同样的事情，但它通常是网络服务器或代理中的一个衬里，你不必干扰 create-react-app 标准配置。

文本压缩示例：

Answer 2

这里是解决方案：

我加了server.js

const express = require("express");
const path = require("path");
const port = 8080;
const app = express();

app.get("*.js", (req, res, next) => {
    req.url = req.url + ".br";
    res.set("Content-Encoding", "br");
    res.set("Content-Type", "application/javascript; charset=UTF-8");
    next();
});

app.use(express.static("./dist"));

app.get("*", (req, res) => {
    res.sendFile(path.resolve("./dist", "index.html"));
});

app.listen(port);
console.log("Server started");

也改变了我的package.json

  "scripts": {
        "stard": "webpack-dev-server --config webpack.dev.js --open --progress --colors --hot",
        "build": "webpack --config webpack.prod.js",
        "prod": "node server.js"
},

必须添加到我的 webpack.prod.js publicPath: "/"

...
output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].[hash].bundle.js",
        publicPath: "/"
},
...

Webpack 和 Lighthouse 性能测试

Webpack and Lighthouse performance test

performance-testing

lighthouse

reactjs

webpack