如何为Angular项目配置Gzip压缩？后端采用ASP.NET Core

我来帮你搞定Angular结合ASP.NET Core的Gzip压缩配置，分后端启用、前端预压缩、验证三步，一步步来：

一、ASP.NET Core后端启用Gzip压缩 #

首先要在后端配置响应压缩中间件，它会自动对符合条件的请求资源进行Gzip压缩。下面分两种项目结构给出配置：

1. .NET 6+ 顶层级Program.cs配置 #

在你的Program.cs中添加响应压缩服务，并确保中间件顺序正确（要放在静态文件和路由中间件之前）：

var builder = WebApplication.CreateBuilder(args);

// 注册响应压缩服务
builder.Services.AddResponseCompression(options =>
{
    options.EnableForHttps = true; // 允许HTTPS环境下启用压缩
    // 指定要压缩的MIME类型，覆盖默认值以包含Angular的静态资源
    options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
    {
        "text/javascript",
        "application/javascript",
        "text/css",
        "text/html",
        "application/json",
        "image/svg+xml" // Angular项目中常用的SVG资源
    });
});

// 注册其他必要服务（比如MVC）
builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用响应压缩中间件
app.UseResponseCompression();

// 配置静态文件服务，指向Angular的dist目录
app.UseStaticFiles(new StaticFileOptions
{
    // 允许服务.gz这类默认不识别的文件类型（如果用前端预压缩的话）
    ServeUnknownFileTypes = true,
    // 为静态资源添加缓存头，配合压缩提升加载速度
    OnPrepareResponse = ctx =>
    {
        ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000");
    }
});

// 其他中间件配置
app.UseRouting();
app.UseAuthorization();

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

app.Run();

2. .NET 5及以前Startup.cs配置 #

如果你的项目用的是传统Startup.cs结构，配置逻辑类似：

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddResponseCompression(options =>
        {
            options.EnableForHttps = true;
            options.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat(new[]
            {
                "text/javascript",
                "application/javascript",
                "text/css",
                "text/html",
                "application/json",
                "image/svg+xml"
            });
        });
        services.AddControllersWithViews();
    }

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        // 异常处理等中间件...
        
        app.UseResponseCompression();
        
        app.UseStaticFiles(new StaticFileOptions
        {
            ServeUnknownFileTypes = true,
            OnPrepareResponse = ctx =>
            {
                ctx.Context.Response.Headers.Append("Cache-Control", "public, max-age=31536000");
            }
        });
        
        app.UseRouting();
        app.UseAuthorization();
        
        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
        });
    }
}

二、Angular前端预压缩资源（可选但推荐） #

上面的后端配置是实时压缩请求资源，如果你想进一步降低后端CPU开销，可以让Angular构建时直接生成预压缩的.gz文件，后端直接返回这些现成的压缩文件。

1. 安装依赖 #

在Angular项目根目录执行命令，安装自定义webpack构建工具和压缩插件：

npm install @angular-builders/custom-webpack compression-webpack-plugin --save-dev

2. 修改angular.json配置 #

找到项目architect下的build节点，替换默认builder为自定义webpack版本，并指定配置文件路径：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      // 保留你原有的outputPath、index、main等配置
    },
    "configurations": {
      "production": {
        // 保留原有的production配置
      }
    }
  },
  // 其他architect节点（比如serve）
}

3. 创建webpack.config.js #

在项目根目录新建webpack.config.js，配置CompressionPlugin生成.gz文件：

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

module.exports = {
  plugins: [
    new CompressionPlugin({
      algorithm: 'gzip', // 指定压缩算法为Gzip
      test: /\.(js|css|html|svg)$/, // 要压缩的文件类型
      threshold: 8192, // 文件大小超过8KB才进行压缩
      minRatio: 0.8 // 压缩率低于0.8才保留压缩文件（避免无效压缩）
    })
  ]
};

4. 构建Angular项目 #

执行生产构建命令，dist目录下会自动生成对应资源的.gz文件：

ng build --prod

三、验证Gzip压缩是否生效 #

打开Chrome开发者工具（F12），切换到Network标签，刷新页面：

• 找到Angular的js、css等核心资源，查看Response Headers中是否存在Content-Encoding: gzip字段
• 查看Size列，会显示压缩后的文件大小（比如原文件1MB，压缩后通常在200-300KB左右）

如果用了前端预压缩，还可以通过请求详情确认后端是否直接返回了预生成的.gz文件内容。

内容的提问来源于stack exchange，提问作者Hamid