Skip to content

Commit 61a634f

Browse files
tbouffardtbouffard
authored
chore: add scripts to report demo and npm bundle sizes (#3507)
Add two shell scripts and wire them into CI to report on bundle sizes: - scripts/list-npm-bundle-sizes.sh: reports sizes of the ESM/IIFE bundles in the npm package - scripts/list-demo-lib-chunks.sh: reports sizes of the demo's dependency chunks Split vite config chunks by dependency (including bpmn-visualization) and enable minification for the demo so chunk sizes are meaningful. Trigger the demo preview workflow when the script changes.
1 parent e8cb11c commit 61a634f

8 files changed

Lines changed: 179 additions & 32 deletions

File tree

‎.github/actions/custom-surge-preview/action.yml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,13 @@ runs:
3333
if: github.event.action != 'closed'
3434
shell: bash
3535
run: ${{ inputs.build-preview-command }}
36+
- name: List the size of the chunks in the demo
37+
if: github.event.action != 'closed' && contains(inputs.build-preview-command, 'demo')
38+
shell: bash
39+
run: |
40+
scripts/list-demo-lib-chunks.sh
41+
echo "## Demo lib chunk sizes" >> "$GITHUB_STEP_SUMMARY"
42+
scripts/list-demo-lib-chunks.sh --md-simple >> "$GITHUB_STEP_SUMMARY"
3643
- name: Manage surge preview
3744
if: steps.surge-preview-tools.outputs.can-run-surge-command == 'true'
3845
uses: afc163/surge-preview@v1

‎.github/workflows/fill-gh-draft-release.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,6 @@ jobs:
1414
contents: write
1515
steps:
1616
# Drafts your next Release notes as Pull Requests are merged into "master"
17-
- uses: release-drafter/release-drafter@v7.2.0
17+
- uses: release-drafter/release-drafter@v7.1.1
1818
env:
1919
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

‎.github/workflows/generate-demo-preview.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ on:
1212
- '.github/workflows/generate-demo-preview.yml'
1313
- 'config/**/*'
1414
- 'dev/**/*'
15+
- 'scripts/list-demo-lib-chunks.sh'
1516
- 'scripts/prepare-demo-for-publish.mjs'
1617
- 'src/**/*'
1718
- '.nvmrc'

‎.github/workflows/test-npm-package.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,11 @@ jobs:
5151
uses: ./.github/actions/build-setup
5252
- name: Build npm package
5353
run: npm pack
54+
- name: List the size of the npm package bundles
55+
run: |
56+
scripts/list-npm-bundle-sizes.sh
57+
echo "## NPM package bundle sizes" >> "$GITHUB_STEP_SUMMARY"
58+
scripts/list-npm-bundle-sizes.sh --md-simple >> "$GITHUB_STEP_SUMMARY"
5459
- name: Upload npm package
5560
uses: actions/upload-artifact@v7
5661
with:

‎package-lock.json‎

Lines changed: 25 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/list-demo-lib-chunks.sh‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
#!/usr/bin/env bash
2+
# List library chunks from the demo build output with their sizes.
3+
# Outputs a plain list and a markdown table for tracking size evolution in PRs, issues, or release notes.
4+
# Usage: list-lib-chunks.sh [--md-simple]
5+
# --md-simple Output a simple markdown table (Dependency | Size)
6+
set -euo pipefail
7+
8+
MD_SIMPLE=false
9+
if [[ "${1:-}" = "--md-simple" ]]; then
10+
MD_SIMPLE=true
11+
fi
12+
13+
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
14+
DEMO_ASSETS_DIR="${SCRIPT_DIR}/../build/demo/dev/public/assets"
15+
16+
if [[ ! -d "$DEMO_ASSETS_DIR" ]]; then
17+
echo "Error: demo assets directory not found. Run 'npm run demo:build." >&2
18+
exit 1
19+
fi
20+
21+
# Collect lib chunks with their size in KB
22+
declare -a names=()
23+
declare -a sizes=()
24+
25+
for file in "$DEMO_ASSETS_DIR"/lib-*.js; do
26+
[[ -f "$file" ]] || continue
27+
filename=$(basename "$file")
28+
# Extract dependency name: lib-<name>.js -> <name>
29+
dep_name=$(echo "$filename" | sed 's/^lib-//;s/\.js$//')
30+
size_kb=$(LC_NUMERIC=C awk "BEGIN {printf \"%.2f\", $(stat --format=%s "$file") / 1000}")
31+
names+=("$dep_name")
32+
sizes+=("$size_kb")
33+
done
34+
35+
if [[ ${#names[@]} -eq 0 ]]; then
36+
echo "No lib-*.js chunks found in dist/assets." >&2
37+
exit 1
38+
fi
39+
40+
# Compute total
41+
total=$(LC_NUMERIC=C awk "BEGIN {t=0; $(for s in "${sizes[@]}"; do printf "t+=%s;" "$s"; done) printf \"%.2f\", t}")
42+
43+
if [[ "$MD_SIMPLE" = true ]]; then
44+
# Simple markdown table
45+
echo "| Dependency | Size |"
46+
echo "|---|---|"
47+
for i in "${!names[@]}"; do
48+
echo "| ${names[$i]} | ${sizes[$i]} kB |"
49+
done
50+
echo "| **TOTAL** | **${total} kB** |"
51+
else
52+
# Plain list
53+
echo "=== Lib chunks ==="
54+
for i in "${!names[@]}"; do
55+
printf "%-25s %s kB\n" "${names[$i]}" "${sizes[$i]}"
56+
done
57+
printf "%-25s %s kB\n" "TOTAL" "$total"
58+
echo ""
59+
# Markdown table for tracking size evolution
60+
echo "=== Markdown table ==="
61+
echo "| Dependency | Before | Current |"
62+
echo "|---|---|---|"
63+
for i in "${!names[@]}"; do
64+
echo "| ${names[$i]} | | ${sizes[$i]} kB |"
65+
done
66+
echo "| **TOTAL** | | **${total} kB** |"
67+
fi

‎scripts/list-npm-bundle-sizes.sh‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
#!/usr/bin/env bash
2+
# List npm package bundles from dist/ with their sizes (bytes and kB).
3+
# Outputs a plain list and a markdown table for tracking size evolution in PRs, issues, or release notes.
4+
# Usage: list-npm-bundle-sizes.sh [--md-simple]
5+
# --md-simple Output a simple markdown table (Bundle | Size)
6+
set -euo pipefail
7+
8+
MD_SIMPLE=false
9+
if [[ "${1:-}" = "--md-simple" ]]; then
10+
MD_SIMPLE=true
11+
fi
12+
13+
SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
14+
DIST_DIR="${SCRIPT_DIR}/../dist"
15+
16+
if [[ ! -d "$DIST_DIR" ]]; then
17+
echo "Error: dist directory not found. Run 'npm run build-bundles' first." >&2
18+
exit 1
19+
fi
20+
21+
BUNDLES=(
22+
"bpmn-visualization.min.js"
23+
"bpmn-visualization.js"
24+
"bpmn-visualization.esm.js"
25+
)
26+
27+
declare -a names=()
28+
declare -a bytes=()
29+
declare -a kb=()
30+
31+
for bundle in "${BUNDLES[@]}"; do
32+
file="$DIST_DIR/$bundle"
33+
if [[ ! -f "$file" ]]; then
34+
echo "Error: bundle not found: $file. Run 'npm run build-bundles' first." >&2
35+
exit 1
36+
fi
37+
size_bytes=$(stat --format=%s "$file")
38+
size_kb=$(LC_NUMERIC=C awk "BEGIN {printf \"%.1f\", $size_bytes / 1024}")
39+
# Format bytes with space as thousands separator (e.g. 998629 -> "998 629")
40+
size_bytes_fmt=$(echo "$size_bytes" | sed ':a;s/\B[0-9]\{3\}\>/ &/;ta')
41+
names+=("$bundle")
42+
bytes+=("$size_bytes_fmt")
43+
kb+=("$size_kb")
44+
done
45+
46+
if [[ "$MD_SIMPLE" = true ]]; then
47+
echo "| Bundle | Size |"
48+
echo "|---|---|"
49+
for i in "${!names[@]}"; do
50+
echo "| ${names[$i]} | ${kb[$i]} kB |"
51+
done
52+
else
53+
echo "=== NPM package bundles ==="
54+
for i in "${!names[@]}"; do
55+
printf "%-30s %12s bytes %8s kB\n" "${names[$i]}" "${bytes[$i]}" "${kb[$i]}"
56+
done
57+
echo ""
58+
echo "=== Markdown table ==="
59+
echo "| bundle | before | now |"
60+
echo "|---|---|---|"
61+
for i in "${!names[@]}"; do
62+
echo "| ${names[$i]} | | ${bytes[$i]} bytes |"
63+
echo "| | | ${kb[$i]} kB |"
64+
done
65+
fi

‎vite.config.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,17 @@ export default defineConfig(({ mode }) => {
4343
entryFileNames: `dev/public/assets/[name].js`,
4444
chunkFileNames: `dev/public/assets/[name].js`,
4545
assetFileNames: `dev/public/assets/[name].[ext]`,
46-
manualChunks: {
47-
// put mxgraph code in a dedicated file. As it is eol, it doesn't change from release to release, so it reduces the changes when uploading the demo to the examples repository
48-
mxgraph: ['mxgraph'],
46+
// Put dependencies in dedicated files to track the impact of their updates on the demo.
47+
manualChunks(id) {
48+
if (id.includes('node_modules/es-toolkit')) return 'lib-es-toolkit';
49+
if (id.includes('node_modules/fast-xml-parser')) return 'lib-fast-xml-parser';
50+
if (id.includes('node_modules/mxgraph')) return 'lib-mxgraph';
51+
// bpmn-visualization code built from src/
52+
if (!id.includes('node_modules') && id.includes('/src/')) return 'lib-bpmn-visualization';
4953
},
5054
},
5155
},
56+
// minify: false, // uncomment to see the code in clear
5257
chunkSizeWarningLimit: 838, // mxgraph
5358
},
5459
preview: {

0 commit comments

Comments
 (0)
⚡