如何在 Angular 项目的 webpack 中配置 gzip 压缩？答案

【问题标题】：How to configure gzip compression in webpack of angular project?如何在 Angular 项目的 webpack 中配置 gzip 压缩？
【发布时间】：2019-12-02 11:55:07
【问题描述】：

Gzip 压缩不适用于在 iis 中托管后使用 webpack 3.10.0 的 angular 5 项目。我试过的插件是 compression-webpack-plugin@1.0.0 和 brotli-gzip-webpack-plugin。

下面显示的是示例代码，插件包含在生产配置中。

const BrotliGzipPlugin = require('brotli-gzip-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
    plugins: [
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.(js|html)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new BrotliGzipPlugin({
            asset: '[path].br[query]',
            algorithm: 'brotli',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        }),
        new BrotliGzipPlugin({
            asset: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.(js|css|html|svg)$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
}

预计会加载较小大小的文件，并在响应标头中包含类似于 content-encoding: gzip 的内容。

为什么在 prod 模式下文件不替换为 gz 版本？
是否有任何 IIS 配置可以使其工作？

这是我构建的样子，它也有 gzip、brotli 文件。

【问题讨论】：

标签： angular iis webpack http-compression

【解决方案1】：

通过 ASP.Net core 提供压缩文件时，需要使用 CompressedStaticFiles 中间件。

在Startup.Configure(). 中放置app.UseCompressedStaticFiles(); 而不是app.UseStaticFiles();

这将确保您的应用程序在浏览器支持的情况下提供预压缩的 gzipped 和 brotli 压缩文件。

详情请参考brotli-gzip-webpack-plugin。

【讨论】：

【解决方案2】：

GZIP 压缩通常是您的网络服务器（如 Apache、Nginx 或在您的情况下为 IIS）的任务。

看看这个帖子：https://stackoverflow.com/a/27496937/3634274

【讨论】：

我已经尝试了该答案中提到的内容，然后是一个。它仍然采用构建中的普通文件而不是 gzip 压缩文件。不能完全说这是服务器的任务，因为在 webpack 中，它们在 prod 模式构建期间创建压缩文件，在我的情况下不是引用的。
当您从服务器启用 gzip 时，您只能在浏览器的网络选项卡中看到结果，例如就像 chrome 开发工具网络选项卡一样，当一切设置正常时，您可以看到大量减少的文件。您将文件从默认构建保存到 iis 中的特定站点文件夹
感谢您的解释。我已将我的构建图像添加到问题正文中。如果压缩是由 Web 服务器执行的，为什么它会包含压缩文件？