无需Webpack，如何用gzip或Brotli压缩React项目？

针对你的Docker+Nginx部署场景，不用Webpack也能轻松实现资源压缩，下面是两种实用方案：

方案一：Nginx动态压缩（快速上手） #

直接通过Nginx配置实现实时压缩，无需提前处理文件，适合中小流量应用。

配置步骤 #

1. 确认模块支持：大部分官方Nginx镜像（如nginx:alpine）默认带gzip模块；若要使用Brotli，可改用第三方镜像（如fholzer/nginx-brotli），或自行编译Nginx添加模块。
2. 修改Nginx配置文件（如/etc/nginx/nginx.conf或站点配置）：

# Gzip压缩配置
gzip on;
gzip_vary on;
gzip_min_length 1024; # 小于1KB的文件不压缩
gzip_types text/plain text/css text/xml text/javascript application/javascript application/json image/svg+xml;

# Brotli压缩配置（需镜像支持Brotli模块）
brotli on;
brotli_vary on;
brotli_min_length 1024;
brotli_types text/plain text/css text/xml text/javascript application/javascript application/json image/svg+xml;

配置生效后，Nginx会在收到请求时自动压缩对应类型的资源并返回，客户端会根据自身支持情况选择接收压缩后的内容。

方案二：预生成压缩文件（节省服务器CPU） #

在Docker构建阶段提前生成.gz和.br压缩文件，让Nginx直接返回预压缩资源，适合高流量场景。

步骤1：修改Dockerfile添加压缩步骤 #

# 1. 构建React静态文件
FROM node:18-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build # 假设构建产物输出到build目录

# 2. 生成预压缩文件
FROM alpine:latest AS compressor
COPY --from=builder /app/build /build
RUN apk add --no-cache gzip brotli # 安装压缩工具
# 对指定类型文件生成gzip和brotli压缩包
RUN find /build -type f \( -name "*.html" -o -name "*.css" -o -name "*.js" -o -name "*.svg" \) | while read file; do \
    gzip -9 -k "$file"; # -9为最高压缩比，-k保留原文件
    brotli -q 11 -k "$file"; # -q11为Brotli最高压缩级别
done

# 3. 部署到Nginx
FROM nginx:alpine
COPY --from=compressor /build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf # 复制自定义配置

步骤2：配置Nginx优先返回预压缩文件 #

在自定义nginx.conf中添加规则：

# 优先查找Brotli、Gzip压缩文件，再找原文件
location ~* \.(html|css|js|svg)$ {
    add_header Vary Accept-Encoding;
    try_files $uri.br $uri.gz $uri =404;
}

# 处理Brotli压缩文件的响应头
location ~* \.br$ {
    add_header Content-Encoding br;
    types {
        text/html br;
        text/css br;
        application/javascript br;
        image/svg+xml br;
    }
}

# 处理Gzip压缩文件的响应头
location ~* \.gz$ {
    add_header Content-Encoding gzip;
    types {
        text/html gz;
        text/css gz;
        application/javascript gz;
        image/svg+xml gz;
    }
}

注意事项 #

• 避免压缩已自带压缩的资源（如JPG/PNG图片、MP4视频），这类文件再压缩收益极低，还会浪费资源。
• 预压缩时的高压缩级别会增加构建时间，但能获得更小的文件体积，可根据实际情况调整（如gzip用-6、brotli用-q5平衡速度和压缩率）。

内容的提问来源于stack exchange，提问作者Ritik Saxena