React项目部署Github Pages构建耗时过长及音频资源优化咨询

构建时长参考 #

没有绝对固定的预期时长，它取决于机器性能（CPU核心数、内存容量）、构建工具配置、文件数量（而非单纯体积）、是否开启构建缓存等因素：

• 1GB规模：若音频文件放在src/assets里，构建时长可能在2-8小时（零散小文件比单个大文件更耗时）
• 2GB规模：大概率需要10-20小时，甚至更长
• 5GB规模：几乎不建议这么做，本地构建会因内存占用、文件IO瓶颈彻底卡住，无法完成

核心问题在于你把音频文件放在了src/assets目录下——React默认构建工具（如webpack）会对src下所有文件做依赖分析、哈希计算、资源打包等处理，哪怕是MP3这类无需编译的静态资源，大量大文件会直接拖垮构建流程。

优化资源结构的关键方法 #

• 将MP3移至public目录：public下的资源不会被webpack处理，构建时会直接原封不动复制到输出目录，完全跳过依赖分析、哈希计算等步骤，能把构建时间压缩回正常的几分钟到十几分钟。引用时用绝对路径，比如/audio/xxx.mp3（假设MP3放在public/audio下）
• 分离静态资源与代码仓库：不要把音频文件存在Git仓库（哪怕用Git LFS），将音频上传到专门的静态资源托管服务，在React代码里直接引用资源链接。这样仓库只存代码，构建完全不受资源体积影响，同时还能降低仓库大小，避免Git LFS的带宽限制
• 配置构建工具忽略大资源：若必须把音频留在仓库，用craco或eject后修改webpack配置，让它跳过src/assets下的MP3文件，再通过copy-webpack-plugin手动复制这些文件到输出目录，减少构建工具的处理量
• 开启构建缓存：确保构建工具开启缓存（如webpack的cache配置），重复构建时能复用之前的处理结果，减少重复计算

内容的提问来源于stack exchange，提问作者Evan Denmark