A GitHub Action for bundle size analysis and reporting
- Types
- ESM
- CJS
- License
- MIT
- Install Size
- 46.6 kB(125.2 MB)
- Vulns
- 24
- Published
$
npm install @yifancong/bundle-actions$
pnpm add @yifancong/bundle-actions$
yarn add @yifancong/bundle-actions$
bun add @yifancong/bundle-actions$
deno add npm:@yifancong/bundle-actions$
vlt install @yifancong/bundle-actions$
vp add @yifancong/bundle-actionsCompressed Size Action Demo
This is a simplified GitHub Action for checking file compression size differences before and after code changes.
Features
- Intelligently detects GitHub event types and automatically executes corresponding operations
- On MR submission: Only downloads target branch artifacts (if they exist)
- On MR merge: Only uploads current branch artifacts
- Supports custom file paths
- Finds target branch's latest commit through GitHub API
- Artifacts named by commit hash to avoid conflicts
Smart Behavior
๐ On MR Merge (push to main branch)
- Only uploads current branch artifacts
- Artifact naming:
path-filename-commithash.extension - Used to save the latest baseline data
๐ฅ On MR Submission (pull_request event)
- Only downloads target branch artifacts (if they exist)
- If target branch artifacts are found, downloads and compares
- If not found, prints "No baseline data found"
- Used to compare current changes with baseline data
Configuration
- uses: ./
with:
# GitHub token for API access
github_token: ${{ secrets.GITHUB_TOKEN }}
# File path to upload (relative to project root)
file_path: 'artifacts/1.json'
# Target branch (defaults to main)
target_branch: 'main'
Artifact Naming Rules
Artifacts will be named using the following format:
- Format:
path-filename-commithash.extension - Example:
artifacts-1-f18c5686ba.json
Usage Scenarios
Scenario 1: On MR Submission
on:
pull_request:
types: [opened, synchronize]
The Action will:
- Find the latest commit of the target branch
- Attempt to download the corresponding artifact
- If real baseline data is found, use real data for comparison
- If not found, use built-in demo data as baseline for comparison display
- Generate Bundle Size Report card
Scenario 2: On MR Merge
on:
push:
branches: [main]
The Action will:
- Upload current branch artifacts
- Generate simple Bundle Size Report card
- Artifacts will serve as baseline data for subsequent MRs
Report Card Example
The Action will generate a report card in the following format in GitHub CI:
๐ฆ Bundle Size Report
| Metric | Current | Baseline |
|---|---|---|
| ๐ Total Size | 100.0 MB | 99.0 MB |
| ๐ Files Count | 3 | 3 |
๐ File Details
| File | Size |
|---|---|
| dist/main.js | 50.0 MB |
| dist/vendor.js | 40.0 MB |
| dist/styles.css | 10.0 MB |
JSON File Format
The JSON file pointed to by your file_path should contain data in the following format:
{
"totalSize": 104857600,
"files": [
{
"path": "dist/main.js",
"size": 52428800,
"gzipSize": 10485760,
"brotliSize": 8388608
},
{
"path": "dist/vendor.js",
"size": 41943040
}
]
}
totalSize: Total size (in bytes)files: File list, each file contains path and size information
Demo Baseline Data
When real artifacts from the target branch cannot be found, the Action will automatically use built-in demo data as baseline for comparison:
{
"totalSize": 103809024, // ~99MB
"files": [
{
"path": "dist/main.js",
"size": 51380224 // ~49MB
},
{
"path": "dist/vendor.js",
"size": 41943040 // ~40MB
},
{
"path": "dist/styles.css",
"size": 10485760 // ~10MB
}
]
}
This way, even on first run or when there's no historical data, meaningful comparison reports can be generated to help developers understand the current build size situation.
Development
# Install dependencies
npm install
# Build
npm run build