Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Bundle Size ReportComparing against baseline from Per-Route First Load JS
|
.github/scripts/bundle-size.mjs
Outdated
| function getFlag(name, defaultValue) { | ||
| const idx = args.indexOf(`--${name}`); | ||
|
|
||
| if (idx === -1 || idx + 1 >= args.length) return defaultValue; | ||
|
|
||
| return args[idx + 1]; | ||
| } |
There was a problem hiding this comment.
🍹 Less fragile option: https://nodejs.org/api/util.html#utilparseargsconfig
There was a problem hiding this comment.
Updated to us this!
.github/scripts/bundle-size.mjs
Outdated
| function getCommitSha() { | ||
| try { | ||
| return execSync('git rev-parse --short HEAD', { | ||
| encoding: 'utf-8', | ||
| stdio: ['pipe', 'pipe', 'pipe'], | ||
| }).trim(); | ||
| } catch { | ||
| return 'unknown'; | ||
| } | ||
| } |
There was a problem hiding this comment.
🍹 Since HEAD is hardcoded (assuming you won't be using this to get the sha of any other commit), you can probably just use github.sha (docs) in the Action and pass it to your script like
run: node .github/scripts/bundle-size.mjs generate --output .github/bundle-baseline.json --sha ${{ github.sha }}
| if (command === 'generate') { | ||
| generate(); | ||
| } else if (command === 'compare') { | ||
| compare(); | ||
| } else { | ||
| console.error('Usage: bundle-size.mjs <generate|compare> [options]'); | ||
| console.error(''); | ||
| console.error('Commands:'); | ||
| console.error(' generate Analyze .next/ build output and produce bundle size JSON'); | ||
| console.error(' --output <path> Write JSON to file instead of stdout'); | ||
| console.error(''); | ||
| console.error(' compare Compare current bundle against a baseline'); | ||
| console.error(' --baseline <path> Path to baseline JSON (default: ./bundle-baseline.json)'); | ||
| console.error(' --current <path> Path to current bundle JSON (required)'); | ||
| console.error(' --threshold <n> Warning threshold percentage (default: 5)'); | ||
| process.exit(1); | ||
| } |
There was a problem hiding this comment.
🍹Same as above https://nodejs.org/api/util.html#utilparseargsconfig
There was a problem hiding this comment.
command is now parsed via parseArgs. Or where you thinking something else?
.github/workflows/bundle-size.yml
Outdated
| const fs = require('fs'); | ||
| const marker = '<!-- bundle-size-report -->'; | ||
| const body = marker + '\n' + fs.readFileSync('/tmp/bundle-report.md', 'utf-8'); | ||
|
|
||
| const { data: comments } = await github.rest.issues.listComments({ | ||
| owner: context.repo.owner, | ||
| repo: context.repo.repo, | ||
| issue_number: context.issue.number, | ||
| }); | ||
|
|
||
| const existing = comments.find(c => c.body.includes(marker)); | ||
|
|
||
| if (existing) { | ||
| await github.rest.issues.updateComment({ | ||
| owner: context.repo.owner, | ||
| repo: context.repo.repo, | ||
| comment_id: existing.id, | ||
| body, | ||
| }); | ||
| } else { | ||
| await github.rest.issues.createComment({ | ||
| owner: context.repo.owner, | ||
| repo: context.repo.repo, | ||
| issue_number: context.issue.number, | ||
| body, | ||
| }); | ||
| } |
There was a problem hiding this comment.
Why not have this in a JS file that we can reference by path here? Does the @actions/github-script action support providing a path to the script?
There was a problem hiding this comment.
Good callout. Split to a JS file.
4 participants
What/Why?
This feature adds automated bundle size tracking to the CI pipeline. Every time a PR is opened or updated, the build is compiled and its output is compared against a stored baseline snapshot, with the size differences posted as a PR comment. To keep that baseline from going stale, a separate workflow automatically regenerates and commits it whenever code is merged into canary or integrations/makeswift.
Testing
Bundle reporting tested below. Testing the workflow to keep baseline is sync is TBD.
Migration
N/A