如何解决Angular应用中'enable text compression'性能问题？

这个报错的核心是服务端返回JS、CSS、HTML、JSON、SVG这类文本类资源时，没有开启gzip或Brotli压缩，导致资源传输体积过大，按以下步骤配置即可解决：

一、先确认Angular生产构建配置正确 #

这步是基础，要是部署的是未压缩的开发构建包，服务端压缩效果也会打折扣：

• 部署时必须用生产构建命令：ng build --configuration production，Angular CLI会自动完成代码的精简、混淆、压缩，输出体积最优的构建产物。
• 检查angular.json配置，找到projects -> [你的项目名] -> architect -> build -> configurations -> production节点，确认两个核心优化开关没有被手动关闭：

"optimization": true,
"buildOptimizer": true

二、根据你的部署场景开启服务端压缩 #

性能工具检测的是HTTP响应头的压缩标识，压缩逻辑是在服务端/CDN层实现的，按自己的部署环境选对应配置即可：

Nginx部署 #

1. 打开Nginx配置文件（通常是nginx.conf或站点专属的配置文件），在http块或对应站点的server块中添加gzip压缩配置：

gzip on;
gzip_vary on;
gzip_min_length 1024; # 小于1KB的资源不压缩，避免压缩后体积反增
gzip_comp_level 6; # 压缩级别取1-9，6是CPU占用和压缩率的最优平衡点
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml
    font/ttf
    font/otf;

2. 如果要启用压缩率更高的Brotli，先确认Nginx已编译ngx_brotli模块，再追加配置：

brotli on;
brotli_comp_level 6;
brotli_min_length 1024;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/javascript
    application/x-javascript
    application/json
    application/xml
    application/rss+xml
    image/svg+xml
    font/ttf
    font/otf;

3. 执行nginx -t校验配置无语法错误后，执行nginx -s reload重载配置即可生效。

Apache部署 #

1. 打开Apache主配置文件或站点根目录的.htaccess文件，先确认mod_deflate模块已启用，添加gzip压缩规则：

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
</IfModule>

2. 要启用Brotli的话先确认mod_brotli模块已加载，追加对应规则：

<IfModule mod_brotli.c>
    AddOutputFilterByType BROTLI_COMPRESS text/plain
    AddOutputFilterByType BROTLI_COMPRESS text/css
    AddOutputFilterByType BROTLI_COMPRESS text/xml
    AddOutputFilterByType BROTLI_COMPRESS text/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/javascript
    AddOutputFilterByType BROTLI_COMPRESS application/x-javascript
    AddOutputFilterByType BROTLI_COMPRESS application/json
    AddOutputFilterByType BROTLI_COMPRESS application/xml
    AddOutputFilterByType BROTLI_COMPRESS application/rss+xml
    AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
</IfModule>

3. 重启Apache服务让配置生效。

Node.js（Express）托管/SSR部署 #

1. 先安装压缩中间件：npm install compression --save
2. 在Express入口文件中，在静态资源托管、路由注册之前启用压缩中间件：

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

// 启用gzip压缩
app.use(compression());
// 后续再写静态资源托管、SSR路由等逻辑
app.use(express.static('./dist/你的angular项目目录名'));

如果需要支持Brotli，可以替换为支持Brotli的压缩中间件，配置逻辑一致。

云存储/CDN部署 #

如果静态资源托管在对象存储、CDN服务上，直接登录对应服务的控制台，找到「Gzip压缩」「Brotli压缩」的功能开关手动开启即可，大部分云服务默认会对常见文本类型开启压缩，开启后等CDN缓存刷新完成就生效。

三、效果验证 #

配置完成后清空浏览器缓存，打开开发者工具的网络面板，刷新页面后任意选中一个JS/CSS资源，查看响应头：

• 如果存在Content-Encoding: gzip或Content-Encoding: br字段，说明压缩已经正常生效
• 重新运行性能检测工具，就不会再触发"enable text compression"的优化提示

注意：不要对JPG/PNG图片、MP4视频、woff2格式字体这类已经做过内置压缩的二进制资源开启文本压缩，这类资源重复压缩不仅没有体积收益，还会额外占用服务端CPU，甚至可能导致资源体积变大。

内容的提问来源于stack exchange，提问作者Eduard-Nicolae Brîndușoiu