Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CI: Report tree-shaking size in PR #25615

Merged
merged 6 commits into from
Mar 6, 2023
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 47 additions & 0 deletions .github/workflows/read-size.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
name: Read size

on:
pull_request:
paths:
- 'src/**'
- 'package.json'

# This workflow runs in a read-only environment. We can safely checkout
# the PR code here.
# Reference:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
permissions:
contents: read

jobs:
treeshaking:
name: Tree-shaking
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@v3
- name: Install Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build-module
- name: === Test tree-shaking ===
run: npm run test-treeshake
- name: Read tree-shaken size
id: read-size
run: |
FILESIZE=$(stat --format=%s test/treeshake/index.bundle.min.js)
gzip -k test/treeshake/index.bundle.min.js
FILESIZE_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)

# write the output in a json file to upload it as artifact
node -pe "JSON.stringify({ filesize: $FILESIZE, gzip: $FILESIZE_GZIP })" > sizes.json
- name: Upload artifact
uses: actions/upload-artifact@v3
with:
name: sizes
path: sizes.json
103 changes: 103 additions & 0 deletions .github/workflows/report-size.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
name: Report size

on:
workflow_run:
workflows: ["Read size"]
marcofugaro marked this conversation as resolved.
Show resolved Hide resolved
types:
- completed

# This workflow needs to be run with "pull-requests: write" permissions to
# be able to comment on the pull request. We can't checkout the PR code
# in this workflow.
# Reference:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
permissions:
pull-requests: write

jobs:
treeshaking:
name: Tree-shaking
runs-on: ubuntu-latest
if: github.event.workflow_run.event == 'pull_request' &&
github.event.workflow_run.conclusion == 'success'
steps:
# Using actions/download-artifact doesn't work here
# https://github.com/actions/download-artifact/issues/60
- name: Download artifact
uses: actions/github-script@v6
id: download-artifact
with:
result-encoding: string
script: |
const fs = require('fs/promises');

const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
owner: context.repo.owner,
repo: context.repo.repo,
run_id: context.payload.workflow_run.id,
});
const matchArtifact = artifacts.data.artifacts.find((artifact) => artifact.name === 'sizes');
const download = await github.rest.actions.downloadArtifact({
owner: context.repo.owner,
repo: context.repo.repo,
artifact_id: matchArtifact.id,
archive_format: 'zip',
});

await fs.writeFile('sizes.zip', Buffer.from(download.data));
await exec.exec('unzip sizes.zip');
const json = await fs.readFile('sizes.json', 'utf8');
return json;

# This runs on the base branch of the PR, meaning "dev"
- name: Git checkout
uses: actions/checkout@v3
- name: Install Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build-module
- name: === Test tree-shaking ===
run: npm run test-treeshake
- name: Read tree-shaken size
id: read-size
run: |
FILESIZE_BASE=$(stat --format=%s test/treeshake/index.bundle.min.js)
echo "FILESIZE_BASE=$FILESIZE_BASE" >> $GITHUB_OUTPUT

- name: Format sizes
id: format
env:
FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize }}
FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip }}
FILESIZE_BASE: ${{ steps.read-size.outputs.FILESIZE_BASE }}
run: |
FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE")
FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$FILESIZE_GZIP")
FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$FILESIZE" "$FILESIZE_BASE")
echo "FILESIZE=$FILESIZE_FORM" >> $GITHUB_OUTPUT
echo "FILESIZE_GZIP=$FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "FILESIZE_DIFF=$FILESIZE_DIFF" >> $GITHUB_OUTPUT

- name: Find existing comment
uses: peter-evans/find-comment@v2
id: find-comment
with:
issue-number: ${{ github.event.workflow_run.pull_requests[0].number }}
comment-author: 'github-actions[bot]'
body-includes: Bundle size
- name: Comment on PR
uses: peter-evans/create-or-update-comment@v2
with:
issue-number: ${{ github.event.workflow_run.pull_requests[0].number }}
comment-id: ${{ steps.find-comment.outputs.comment-id }}
edit-mode: replace
body: |
### 📦 Bundle size after tree-shaking
| Filesize | Gzipped | Diff from `${{ github.ref_name }}` |
|----------|---------|------|
| ${{ steps.format.outputs.FILESIZE }} | ${{ steps.format.outputs.FILESIZE_GZIP }} | ${{ steps.format.outputs.FILESIZE_DIFF }} |
19 changes: 19 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@
"failonlyreporter": "^1.0.0",
"jimp": "^0.22.5",
"pixelmatch": "^5.3.0",
"pretty-bytes": "^6.1.0",
"puppeteer-core": "^19.7.2",
"qunit": "^2.19.4",
"rollup": "^3.17.2",
Expand Down
10 changes: 10 additions & 0 deletions test/treeshake/utils/format-diff.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// used in report-size.yml

const filesize = Number( process.argv[ 2 ] );
const filesizeBase = Number( process.argv[ 3 ] );

const diff = ( filesize - filesizeBase ) * 100 / filesizeBase;
const diffString = diff.toFixed( 2 ).slice( - 1 ) === '0' ? diff.toFixed( 1 ) : diff.toFixed( 2 );
const formatted = `${diff >= 0 ? '+' : ''}${diffString}%`;

console.log( formatted );
7 changes: 7 additions & 0 deletions test/treeshake/utils/format-size.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// used in report-size.yml
import prettyBytes from 'pretty-bytes';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe just this function, instead of a new dependency?

export function formatBytes(bytes: number, decimals = 2): string {
	if (bytes === 0) return '0 Bytes';

	const k = 1000;
	const dm = decimals < 0 ? 0 : decimals;
	const sizes = ['Bytes', 'KB', 'MB'];

	const i = Math.floor(Math.log(bytes) / Math.log(k));

	return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Less dependencies is good 👍

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the function @donmccurdy! Updated.


const n = Number( process.argv[ 2 ] );
const formatted = prettyBytes( n, { minimumFractionDigits: 0, maximumFractionDigits: 1 } );

console.log( formatted );