Nginx 不支持 HTML 片段动态合并，实际通过 SSI 服务端静态嵌入或前端模块化+CDN 缓存实现优化：SSI 用于低频更新静态块，需配置 ssi on 及精准缓存策略；前端方案则分离静态壳与动态接口，结合 immutable 缓存和 CDN 边缘预热提升性能。
用 SSI 实现服务端静态片段嵌入
SSI 是 Nginx 原生支持的轻量机制，适合嵌入不变或低频更新的静态片段（如通用页脚、版权栏、导航栏），无需后端参与，也不依赖 JS 执行。
- 开启配置（在 server 或 location 块中）：
ssi on;
ssi_silent_errors on;
ssi_types text/html; - HTML 中使用注释语法嵌入：
<!--#include virtual="/includes/header.html" -->
路径相对于root指令设置的根目录 - 注意：被包含文件必须是纯文本（
text/htmlMIME 类型），不能含动态逻辑；修改后需刷新浏览器缓存，因为 SSI 不自动触发缓存失效
为片段资源设置精准缓存策略
即使使用 SSI，每个被 include 的文件仍是独立 HTTP 请求。要真正减少加载开销，必须让这些片段资源具备高命中率缓存能力。
- 对
/includes/*.html路径统一设长缓存：
location ^~ /includes/ {
expires 1y;
add_header Cache-Control "public, immutable";
} - 若片段内容会定期更新（如每周改版的 banner.html），改用带哈希或版本号的命名方式（
banner.v2.html），再配immutable，确保变更即刷新 - 禁用对这些路径的 ETag 或 Last-Modified（除非你主动管理文件变更时间戳），避免校验型请求干扰缓存效率
结合前端模块化 + Nginx 缓存做“伪合并”交付
对于需要一定动态性（如用户昵称、未读数）但又不想走完整 SSR 的场景，可将片段拆为“静态壳 + 动态数据接口”，由前端 JS 加载并注入——Nginx 则专注缓存壳文件和接口响应。
- 把通用 UI 模块（如用户面板）打包为独立 JS/CSS，构建时生成带哈希名的文件（
user-panel.a1b2c3.js），HTML 直接引用 - Nginx 对
.js和.css设置immutable长缓存，浏览器永久复用 - 配套的 JSON 接口（如
/api/user/status）由 Nginx 反向代理，并设置短缓存（max-age=60）或禁用缓存，保证实时性 - 这样既避免服务端模板拼接压力，又让浏览器并行加载壳与数据，比整页 SSR 更快更可控
CDN 协同：小片段回源聚合与边缘缓存预热
当站点接入 CDN 后，大量小片段请求可能造成源站回源风暴。Nginx 可配合 CDN 实现“边缘友好”的片段交付。
- 在 Nginx 响应头中明确控制 CDN 缓存行为：
location ^~ /includes/ {
add_header Cache-Control "public, max-age=31536000";
add_header Surrogate-Control "max-age=31536000";
} - 利用 Nginx subrequest，在首页请求中主动触发对高频片段（
/includes/footer.html、/includes/nav.html）的内部请求，推动 CDN 边缘节点提前缓存 - 与 CDN 厂商协同开启“小文件回源合并”功能：同一秒内多个 404 的片段请求，自动聚合成一次回源，降低源站压力
