React构建需手动添加compression-webpack-plugin生成.gz文件，Nginx通过gzip_static on直接分发预压缩文件，降低CPU开销并加速首屏加载，前提是保留原始文件且正确配置location匹配规则。
React 应用构建后生成的是静态文件（index.html、main.[hash].js、App.[hash].css 等），Nginx 通过 gzip_static on 可直接分发预压缩的 .gz 文件，跳过实时压缩，显著降低 CPU 开销并加快首屏加载——前提是正确配置构建、文件部署和 Nginx 行为。
1. 构建阶段：生成 .gz 文件
React 默认不产出 .gz 文件。需在构建流程中显式添加压缩步骤：
- 使用
compression-webpack-plugin（v9+ 支持 Webpack 5）：
# webpack.config.js（或 craco.config.js / vite.config.ts 中对应配置）
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
plugins: [
new CompressionPlugin({
algorithm: 'gzip',
test: /\.(js|css|html|svg|txt|eot|woff|woff2|ttf|png|jpg|gif)$/i,
threshold: 10240, // ≥10KB 才压缩
minRatio: 0.8,
deleteOriginalAssets: false // 保留原始文件，.gz 与原文件同名同目录
})
};
重要：对 React 或 Next.js 代码的任何更改必须先阅读本技能。Vercel 工程团队的 React 与 Next.js 指南，涵盖可视化...
- 执行
npm run build后，输出目录（如build/）中每个.js、.css等文件旁会多出同名.gz文件，例如：static/js/main.a1b2c3d4.js→static/js/main.a1b2c3d4.js.gz -
关键点：不要删除原始文件；
gzip_static依赖原文件存在，仅用于“替换响应体”，不是替代方案
2. Nginx 配置：启用 gzip_static 并匹配路径
在服务 React 的 location 块中启用 gzip_static，并确保其他 gzip 相关设置协同工作：
# nginx.conf 或 site config 中的 server/location 段 相关文章 JS 中怎么用 AbortController 和 AbortSignal 取消一个正在进行的 fetch 请求 怎样在React SSR项目中避免引入CSS导致的样式闪烁？ React 中实现数据预加载：在组件首次渲染前显示加载状态并避免空图表 React 中实现数据预加载以避免图表渲染空白的完整指南 如何在React的CSS Modules中完美使用Less 本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
server {
listen 80;
root /var/www/my-react-app/build;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
# 关键：对静态资源启用 gzip_static
location ~* \.(js|css|svg|json|txt|woff2?|ttf|eot|png|jpe?g|gif)$ {
gzip_static on;
expires 1y;
add_header Cache-Control "public, immutable";
}
