RelativeCI

In-depth webpack bundle analysis and monitoring

Analyze and compare webpack bundle changes locally

You can analyze and compare the webpack 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 (How to output webpack stats). For the CLI method used below, the following webpack stats options are needed:

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

Step 1. Baseline webpack stats

# Switch to default branch
git checkout main
# Generate webpack stats
npx webpack --mode production --json main.json

You can use an existing RelativeCI job data source as a baseline. To download the webpack stats JSON, navigate to the job page, select 'Job info' and copy or download the data.

Step 2. 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. Analyze and compare webpack 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

  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 page, you can upload it to any static hosting for sharing.

Start analyzing and monitoring yourwebpack bundle