Nginx中CSS与JS资源合并加速插件的集成配置-Nginx-PHP中文网

nginx原生不支持css/js合并，需借助第三方模块（如ngx_http_concat_module）动态合并，或在构建阶段预合并后由nginx静态托管；后者更推荐，性能好、运维简、兼容性强。

nginx中css与js资源合并加速插件的集成配置

在 Nginx 中，原生并不支持 CSS/JS 合并（即自动将多个文件打包为一个），它本身是反向代理与静态资源服务器，并非构建工具。所谓“合并加速插件”，实际需借助第三方模块（如 ngx_http_concat_module）或在应用层/构建阶段完成合并，Nginx 仅负责高效分发。下面介绍两种主流、稳定、生产可用的实践方式。

方式一：使用 nginx-http-concat 模块（服务端动态合并）

这是由淘宝开源、被广泛验证的 Nginx 第三方模块，支持通过 URL 参数动态合并 CSS/JS，例如：/??style1.css,style2.css,common.css。

需重新编译 Nginx 并加载 ngx_http_concat_module（官方已不维护，但 v1.16–v1.22 兼容性良好）；
在 nginx.conf 的 location 块中启用：

location /static/ {
    concat on;
    concat_max_files 20;
    concat_unique off;
    concat_types application/javascript text/css;
}

访问 /static/??a.js,b.js,c.css 即可返回合并后的内容（按顺序读取、去重注释、保留末尾分号）。注意：该模块不压缩，建议配合 Gzip 或 Brotli；也不校验文件是否存在，缺失任一资源将返回 404。

方式二：构建时预合并 + Nginx 静态托管（推荐）

更符合现代前端工程实践：在 CI/CD 或本地构建阶段（如 Webpack/Vite/Rollup）完成 CSS/JS 合并与压缩，生成固定文件（如 app.min.css、vendor.chunk.js），再由 Nginx 直接 serve。

优势明显：避免运行时开销、兼容所有 Nginx 版本、支持 SourceMap、便于 CDN 缓存和版本控制；
Nginx 配置只需开启静态服务与缓存：

location /assets/ {
    alias /var/www/myapp/dist/assets/;
    expires 1y;
    add_header Cache-Control "public, immutable";
    gzip_static on;  # 自动找 .gz 文件
}

确保构建输出目录含合并后的资源，并在 HTML 中引用对应路径即可。这是目前最可靠、性能最好、运维最简的方式。