Angular Universal中启用Gzip压缩后网站无限加载的问题解决

看起来你遇到的问题大概率是compression中间件的使用方式不对，或者和Angular Universal的SSR流程顺序冲突了。我来一步步帮你排查修复：

1. 最常见错误：没有调用compression函数生成中间件 #

你现在写的是：

server.use(compression);

但compression本身是一个返回中间件的工厂函数，不是直接的中间件实例。正确的写法应该是调用它：

server.use(compression()); // 注意括号！

这个小疏忽会导致Express无法正确处理请求，进而引发无限加载的情况——因为中间件没有被正确初始化，请求一直处于挂起状态。

2. 确保compression中间件的加载顺序正确 #

在Angular Universal的server.ts中，compression中间件必须放在所有路由处理（包括Angular的SSR渲染路由）之前。这样所有的响应才会被正确压缩。

正确的代码顺序示例：

import express from 'express';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
import compression from 'compression'; // 推荐用ES模块import代替require

const app = express();
const PORT = process.env.PORT || 4000;
const distFolder = join(process.cwd(), 'dist/browser');
const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

// 第一步：启用Gzip压缩
app.use(compression());

// 第二步：处理静态文件（如果有的话）
app.get('*.*', express.static(distFolder, {
  maxAge: '1y'
}));

// 第三步：处理Angular SSR路由
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

app.set('view engine', 'html');
app.set('views', distFolder);

app.get('*', (req, res) => {
  res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
});

app.listen(PORT, () => {
  console.log(`Node Express server listening on http://localhost:${PORT}`);
});

3. 排查中间件冲突或配置问题 #

如果上面两步还没解决，试试调整compression的配置，避免和其他中间件或SSR流程冲突：

• 设置压缩阈值，只压缩体积大于一定大小的文件（比如1KB），避免小文件压缩反而增加开销
• 排除某些不需要压缩的路由或文件类型

示例配置：

app.use(compression({
  threshold: 1024, // 仅压缩大于1KB的响应
  filter: (req, res) => {
    // 排除API请求（如果你的API返回的小体积JSON不需要压缩）
    if (req.path.startsWith('/api/')) {
      return false;
    }
    // 使用默认的过滤逻辑处理其他请求
    return compression.filter(req, res);
  }
}));

4. 用ES模块语法替代require #

Angular Universal项目通常用TypeScript，推荐用import代替require来引入compression，避免模块加载的潜在问题：

// 代替 const compression = require('compression');
import compression from 'compression';

按照上面的步骤调整后，重启你的服务器，应该就能正常加载并启用Gzip压缩了。你可以用浏览器的DevTools（Network标签）查看响应头，确认Content-Encoding: gzip是否存在，以此验证压缩是否生效。

内容的提问来源于stack exchange，提问作者Milan Ferus-Comelo