React生产构建是否会自动压缩图片和视频文件？

首先明确：默认的yarn run build（Create React App 标准生产构建流程）不会自动压缩图片、视频类媒体资源。
它内置的构建逻辑仅会处理JS、SCSS/CSS文件，做代码压缩、无用代码剔除、hash命名；对体积小于10KB的图片会自动转成base64内联到JS/CSS中，但不会做画质维度的体积压缩，所有超过阈值的图片、所有视频文件都会原封不动拷贝到build目录，不会做任何优化处理，这也是媒体资源拖慢加载速度的核心原因之一。

具体优化方案 #

1. 构建环节配置图片自动压缩 #

不需要eject CRA配置，用配置覆写工具即可实现构建时自动压图：

• 先安装依赖：

# 用craco做配置覆写，搭配图片压缩loader
yarn add -D @craco/craco image-webpack-loader imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle imagemin-svgo

• 项目根目录新建craco.config.js，添加如下最简压缩配置，把压缩loader加到webpack图片处理规则的最前面，构建时会自动对jpg、png、gif、svg做微损压缩，常规场景下能减少40%~60%的图片体积，肉眼几乎看不出画质差异：

// craco.config.js
module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const imageRule = webpackConfig.module.rules.find(rule => rule.test?.test('.jpg'))
      imageRule.oneOf?.unshift({
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { quality: 80 },
              pngquant: { quality: [0.7, 0.8] },
              gifsicle: { interlaced: false },
              svgo: { plugins: [{ removeViewBox: false }] }
            }
          }
        ]
      })
      return webpackConfig
    }
  }
}

• 把package.json里的scripts对应的build、start命令从react-scripts开头改成craco开头即可，原有业务代码不需要改动。
• 如果你是用Vite初始化的React项目，不需要用craco，直接装vite-plugin-imagemin插件，在vite配置里引入即可实现构建自动压图，配置更简单。

2. 视频资源不要放在构建环节压缩 #

视频编码压缩计算量极大，放在构建流程里会把单次构建时间拉长数倍，建议两种处理方式：

• 提前本地批量预处理：用ffmpeg把所有项目内视频统一转码，优先用H.265/AV1编码，码率根据实际展示分辨率控制在1Mbps~3Mbps，删掉视频里不需要的音轨、元数据，一般原素材能压掉70%以上的体积。
• 写独立的预处理脚本：在build命令执行前跑脚本遍历资源目录批量压缩视频，不要把压缩逻辑塞到webpack构建流程里。

3. 格式与加载策略优化 #

• 优先用新一代媒体格式：图片适配WebP/AVIF格式，同画质下AVIF比JPG体积小50%左右，WebP小30%；视频优先用WebM格式，同画质比MP4小25%左右。构建时可以配置自动生成多格式资源，搭配<picture>、<video>标签做兼容降级，老浏览器自动回退加载JPG/MP4资源。
• 所有非首屏的图片、视频全部加懒加载：直接给标签加原生loading="lazy"属性即可，资源进入视口前才会发起请求，首屏加载压力会小很多。
• 做响应式资源适配：不要用同一张超高清原图适配所有屏幕尺寸，用srcset属性配置不同分辨率的资源，浏览器会根据用户设备的屏幕宽度、像素密度自动选择最合适的资源加载，避免手机端加载PC端的4K大图浪费流量。
• 大体积视频不要打包进build目录：放到CDN/对象存储上，开启CDN缓存和Range分片请求支持，用户拖动进度条时不需要加载完整视频，只加载对应时间点的分片即可，大幅降低等待时间。
• 首屏自动播放的背景视频必须加muted、preload="metadata"属性，首屏只加载视频元数据，不要默认加载全量视频内容。

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