Nginx静态资源合并的优化方案

<!-- 合并前 -->
<link rel="stylesheet" href="/css/reset.css" rel="external nofollow" >
<link rel="stylesheet" href="/css/layout.css" rel="external nofollow" >
<link rel="stylesheet" href="/css/component.css" rel="external nofollow" >
<link rel="stylesheet" href="/css/theme.css" rel="external nofollow" >
<script src="/js/jquery.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/main.js"></script>

<!-- 合并后 -->
<link rel="stylesheet" href="/css/all.css?_v=20240501" rel="external nofollow" >
<script src="/js/all.js?_v=20240501">

# 下载 nginx 源码
wget http://nginx.org/download/nginx-1.24.0.tar.gz
tar -zxvf nginx-1.24.0.tar.gz

# 下载 concat 模块（历史版本，可从镜像站获取）
wget https://example.com/ngx_http_concat_module-0.2.7.tar.gz
tar -zxvf ngx_http_concat_module-0.2.7.tar.gz

# 编译 nginx 并启用模块
cd nginx-1.24.0
./configure \
  --add-module=/path/to/ngx_http_concat_module-0.2.7 \
  --prefix=/usr/local/nginx \
  --with-http_ssl_module \
  --with-http_gzip_static_module

make && make install

/usr/local/nginx/sbin/nginx -v 2>&1 | grep concat
# 输出应包含：--add-module=/path/to/ngx_http_concat_module-0.2.7

get /static/css/a.css?/static/css/b.css http/1.1

get /static/js/a.js&/static/js/b.js&/static/js/c.js http/1.1

server {
    listen 80;
    server_name static.example.com;
    root /var/www/static;
    # 启用 concat 模块
    concat on;
    concat_max_files 100;  # 最多合并 100 个文件
    concat_unique off;     # 是否去重（默认 off）
    concat_types text/css application/javascript;  # 支持的 mime 类型
    # 静态资源缓存策略
    location ~* \.(css|js)$ {
        expires 1y;
        add_header cache-control "public, immutable";
        add_header vary "accept-encoding";
    }
    # 允许访问合并路径（必须配置，否则 404）
    location ~ ^/static/(css|js)/(.*)$ {
        concat on;
        alias /var/www/static;
    }
}

dist/
├── index.html
├── static/
│   ├── css/
│   │   ├── vendor.123abc.css
│   │   ├── app.456def.css
│   │   └── theme.789ghi.css
│   └── js/
│       ├── vendor.123abc.js
│       ├── runtime.456def.js
│       └── app.789ghi.js
└── favicon.ico

<link rel="stylesheet" href="/static/css/vendor.123abc.css?/static/css/app.456def.css?/static/css/theme.789ghi.css" rel="external nofollow" >
<script src="/static/js/vendor.123abc.js&/static/js/runtime.456def.js&/static/js/app.789ghi.js"></script>

package com.example.buildtool;
import com.fasterxml.jackson.databind.objectmapper;
import com.fasterxml.jackson.databind.node.objectnode;
import java.io.file;
import java.io.ioexception;
import java.nio.file.files;
import java.nio.file.path;
import java.nio.file.paths;
import java.util.*;
import java.util.stream.collectors;
public class concatmapgenerator {
    public static void main(string[] args) throws ioexception {
        string distpath = "dist/static"; // 前端构建输出目录
        string outputpath = "dist/concat-map.json";
        map<string, list<string>> cssgroups = new hashmap<>();
        map<string, list<string>> jsgroups = new hashmap<>();
        // 扫描 css 文件，按前缀分组
        files.walkfiletree(paths.get(distpath), new simplefilevisitor<path>() {
            @override
            public filevisitresult visitfile(path file, basicfileattributes attrs) throws ioexception {
                if (attrs.isregularfile() && file.tostring().endswith(".css")) {
                    string filename = file.getfilename().tostring();
                    // 提取前缀：vendor.123abc.css → vendor
                    string prefix = filename.split("\\.")[0];
                    cssgroups.computeifabsent(prefix, k -> new arraylist<>()).add("/static/css/" + filename);
                }
                return filevisitresult.continue;
            }
        });
        // 扫描 js 文件
        files.walkfiletree(paths.get(distpath), new simplefilevisitor<path>() {
            @override
            public filevisitresult visitfile(path file, basicfileattributes attrs) throws ioexception {
                if (attrs.isregularfile() && file.tostring().endswith(".js")) {
                    string filename = file.getfilename().tostring();
                    string prefix = filename.split("\\.")[0];
                    jsgroups.computeifabsent(prefix, k -> new arraylist<>()).add("/static/js/" + filename);
                }
                return filevisitresult.continue;
            }
        });
        // 生成 json 映射
        objectmapper mapper = new objectmapper();
        objectnode root = mapper.createobjectnode();
        // css 映射
        objectnode cssnode = root.putobject("css");
        for (map.entry<string, list<string>> entry : cssgroups.entryset()) {
            string key = entry.getkey();
            list<string> files = entry.getvalue();
            // 按字母序排序确保一致性
            files.sort(string::compareto);
            string concatpath = string.join("?", files);
            cssnode.put(key, concatpath);
        }
        // js 映射
        objectnode jsnode = root.putobject("js");
        for (map.entry<string, list<string>> entry : jsgroups.entryset()) {
            string key = entry.getkey();
            list<string> files = entry.getvalue();
            files.sort(string::compareto);
            string concatpath = string.join("&", files);
            jsnode.put(key, concatpath);
        }
        // 写入文件
        files.write(paths.get(outputpath), mapper.writerwithdefaultprettyprinter().writevalueasstring(root).getbytes());
        system.out.println("✅ 合并映射文件已生成：" + outputpath);
        system.out.println("内容示例：");
        system.out.println(mapper.writerwithdefaultprettyprinter().writevalueasstring(root));
    }
}

