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 branchgit checkout main
# Generate webpack statsnpx 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/taggit checkout feature-branch
# Generate webpack statsnpx 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
- If there are
package.json
updates between the branches, make sure to runyarn
/npm install
before webpack stats generation. bundle-stats.html
is a standalone html page, you can upload it to any static hosting.