EC2实例上Node服务器加载Angular5页面耗时超10秒求助

这个问题挺典型的——单独访问Bundle快，但通过HTML加载就慢，说明问题大概率出在服务器处理HTML请求的逻辑或者页面加载的协同流程上，而不是Bundle文件本身的传输。我整理几个常见的排查方向和解决方案：

1. 检查Node服务器的静态资源处理逻辑 #

如果你的Node服务器是自定义的静态文件服务，或者没有用优化过的中间件（比如Express的express.static），很可能在处理HTML请求时没做缓存、压缩，导致每次都要重复读取文件或传输未压缩的内容。

建议用express.static配合压缩和缓存配置，示例代码如下：

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

// 先启用gzip压缩，所有响应都会被压缩
app.use(compression());

// 配置静态资源目录，给Bundle等静态文件设置长缓存
app.use(express.static(path.join(__dirname, 'dist'), {
  maxAge: '7d', // 缓存7天，根据你的更新频率调整
  etag: true, // 启用ETag验证，避免不必要的重复下载
  lastModified: true
}));

// 所有路由请求都返回Angular的入口HTML，确保单页应用的路由正常
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));
});

app.listen(3000, () => console.log('Server running on port 3000'));

这里要注意：单独访问Bundle快是因为浏览器直接请求静态文件，而加载HTML时，如果服务器每次都无缓存读取index.html，或者没有压缩HTML，就会拖慢整体响应速度。

2. 排查Angular路由的服务器Fallback逻辑 #

Angular是单页应用，当用户刷新页面或访问非根路由时，服务器需要返回index.html。如果你的Fallback逻辑有同步IO操作（比如同步读取文件）、或者做了不必要的计算，就会阻塞Node的事件循环，导致响应延迟。

• 确保返回index.html的逻辑是异步且无额外开销的，不要在这个路由处理函数里加数据库查询、文件读写之外的操作。
• 检查是否有路由匹配逻辑错误，导致请求多次重定向（重定向会增加往返时间）。

3. 检查EC2实例的资源使用率 #

虽然单独访问Bundle快，但加载HTML时可能触发了服务器的额外资源消耗，比如Node进程内存不足导致GC频繁，或者CPU被占满。

• 登录EC2控制台，查看CloudWatch的CPU使用率、内存、磁盘IO指标，看看在页面加载请求到达时，资源是否接近上限。
• 如果内存不足，可以升级EC2实例规格，或者启动Node进程时添加--max-old-space-size=4096（根据实例内存调整数值）来增加Node的可用内存。

4. 检查index.html中的资源引用问题 #

有时候HTML本身的内容会阻塞Bundle的加载：

• 检查index.html是否有大量内联的JS/CSS，或者同步加载的第三方脚本，这些会让浏览器先处理完内联内容，才会去请求Bundle。
• 确认Bundle的引用路径是否正确，避免因为路径错误导致的301重定向（重定向会额外增加请求耗时）。
• 尽量使用<link rel="preload">预加载关键Bundle文件，让浏览器提前发起请求：

  <link rel="preload" href="main.bundle.js" as="script">
  

5. 优化服务器的网络配置 #

• 检查EC2的安全组和NACL配置，确保80/443端口没有额外的规则导致延迟。
• 启用HTTP/2，它支持多路复用请求，能减少页面加载时的TCP握手延迟。如果用Express，可以借助spdy库或者升级到Node 12+原生支持HTTP/2。

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