reactjs - 如何使用 webpack 压缩设置 Content-Encoding 元数据 header ？

Question

我喜欢 npm run watch 但我的未压缩包是 7.5MB。我还通过 ngrok 隧道传输它以供 HTTPS 使用(和团队使用)。因此，执行简单的页面重新加载以检查 CSS 更新是否按预期工作需要相当长的时间。

如果我可以在开发过程中提供 gzip 版本，那就太好了......但是每当我在本地创建 app.js.gz 时，元数据 header 都没有正确设置。

在 AWS S3 上，我可以轻松设置 header :Content-Encoding: gzip 和 Content-Type: text/javascript

通过 S3 存储桶，这些元数据 header 告诉浏览器扩充文件，然后网站正确呈现。

但是我正在尝试在没有 S3 的情况下在本地执行此操作，因此我不必等待上传时间。那么我该如何设置这个元数据呢？用网络包？与 Apache ？其他？

我正在使用 Laravel 后端和带有 compression-webpack-plugin 的 React-Redux 前端

这是我的 webpack.mix.js:

const mix = require('laravel-mix');
const CompressionPlugin = require('compression-webpack-plugin');

mix.react('resources/js/app.js', 'public/js')
    .webpackConfig({
        plugins: [
            new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: /\.js$|\.css$|\.html$|\.svg$/,
                threshold: 10240,
                minRatio: 0.8,
            }),
        ],
    });

如果没有正确的元数据 header ，浏览器就不知道要扩充 gzip 文件，所以我只会收到一个控制台错误:Uncaught SyntaxError: Invalid or unexpected token

Answer 1

这是可能的:

const BrotliPlugin = require('brotli-webpack-plugin');
const CompressionPlugin = require("compression-webpack-plugin")

看看this文件作为样本。它对生产构建应用缩小和压缩(gzip 和 Brotli)，但这可以更改。