Analyze and compare bundle changes locally

You can analyze and compare the bundle changes on your local environment using bundle-stats cli (bundle-stats is the open-source tool used by RelativeCI service to generate and compare reports).

To generate webpack stats, you can use webpack cli method or a plugin to write the stats file (relative-ci/agent examples: cli, webpack-stats-plugin). For the CLI method used below, the following stats options are recommended:

// webpack.config.js
module.exports = {
  stats: {
    assets: true,
    chunks: true,
    modules: true,
    source: false
  }
}

Step 1. Generate webpack stats for baseline

# Switch to default branch
git checkout main

# Generate webpack stats
npx webpack --mode production --json > main.json

You can use an existing RelativeCI job as a baseline. To download the corresponding webpack stats, navigate to the job page, click on 'Job info' -> 'Raw data Copy / Download'.

Step 2. Generate webpack stats for the change

# Switch to custom branch/tag
git checkout feature-branch

# Generate webpack stats
$ npx webpack --mode production --json > feature-branch.json

Step 3. Analyze and compare bundle stats

npx bundle-stats feature-branch.json main.json
  ✔ Read Webpack stats files
  ↓ Read baseline data [skipped]
    → Missing baseline stats, see "--baseline" option.
  ↓ Write baseline data [skipped]
    → Not a baseline job (see --baseline).
  ✔ Process data
  ✔ Generate reports
  ✔ Save reports

Artifacts:
- dist/bundle-stats.html

View all bundle-stats options

If there are package.json updates between the branches, make sure to run yarn / npm install before webpack stats generation.
bundle-stats.html is a standalone html page, you can upload it to any static hosting.