广西网站建设代理加盟,企业网络推广做网站推广公司,公司网站乱码,我想卖自己做的鞋子 上哪个网站好网罗开发 #xff08;小红书、快手、视频号同名#xff09; 大家好#xff0c;我是 展菲#xff0c;目前在上市企业从事人工智能项目研发管理工作#xff0c;平时热衷于分享各种编程领域的软硬技能知识以及前沿技术#xff0c;包括iOS、前端、Harmony OS、Java、Python等…网罗开发小红书、快手、视频号同名大家好我是展菲目前在上市企业从事人工智能项目研发管理工作平时热衷于分享各种编程领域的软硬技能知识以及前沿技术包括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 AppCRA或 Vite 为例CRAnpm run build默认输出到build/内含index.html和static/js、static/css等。Vitenpm 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}fromreactimport{Routes,Route}fromreact-router-domconstHomelazy(()import(./pages/Home))constDetaillazy(()import(./pages/Detail))functionApp(){return(Suspense fallback{div加载中.../div}RoutesRoute path/element{Home/}/Route path/detail/:idelement{Detail/}//Routes/Suspense)}这样Home、Detail会各自打成单独 js 文件首屏只请求当前路由的 chunk减小首屏体积。打包分析若包体积偏大可先定位是哪些依赖或模块占空间CRA使用source-map-explorer或cra-bundle-analyzer在 build 后生成报告查看各模块体积。Vite使用rollup-plugin-visualizerbuild 后生成 stats.html用浏览器打开查看 treemap。根据报告替换大库如 moment → dayjs、按需引入如 lodash-es 只 import 用到的函数、或把非首屏依赖放到懒加载路由里。资源压缩与 Tree ShakingJS/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 生产构建会更小、更快、更利于缓存与维护。