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;