Reactjs 网页及灯塔性能测试

Hy

我是新来的网页，经过努力学习，我知道我什么都不知道：-）

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

如何在浏览器中运行构建版本，以进行lighthouse测试。目前我正在使用npm run dist（在package.json下面）。这是工作，但我觉得这是不正确的方式，我的dist文件夹被删除。如果我使用npx create react应用程序，我可以使用serve-s构建

如果我进行Lighthouse性能测试，我会得到“启用文本压缩”。所以我安装了压缩网页包插件和brotli网页包插件。我现在在dist文件夹中有br和gz文件，但在HTTP响应头中我没有得到内容编码：br或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
        })
    ]
});

B.法律改革委员会

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

---

THX提供任何帮助。

如果运行构建脚本，您将获得可部署在Web服务器上的优化代码。运行

npxservebuild

将是用bulid文件模拟web服务器的一种简单方法。我猜dist脚本使用webpack dev服务器也会这样做

文本压缩通常是在承载网站的Web服务器或代理上配置的内容。我猜这些webpack插件也可以做同样的事情，但它通常是Web服务器或代理中的一行程序，您不必干扰CreateReact应用程序标准配置

文本压缩示例：

解决方案如下：
我添加了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");

还更改了my 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: "/"
},
...