RelativeCI

In-depth webpack bundle analysis and monitoring

Debug GitHub action

Use debug input

To debug @relative-ci/agent GitHub action, set debug input to true:

.github/workflow/relative-ci.yml
name: RelativeCI GitHub action example
jobs:
build:
steps:
# Install dependencies
- run: npm ci
# Build bundle and output webpack stats according to Step 1.
- run: npm run build --if-present
- name: Send webpack stats to RelativeCI
uses: relative-ci/agent-action@v1.1.3
with:
# Webpack stats filepath
webpackStatsFile: ./webpack-stats.json
# RelativeCI key
key: ${{ secrets.RELATIVE_CI_KEY }}
# Show debug info
debug: true

The GitHub action will run @relative-ci/agent CLI with DEBUG=relative-ci:agent:

Prepare all required actions
Getting action download info
Run ./
Environment variables
relative-ci:agent Config {
config: {
payloadFilepath: undefined,
includeCommitMessage: true,
webpack: { stats: './webpack-stats.json' }
},
filepath: '/home/runner/work/repo/relativeci.config.js'
}
relative-ci:agent env-ci params {
branch: 'master',
commit: 'f4f52dd148c6fd7f39962fa52b08dc85cf77a679',
isCi: true,
prBranch: undefined,
service: 'github',
slug: 'acme/web-app'
}
relative-ci:agent RELATIVE_CI_SLUG not available, using env-ci
relative-ci:agent Job parameters {
key: '***',
endpoint: 'https://api.relative-ci.com/save',
agentVersion: '2.1.0',
branch: 'master',
commit: 'f4f52dd148c6fd7f39962fa52b08dc85cf77a679',
isCi: true,
prBranch: undefined,
service: 'github',
slug: 'acme/web-app',
commitMessage: 'feat: Add login validation'
}
relative-ci:agent Payload {
key: '***',
project: 'acme/web-app',
service: 'github',
job: {
commit: 'f4f52dd148c6fd7f39962fa52b08dc85cf77a679',
branch: 'master',
prNumber: undefined,
buildNumber: undefined,
buildUrl: undefined,
commitMessage: 'feat: Add login validation'
},
rawData: { webpack: { stats: [Object] } },
agentVersion: '2.1.0'
}
relative-ci:agent Payload size 298791
Send stats to RelativeCI branch=master commit=f4f52dd148c6fd7f39962fa52b08dc85cf77a679
relative-ci:agent Response {
reportUrl: 'https://app.relative-ci.com/projects/acme-web-app/jobs/20',
res: { job: { internalBuildNumber: 20 } },
info: { message: { txt: 'Bundle Size 12.42MB (+1.2%).' } }
}
Job #20 done.
Bundle Size 12.42MB (+1.2%).

Use bundle-stats

When using a custom webpack stats configuration, it is possible that the output of the JSON file is not in the exact format that @relative-ci/agent is expecting. In that case, the agent will return a validation error. To test and fix your configuration locally, you can use bundle-stats.

bundle-stats is the standalone open-source utility that RelativeCI is using to validate, filter, and process webpack stats.

npx bundle-stats ./webpack-stats.json


Start analyzing and monitoring yourwebpack bundle