React 项目生产环境构建与静态资源优化

网罗开发 （小红书、快手、视频号同名）

大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。

图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG

我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验 。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。

展菲：您的前沿技术领航员

👋 大家好，我是展菲！

📱 全网搜索"展菲"，即可纵览我在各大平台的知识足迹。

📣 公众号"Swift社区"，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。

💬 微信端添加好友"fzhanfei"，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。

📅 最新动态：2025 年 3 月 17 日

快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！

文章目录

- 前言
- 构建命令与输出
- [环境变量与 API 地址](#环境变量与 API 地址)
- 代码分割与懒加载
- 打包分析
- [资源压缩与 Tree Shaking](#资源压缩与 Tree Shaking)
- 缓存策略
- 总结

前言

React 应用上线前需要执行 npm run build 得到静态资源，再交给 Nginx 或 CDN 托管。构建配置不当会导致包体积过大、首屏慢、缓存失效频繁等问题。通过合理配置打包工具、代码分割、资源压缩和缓存策略，可以在不写完整 Demo 的前提下显著提升生产体验。

本文只讲生产构建与静态资源优化的核心思路和关键配置，不贴完整可运行项目。

构建命令与输出

以 Create React App（CRA）或 Vite 为例：

CRA ：npm run build，默认输出到 build/，内含 index.html 和 static/js、static/css 等。
Vite ：npm run build，默认输出到 dist/，结构类似。

构建产物应直接作为 Nginx 的 root 目录，或上传到 CDN 后通过 Nginx 做回源。确保生产环境使用的是 build/dist 下的内容，而不是开发服务器。

环境变量与 API 地址

生产环境接口地址不应写死在代码里，应通过环境变量注入：

CRA：

变量名必须以 REACT_APP_ 开头，例如 REACT_APP_API_BASE=/api。
在代码里用 process.env.REACT_APP_API_BASE 访问；构建时会被替换为字面量。

Vite：

变量名必须以 VITE_ 开头，例如 VITE_API_BASE=/api。
在代码里用 import.meta.env.VITE_API_BASE 访问。

部署前在服务器或 CI 中设置对应环境变量再执行 build，或使用 .env.production 写入默认生产值（不要提交敏感信息）。

代码分割与懒加载

默认打包会把所有路由对应的组件打进一个或少数几个 chunk，首屏会加载很多用不到的代码。通过路由级懒加载，把每个页面拆成独立 chunk，首屏只加载当前页，其余按需加载。

React + React Router 示例：

typescript 复制代码

import { lazy, Suspense } from 'react'
import { Routes, Route } from 'react-router-dom'

const Home = lazy(() => import('./pages/Home'))
const Detail = lazy(() => import('./pages/Detail'))

function App() {
  return (
    <Suspense fallback={<div>加载中...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail/:id" element={<Detail />} />
      </Routes>
    </Suspense>
  )
}

这样 Home、Detail 会各自打成单独 js 文件，首屏只请求当前路由的 chunk，减小首屏体积。

打包分析

若包体积偏大，可先定位是哪些依赖或模块占空间：

CRA ：使用 source-map-explorer 或 cra-bundle-analyzer，在 build 后生成报告，查看各模块体积。
Vite ：使用 rollup-plugin-visualizer，build 后生成 stats.html，用浏览器打开查看 treemap。

根据报告替换大库（如 moment → dayjs）、按需引入（如 lodash-es 只 import 用到的函数）、或把非首屏依赖放到懒加载路由里。

资源压缩与 Tree Shaking

JS/CSS 压缩：CRA 和 Vite 生产构建默认都会做 Terser、CSS minify，一般无需额外配置。
Tree Shaking ：使用 ES Module 导入（import { xxx } from 'lib'），并确保依赖库提供 ESM 或 sideEffects 正确，打包工具会自动去掉未引用代码。
图片：大图尽量在构建前压缩或使用 WebP；可配合 vite-plugin-imagemin 等在 build 时压缩，或上传到 CDN 并做响应式/懒加载。

缓存策略

构建产物通常带 content hash（如 main.abc123.js），内容不变则 hash 不变，适合长期缓存。Nginx 可对带 hash 的静态资源设置长缓存，对 index.html 不缓存或短缓存：

nginx 复制代码

location /static {
    alias /var/www/app/frontend/build/static;
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location = /index.html {
    add_header Cache-Control "no-cache";
}

这样用户再次访问时，未变更的 js/css 直接用本地缓存，只有 index.html 会重新请求，从而拉取到新的 chunk 文件名（若有更新）。具体路径以实际 build 输出为准（如 CRA 的 static/js、static/css）。

总结

生产环境用 npm run build 产出静态资源，通过环境变量区分 API 等配置。
使用路由懒加载（lazy + Suspense）做代码分割，减小首屏体积。
用打包分析工具定位大依赖，按需引入、替换轻量库。
利用构建自带的压缩与 Tree Shaking，对带 hash 的静态资源在 Nginx 做长缓存，对 index.html 不做或短缓存。

按上述方式优化后，React 生产构建会更小、更快、更利于缓存与维护。