大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG
我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。
展菲：您的前沿技术领航员
👋 大家好，我是展菲！
📱 全网搜索“展菲”，即可纵览我在各大平台的知识足迹。
📣 公众号“Swift社区”，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。
💬 微信端添加好友“fzhanfei”，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。
📅 最新动态：2025 年 3 月 17 日
快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！
文章目录
- 前言
- 构建命令与输出
- 环境变量与 API 地址
- 代码分割与懒加载
- 打包分析
- 资源压缩与 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 示例：
import{lazy,Suspense}from'react'import{Routes,Route}from'react-router-dom'constHome=lazy(()=>import('./pages/Home'))constDetail=lazy(()=>import('./pages/Detail'))functionApp(){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不缓存或短缓存：
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 生产构建会更小、更快、更利于缓存与维护。