{
  "css" : {
    "vendor" : "/static/css/vendor.123abc.css",
    "app" : "/static/css/app.456def.css",
    "theme" : "/static/css/theme.789ghi.css",
    "all" : "/static/css/vendor.123abc.css?/static/css/app.456def.css?/static/css/theme.789ghi.css"
  },
  "js" : {
    "vendor" : "/static/js/vendor.123abc.js",
    "runtime" : "/static/js/runtime.456def.js",
    "app" : "/static/js/app.789ghi.js",
    "all" : "/static/js/vendor.123abc.js&/static/js/runtime.456def.js&/static/js/app.789ghi.js"
  }
}

package com.example.controller;
import org.springframework.core.io.classpathresource;
import org.springframework.http.responseentity;
import org.springframework.web.bind.annotation.getmapping;
import org.springframework.web.bind.annotation.restcontroller;
import com.fasterxml.jackson.databind.jsonnode;
import com.fasterxml.jackson.databind.objectmapper;
import java.io.ioexception;
import java.io.inputstream;
@restcontroller
public class concatcontroller {
    @getmapping("/api/concat-map")
    public responseentity<jsonnode> getconcatmap() throws ioexception {
        objectmapper mapper = new objectmapper();
        inputstream is = new classpathresource("concat-map.json").getinputstream();
        jsonnode map = mapper.readtree(is);
        return responseentity.ok(map);
    }
}

<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>my app</title>
    <!-- 使用 thymeleaf 注入合并路径 -->
    <link th:if="${concatmap.css.all}" th:href="${concatmap.css.all}" rel="external nofollow"  rel="stylesheet">
    <link th:unless="${concatmap.css.all}" href="/static/css/vendor.css?/static/css/app.css?/static/css/theme.css" rel="external nofollow"  rel="external nofollow"  rel="stylesheet">
</head>
<body>
    <script th:if="${concatmap.js.all}" th:src="${concatmap.js.all}"></script>
    <script th:unless="${concatmap.js.all}" src="/static/js/vendor.js&/static/js/runtime.js&/static/js/app.js"></script>
</body>
</html>

app.456def.css
vendor.123abc.js

location ~* \.(css|js)$ {
    expires 1y;
    add_header cache-control "public, immutable";
    add_header etag "";
    add_header last-modified "wed, 01 jan 1980 00:00:00 gmt";
}

cache-control: public, immutable, max-age=31536000

<!-- ✅ 正确 -->
<link href="/static/css/vendor.123abc.css?/static/css/app.456def.css" rel="external nofollow" >
<!-- ❌ 错误 -->
<link href="/static/css/vendor.css?v=123?/static/css/app.css" rel="external nofollow" >

<link rel="stylesheet" href="/static/css/vendor.css" rel="external nofollow" >
<link rel="stylesheet" href="/static/css/app.css" rel="external nofollow" >
<link rel="stylesheet" href="/static/css/theme.css" rel="external nofollow" >
<script src="/static/js/vendor.js"></script>
<script src="/static/js/runtime.js"></script>
<script src="/static/js/app.js"></script>
<script src="/static/js/analytics.js"></script>

<link rel="stylesheet" href="/static/css/vendor.css?/static/css/app.css?/static/css/theme.css" rel="external nofollow"  rel="external nofollow" >
<script src="/static/js/vendor.js&/static/js/runtime.js&/static/js/app.js&/static/js/analytics.js"></script>

# 安装 wrk
sudo apt install wrk

# 压测未合并页面
wrk -t12 -c400 -d30s http://static.example.com/index.html

# 压测合并页面
wrk -t12 -c400 -d30s http://static.example.com/index-concat.html

get /static/css/../../../../etc/passwd http/1.1

location ~ ^/static/(css|js)/(.*)$ {
    concat on;
    alias /var/www/static;
    # 限制只能访问 css/ 和 js/ 子目录
    if ($request_uri !~ "^/static/(css|js)/") {
        return 403;
    }
}

concat_max_files 5;  # 最多合并 5 个文件，防恶意构造

concat_types text/css application/javascript text/plain;
# 只允许合并 css、js、txt，禁止合并 html、json、php

access_log /var/log/nginx/concat-access.log combined;

grep "concat" /var/log/nginx/concat-access.log | grep -e "\.\./" | awk '{print $1,$7}' | sort | uniq -c

brotli on;
brotli_comp_level 6;
brotli_types text/css application/javascript text/plain application/json;

vendor.js → runtime.js → app.js

error_log /var/log/nginx/concat-debug.log debug;