Skip to content

Commit b05ad06

Browse files
NejcZdovcNejcZdovc
committed
Adds implementation
1 parent 0b78236 commit b05ad06

File tree

10 files changed

+23539
-29
lines changed

10 files changed

+23539
-29
lines changed

‎.github/workflows/comment.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
## Bundle size diff
2+
3+
| Old size | New size | Diff |
4+
| -------- | -------- | ------------------------ |
5+
| {OLD} | {NEW} | {DIFF} ({DIFF_PERCENT}%) |

‎.github/workflows/example.yml

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
name: Example
2+
3+
on:
4+
pull_request:
5+
6+
jobs:
7+
build-base:
8+
name: Build base
9+
runs-on: ubuntu-latest
10+
steps:
11+
- name: Checkout
12+
uses: actions/checkout@v2
13+
with:
14+
ref: ${{ github.base_ref }}
15+
16+
- name: Install dependencies
17+
run: npm ci
18+
env:
19+
NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}
20+
21+
- name: Build
22+
run: npm run build-demo
23+
24+
- name: Upload base stats.json
25+
uses: actions/upload-artifact@v2
26+
with:
27+
name: base
28+
path: ./demo/demo-dist/stats.json
29+
retention-days: 1
30+
31+
build-pr:
32+
name: Build PR
33+
runs-on: ubuntu-latest
34+
steps:
35+
- name: Checkout
36+
uses: actions/checkout@v2
37+
38+
- name: Install dependencies
39+
run: npm ci
40+
env:
41+
NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}
42+
43+
- name: Build
44+
run: npm run build-demo
45+
46+
- name: Upload base stats.json
47+
uses: actions/upload-artifact@v2
48+
with:
49+
name: pr
50+
path: ./demo/demo-dist/stats.json
51+
retention-days: 1
52+
53+
report:
54+
name: Generate report
55+
runs-on: ubuntu-latest
56+
needs: [build-base, build-pr]
57+
58+
steps:
59+
- name: Checkout PR
60+
uses: actions/checkout@v2
61+
62+
- name: Download base stats
63+
uses: actions/download-artifact@v2
64+
with:
65+
name: base
66+
path: base
67+
68+
- name: Download PR stats
69+
uses: actions/download-artifact@v2
70+
with:
71+
name: pr
72+
path: pr
73+
74+
- name: Get diff
75+
id: get-diff
76+
uses: ./
77+
with:
78+
base_path: './base/stats.json'
79+
pr_path: './pr/stats.json'
80+
81+
- name: Comment
82+
uses: NejcZdovc/[email protected]
83+
with:
84+
file: 'comment.md'
85+
env:
86+
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
87+
OLD: ${{steps.get-diff.outputs.base_file_string}}
88+
NEW: ${{steps.get-diff.outputs.pr_file_string}}
89+
DIFF: ${{steps.get-diff.outputs.diff_file_string}}
90+
DIFF_PERCENT: ${{steps.get-diff.outputs.percent}}

