时间戳

首页 > 解决方案 > 如何在 Angular 项目的 webpack 中配置 gzip 压缩？

angular - 如何在 Angular 项目的 webpack 中配置 gzip 压缩？

问题描述

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的内容。

在此处输入图像描述

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

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

在此处输入图像描述

标签： angulariiswebpackhttp-compression

解决方案

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

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

如果浏览器支持，这将确保您的应用程序将提供预压缩的 gzipped 和 brotli 压缩文件。

有关详细信息，请参阅brotli-gzip-webpack-plugin。

推荐阅读