Webpack 和 Lighthouse 性能测试

Question

喂，

我是 webpack 的新手，经过艰苦的学习，我知道我什么都不知道 :-)。

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

1. 如何在浏览器中运行我的构建版本，以进行灯塔测试。目前我正在使用 npm run dist（在 package.json 下面）。这是可行的，但我觉得这不是正确的方法，我的 dist 文件夹被删除了。如果我使用 npx create-react-app 我可以为此使用 serve -s build。
2. 如果我进行 Lighthouse 性能测试，我会得到“启用文本压缩”。所以我安装了 compression-webpack-plugin 和 brotli-webpack-plugin。我现在在 dist 文件夹中有 br 和 gz 文件，但在 HTTP 响应标头中我没有得到 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

解决办法：

我添加了 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: "/"
},
...

Answer 2

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

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

文本压缩示例：

• Express.js
• Nginx