‎README.md

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
# Bundle size diff from webpack with Github Actions
2+
3+
Action that allows you to generate diff report between branches. This way you always know when things go sideways :)
4+
5+
![image](https://user-images.githubusercontent.com/9574457/101460311-b820ab80-3939-11eb-887f-77e4448da681.png)
6+
7+
## Inputs
8+
9+
| Name | Description | Required |
10+
| ---- | ----------- | -------- |
11+
| base_path | Path of base branch stats file | yes |
12+
| pr_path | Path of PR branch stats file | yes |
13+
14+
## Output
15+
16+
| Name | Description | Return |
17+
| ---- | ----------- | ------------ |
18+
| success | Tells you if diff was successfully generated | `'true'` / `'false'` |
19+
| base_file_size | Bundle size of base branch that you are targeting | bytes |
20+
| base_file_string | Formatted bundle size of base branch | example: `8.1 kb` |
21+
| pr_file_size | Bundle size of PR branch | bytes |
22+
| pr_file_string | Formatted bundle size of PR branch | example: `8.1 kb` |
23+
| diff_file_size | Diff size of compared branches | bytes |
24+
| diff_file_string | Formatted diff size between branches | example: `8.1 kb` |
25+
| percent | Diff size of compared presented in percentage | example: `0.14%` |
26+
27+
## Usage
28+
The key thing that you will need to do when using this action is to create a stats file from webpack.
29+
30+
You can see the simple [example](webpack_example) that we used in this repo for testing purposes.<br>
31+
You can read more about `webpack-bundle-analyzer` on [authors page](author_page).
32+
33+
To save action minutes I would suggest that you have an action that generates a new state file every time that you merge commit
34+
in the main branch.
35+
36+
An alternative approach is to generate a state file for a base branch on the fly. This approach we used in [our example](workflow) as it's a little bit more complicated.
37+
38+
Let's break down our workflow file.
39+
40+
### Build base
41+
The first job is for building a base branch. In most cases, this would be the main/master branch.
42+
43+
Important note here is that we add `ref: ${{ github.base_ref }}` in checkout action.
44+
This tells action to checkout base that you set for the PR.
45+
46+
Then we just do regular dependency install and build of our script.
47+
48+
The next section is crucial. We are doing multiple jobs to build stats files so we need to store this data between runs.
49+
To accomplish that we will be using [artifacts](artifacts). Because we only need this data for short period I like to set expiration to 1 day `retention-days: 1`.
50+
51+
```yaml
52+
build-base:
53+
name: Build base
54+
runs-on: ubuntu-latest
55+
steps:
56+
- name: Checkout
57+
uses: actions/checkout@v2
58+
with:
59+
ref: ${{ github.base_ref }}
60+
61+
- name: Install dependencies
62+
run: npm ci
63+
env:
64+
NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}
65+
66+
- name: Build
67+
run: npm run build-demo
68+
69+
- name: Upload base stats.json
70+
uses: actions/upload-artifact@v2
71+
with:
72+
name: base
73+
path: ./demo/demo-dist/stats.json
74+
retention-days: 1
75+
```
76+
77+
### Build PR
78+
Next thing is to build PR.
79+
80+
As you can see checkout now just checkouts default which is head of the PR.
81+
82+
```yaml
83+
build-pr:
84+
name: Build PR
85+
runs-on: ubuntu-latest
86+
steps:
87+
- name: Checkout
88+
uses: actions/checkout@v2
89+
90+
- name: Install dependencies
91+
run: npm ci
92+
env:
93+
NODE_AUTH_TOKEN: ${{secrets.TOKEN_REPO}}
94+
95+
- name: Build
96+
run: npm run build-demo
97+
98+
- name: Upload base stats.json
99+
uses: actions/upload-artifact@v2
100+
with:
101+
name: pr
102+
path: ./demo/demo-dist/stats.json
103+
retention-days: 1
104+
```
105+
106+
### Compare builds
107+
Now that we have stats files ready, we just need to download them which we are doing with `actions/download-artifact`, and pass them to our action.
108+
109+
In the last section, we take values that were returned from our action and print it out as a nice table via `NejcZdovc/comment-pr`.
110+
111+
```yaml
112+
report:
113+
name: Generate report
114+
runs-on: ubuntu-latest
115+
needs: [build-base, build-pr]
116+
117+
steps:
118+
- name: Checkout PR
119+
uses: actions/checkout@v2
120+
121+
- name: Download base stats
122+
uses: actions/download-artifact@v2
123+
with:
124+
name: base
125+
path: base
126+
127+
- name: Download PR stats
128+
uses: actions/download-artifact@v2
129+
with:
130+
name: pr
131+
path: pr
132+
133+
- name: Get diff
134+
id: get-diff
135+
uses: NejcZdovc/bundle-size-diff@v1
136+
with:
137+
base_path: './base/stats.json'
138+
pr_path: './pr/stats.json'
139+
140+
- name: Comment
141+
uses: NejcZdovc/[email protected]
142+
with:
143+
file: 'comment.md'
144+
env:
145+
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
146+
OLD: ${{steps.get-diff.outputs.base_file_string}}
147+
NEW: ${{steps.get-diff.outputs.pr_file_string}}
148+
DIFF: ${{steps.get-diff.outputs.diff_file_string}}
149+
DIFF_PERCENT: ${{steps.get-diff.outputs.percent}}
150+
```
151+
152+
## Bugs
153+
Please file an issue for bugs, missing documentation, or unexpected behavior.
154+
155+
## LICENSE
156+
157+
[MIT](license)
158+
159+
[license]: https://github.com/NejcZdovc/comment-pr/blob/master/LICENSE
160+
[webpack_example]: https://github.com/NejcZdovc/bundle-size-diff/blob/main/demo/webpack.config.js
161+
[author_page]: https://github.com/webpack-contrib/webpack-bundle-analyzer
162+
[workflow]: https://github.com/NejcZdovc/bundle-size-diff/blob/main/.github/workflows/example.yml
163+
[artifacts]: https://docs.github.com/en/free-pro-team@latest/actions/guides/storing-workflow-data-as-artifacts

‎action.yml

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
name: 'Bundle size diff'
2+
author: 'Nejc Zdovc'
3+
description: 'Report webpack bundle size change in the PR'
4+
inputs:
5+
base_path:
6+
description: 'Path to base stats file'
7+
required: true
8+
pr_path:
9+
description: 'Path to PR stats file'
10+
required: true
11+
outputs:
12+
success:
13+
description: 'Reports back success, boolean as string'
14+
base_file_size:
15+
description: 'Bundle size of base branch that you are targeting in the PR in bytes'
16+
base_file_string:
17+
description: 'Formatted bundle size of base branch'
18+
pr_file_size:
19+
description: 'Bundle size of PR branch in bytes'
20+
pr_file_string:
21+
description: 'Formatted bundle size of pr branch'
22+
diff_file_size:
23+
description: 'Diff size of compared branches in bytes'
24+
diff_file_string:
25+
description: 'Formatted diff size between branches'
26+
percent:
27+
description: 'Diff size of compared presented in percentage'
28+
branding:
29+
icon: bar-chart-2
30+
color: orange
31+
runs:
32+
using: 'node12'
33+
main: 'dist/index.js'

‎demo/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
function main () {
22
console.log('Hi')
3+
console.log(`Let's increase size a little bit :)`)
34
}
45

56
main()

0 commit comments

Comments
 (0)