如何使用 webpack 压缩设置 Content-Encoding 元数据标头？答案

【问题标题】：How to set Content-Encoding metadata headers with webpack compression?如何使用 webpack 压缩设置 Content-Encoding 元数据标头？
【发布时间】：2019-09-27 08:09:40
【问题描述】：

我喜欢npm run watch，但我的未压缩包为 7.5MB。我还通过 ngrok 将其用于 HTTPS 使用（和团队使用）。因此，进行简单的页面重新加载以检查 CSS 更新是否按预期工作需要相当长的时间。

如果我可以在开发过程中提供 gzip 压缩版本，那就太好了...但是每当我在本地创建 app.js.gzlocally 时，元数据标头都不会正确设置。

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

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

但是我试图在没有 S3 的情况下在本地执行此操作，因此我不必等待上传时间。那么如何设置这个元数据呢？使用 webpack？与阿帕奇？其他？

我正在使用 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,
            }),
        ],
    });

如果没有正确的元数据标头，浏览器不知道对 gzip 压缩文件进行膨胀，所以我只会收到一个控制台错误：Uncaught SyntaxError: Invalid or unexpected token

【问题讨论】：

嗨..你有解决方案吗？

标签： reactjs npm webpack gzip

【解决方案1】：

这是可能的：

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

查看this 文件作为示例。它对生产版本应用缩小和压缩（gzip 和 Brotli），但这可以更改。

【讨论】：

不错！我已经在使用 compresssion-webpack-plugin，但是如何在开发模式下使用它？
在示例中，您可以通过更改（例如注释掉）第 136 行来确保 webpack 在开发和生产中都使用压缩插件来实现这一点。您可以使用示例代码修改您的webpack.config.js，我认为它是由npm run watch 触发的。
我已经更新了我的问题，因为我意识到问题在于元数据标头设置不正确。每次都已经创建了 gzip 压缩文件。只是缺少 Content-Encoding 和 Content-Type 标头。你知道如何设置这个@winwiz1 吗？
浏览器首先表明它支持压缩并说明它愿意接受的特定类型的压缩。然后，如果可以，网络服务器会为它提供服务。在服务器端，最好不要花时间设置 http 标头，而让中间件将其作为有效的简单 2 路压缩协商的一部分。对于 Express，这一切都由 express-static-gzip 中间件完成。示例用法：在this 文件中搜索“expressStaticGzip”。