create-react-app(CRA)中如何单独提取Javascript与CSS的bundle体积

算力阿峰

2026-9-29

CRA 项目提取JS/CSS bundle体积的实现方法

方法1：直接解析build命令输出（无需修改配置）

CRA 执行yarn build的默认输出会明确列出所有构建产物的体积信息，你可以通过命令行工具直接过滤提取：

提取所有JS bundle体积（Linux/macOS环境）：

yarn build | grep -E '\.js$' | awk '{print "资源名:"$3," gzip体积:"$1$2}'

提取所有CSS bundle体积：

yarn build | grep -E '\.css$' | awk '{print "资源名:"$3," gzip体积:"$1$2}'

这个方法适合临时快速统计，不需要改动项目任何配置。

方法2：通过配置自定义统计逻辑（更稳定，适合CI/自动化场景）

如果需要稳定的结构化数据用于自动化统计，不需要eject项目也可以实现：

先安装craco（也可以用react-app-rewired，逻辑一致）和体积统计依赖

yarn add @craco/craco stats-webpack-plugin -D

项目根目录新建craco.config.js，添加如下配置：

const StatsPlugin = require('stats-webpack-plugin');

module.exports = {
  webpack: {
    plugins: [
      new StatsPlugin('build-stats.json', {
        assets: true,
        excludeAssets: [/\.map$/, /asset-manifest\.json/, /\.html$/],
      })
    ]
  }
}

修改package.json里的build命令为craco build，执行yarn build后会在build目录生成build-stats.json文件
写个简单的脚本读取该文件，过滤后缀为.js和.css的资源，累加size字段即可得到原始体积，累加gzipSize字段即可得到gzip压缩后的体积。