Angular构建后，浏览器加载包时Estimated Transfer Size为何不匹配？

首先明确两个关键数值的含义：

• Raw Size：构建后文件的原始未压缩大小
• Estimated Transfer Size：开启gzip/brotli压缩后的预估传输大小

浏览器加载时显示Raw Size，说明服务器未配置静态资源压缩，导致返回的是原始文件而非压缩后的版本。以下是具体解决步骤：

1. 确保Angular生产构建的基础优化 #

使用生产模式构建项目，Angular会自动启用代码混淆、Tree Shaking等优化，减小原始文件大小：

# Angular 12+
ng build --configuration production
# 旧版本
ng build --prod

2. 预生成压缩文件（可选但推荐） #

通过webpack插件提前生成gzip/brotli压缩后的文件，减少服务器实时压缩的性能消耗：

• 安装依赖：

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

• 创建extra-webpack.config.js配置文件：

  const CompressionPlugin = require('compression-webpack-plugin');
  module.exports = {
    plugins: [
      new CompressionPlugin({
        algorithm: 'gzip',
        test: /\.(js|css|html|svg)$/,
        threshold: 8192, // 仅压缩大于8KB的文件
        minRatio: 0.8    // 压缩率低于0.8才生成压缩文件
      })
    ]
  };
  

• 修改angular.json中的构建配置，替换为自定义webpack构建器：

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js"
        },
        // 保留原有其他配置
      }
    }
  }
  

重新构建后，dist目录下会生成对应.gz后缀的压缩文件。

3. 服务器端配置压缩（核心步骤） #

服务器需要识别浏览器发送的Accept-Encoding请求头，返回对应的压缩文件：

Nginx配置 #

在站点配置中添加：

gzip on;
gzip_types text/css application/javascript application/json text/xml image/svg+xml;
gzip_min_length 1024;
# 若预生成了gz文件，开启静态压缩文件优先返回
gzip_static on;

Apache配置 #

启用mod_deflate和mod_headers模块后，添加：

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css application/javascript application/json text/xml image/svg+xml
</IfModule>

Node.js（Express）配置 #

使用compression中间件：

const compression = require('compression');
const express = require('express');
const app = express();

// 启用压缩中间件（需放在静态资源托管之前）
app.use(compression());
app.use(express.static('dist/your-project-name'));

app.listen(3000);

4. 验证效果 #

打开Chrome开发者工具的Network面板，刷新页面后查看main.js的响应头：

• 若存在Content-Encoding: gzip（或br），说明压缩生效
• Size列会显示传输大小（与Estimated Transfer Size接近）和原始大小，此时浏览器加载的就是压缩后的文件

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