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

To generate webpack stats, you can use the webpack CLI method or a plugin to write the stats file (Learn how to output webpack stats here). For the CLI method used below, the following webpack stats options are needed:

module.exports = {
  stats: {
    assets: true,
    chunks: true,
    modules: true
  }
}

Step 1: Generate baseline webpack stats

# Switch to default branch
git checkout main

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

Step 2: Generate change webpack stats

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

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

Step 3: Compare and analyze webpack 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

1. If there are package.json updates between the branches, run npm install/yarn/pnpm before webpack stats generation.
2. bundle-stats.html is a standalone HTML file, you can upload it to any static hosting for sharing.