Nginx可通过sub_filter模块在HTML响应中注入<link rel="preload">实现关键资源预加载；需启用sub_filter_once off、显式设置sub_filter_types text/html，并注意gzip冲突与HTML结构安全。
在 Nginx 中为 HTML 页面添加 <link rel="preload"> 是一种前端性能优化手段，用于提前加载关键资源（如字体、CSS、JS、图片等），避免浏览器发现依赖时才发起请求，从而缩短首屏渲染时间。Nginx 本身不解析 HTML 内容，因此不能像应用服务器那样动态插入标签；但可通过 sub_filter 模块在响应体中做字符串替换，实现“注入”预加载头信息的效果。
启用并配置 sub_filter 模块
Nginx 默认编译时已包含 sub_filter 模块（需确认未被禁用）。它支持对响应体进行查找替换，适用于 HTML 响应的轻量级修改：
- 确保 Nginx 版本 ≥ 1.9.4（推荐 ≥ 1.11.6，支持
sub_filter_once off多次替换） - 在对应
location或server块中启用：sub_filter '</head>' '<link rel="preload" href="/assets/font.woff2" as="font" type="font/woff2" crossorigin></head>';<br>sub_filter_once off;<br>sub_filter_types text/html;
-
sub_filter_types必须显式包含text/html，否则默认只处理text/plain - 若使用 gzip 压缩，需确保
sub_filter在压缩后生效（即不与gzip on冲突）：通常需关闭gzip_vary或配合gzip_proxied调整，更稳妥做法是 禁用该 location 的 gzip：gzip off;
安全注入：避免破坏 HTML 结构
直接替换 </head> 简单但有风险——若页面含内联 JS 修改 DOM、或存在注释/CDATA、或 <head> 标签换行不规范，可能导致替换失败或 HTML 错乱：
- 建议先匹配更稳定的锚点，例如：
sub_filter '<meta charset=' '<link rel="preload" href="/main.css" as="style"><meta charset='; - 或使用带空格和换行的宽松匹配（需开启
sub_filter_last_modified off并注意正则不可用，只能字面匹配） - 始终开启
sub_filter_last_modified off;避免因响应头Last-Modified导致替换失效 - 上线前务必用
curl -H "Accept-Encoding: identity" http://yoursite/验证原始响应内容是否匹配预期
按路径/条件差异化预加载
不同页面需要的预加载资源不同（如首页需轮播图，文章页需特定字体），可通过多个 location 或 map 实现条件化注入：
立即学习“前端免费学习笔记（深入）”；
- 用
map定义变量：map $request_uri $preload_html {<br> ~^/article/ "<link rel=\"preload\" href=\"/fonts/article.woff2\" as=\"font\" crossorigin>";<br> ~^/$ "<link rel=\"preload\" href=\"/hero.jpg\" as=\"image\">";<br> default "";<br>} - 在 location 中引用：
sub_filter '</head>' '$preload_html</head>'; - 注意：变量值中引号需转义，且
sub_filter不支持嵌套变量展开，建议仅用于简单字符串拼接
替代方案：服务端渲染或构建时注入
若项目使用 Vue/React SSR、Next.js、Nuxt 或静态站点生成器（如 Hugo、Jekyll），更推荐在构建或渲染阶段注入 preload 标签：
- Webpack/Vite 插件（如
vite-plugin-preload）可自动分析入口并注入 - Next.js 通过
Head组件或getStaticProps中的headers配置更可控 - Nginx 注入适合无服务端逻辑的纯静态站，但维护性低、调试难、易出错
