如何通过 Nginx 配置实现静态资源的按需合并加载-Nginx-PHP中文网

nginx 不支持运行时合并 css/js，必须在构建阶段（如 vite/webpack）完成资源聚合；其核心作用是按文件类型压缩、按客户端能力适配（webp/移动端）、按缓存状态优化传输，并通过 http/2 与强缓存减少请求数。

如何通过 nginx 配置实现静态资源的按需合并加载

Nginx 本身不支持运行时按需合并 CSS 或 JS 文件——它不会解析 HTML、读取 <link> 标签，也不会动态拼接多个 .css 或 .js 文件返回一个响应。所谓“按需合并加载”，实际是前端构建阶段完成资源聚合，再由 Nginx 高效分发；Nginx 的作用在于按请求特征智能响应，实现真正意义上的“按需传输”。

下面从可落地的实操角度说明关键环节：

VitePress Generator

使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

下载

构建阶段完成资源合并（不可替代的基础）

使用 Vite、Webpack 或 Rollup 在打包时将分散的样式和脚本合并为少数几个文件
- Vite：设置 build.cssCodeSplit: false 关闭 CSS 拆分，生成单一 style.css
- Webpack：配合 mini-css-extract-plugin 并配置 splitChunks.chunks: 'all'
输出文件命名带哈希（如 app.a1b2c3.css），HTML 中只引用这 1–2 个 URL
确保构建产物目录结构清晰（如 /dist/assets/），便于 Nginx 直接映射

Nginx 按文件类型差异化传输

对文本类资源（CSS/JS/HTML）启用压缩，对二进制资源（图片/字体）禁用压缩但开启高效传输
- 启用 Gzip/Brotli：gzip on; gzip_types text/css application/javascript;
- 图片路径下关闭压缩：location ~* \.(jpg|png|webp|woff2)$ { gzip off; sendfile on; tcp_nopush on; }
- SVG 是 XML 文本，需加入 gzip_types image/svg+xml 并确保 MIME 正确：types { image/svg+xml svg svgz; }

按客户端能力提供适配版本

利用 map 指令识别 WebP 支持：
```
map $http_accept $webp_suffix {
    ~*webp ".webp";
    default "";
}
```
- 在静态 location 中使用 try_files $uri$webp_suffix $uri =404

判断移动端用户，可重写路径指向精简资源：

if ($http_user_agent ~* "(Mobile|Android|iPhone)") {
    rewrite ^/assets/(.*)$ /assets/mobile/$1 break;
}

利用缓存与连接复用减少重复开销

设置强缓存策略，避免重复读取文件内容：

location ~ \.css$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header ETag "";
}

启用 open_file_cache 缓存文件元信息，降低 stat() 系统调用频率
开启 HTTP/2（需 HTTPS）：listen 443 ssl http2;，让多个 CSS/JS 并发复用同一连接

不复杂但容易忽略