Webpack — alert on bundle-size growth in PRs
Someone added `import * from 'lodash'` — the bundle grew 70 KB. CI passed (tests OK), but first user load got 300 ms slower. Catch in CI before merge.
Recipe
#!/usr/bin/env bash
# .github/workflows/bundle-size.yml step:
# - run: /opt/bundle-size-check.sh
# Save baseline once on main:
# webpack --json > stats.json && jq '[.assets[] | select(.name|endswith(".js")) | .size] | add' stats.json > .bundle-baseline
DIFF_PCT=${DIFF_PCT:-5} # alert above 5 % growth
webpack --mode=production --json > /tmp/stats.json 2>/dev/null
NEW=$(jq '[.assets[] | select(.name|endswith(".js")) | .size] | add' /tmp/stats.json)
OLD=$(cat .bundle-baseline 2>/dev/null || echo 0)
[ "$OLD" -eq 0 ] && exit 0 # first run, no baseline
GROWTH=$(( (NEW - OLD) * 100 / OLD ))
if [ "$GROWTH" -gt "$DIFF_PCT" ]; then
KB_NEW=$((NEW / 1024))
KB_OLD=$((OLD / 1024))
curl -fsS "$HEARTBEAT_URL" --data "bundle_growth_pct=$GROWTH,new_kb=$KB_NEW,old_kb=$KB_OLD"
exit 2
fi
echo "OK (growth=${GROWTH}%)"
Same thing in Enterno.io
Wire to an Enterno heartbeat in CI — every PR is checked for bundle rise, regressions are blocked before merge.
Related recipes
After a release Sentry only fires on big incidents. I want to catch a slow error-rate climb over a 15-minute window before it becomes a real incident.
After a release Lighthouse perf score drops from 90 to 65 (new lib without code-split, or un-minified bundle). You only learn when RUM starts showing LCP > 4 s.
Ensure your site returns 2xx every minute, alert to Slack/Telegram on failure.