CI: Show diff in bytes instead of percentage (#25630)

* CI: Show diff in bytes instead of percentage

* Fix order

.github/workflows/read-size.yml

@@ -40,9 +40,10 @@ jobs:
           TREESHAKEN=$(stat --format=%s test/treeshake/index.bundle.min.js)
           gzip -k test/treeshake/index.bundle.min.js
           TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
+          PR=${{ github.event.pull_request.number }}
 
           # write the output in a json file to upload it as artifact
-          node -pe "JSON.stringify({ filesize: $FILESIZE, gzip: $FILESIZE_GZIP, treeshaken: $TREESHAKEN, treeshakenGzip: $TREESHAKEN_GZIP, pr: ${{ github.event.pull_request.number }} })" > sizes.json
+          node -pe "JSON.stringify({ filesize: $FILESIZE, gzip: $FILESIZE_GZIP, treeshaken: $TREESHAKEN, treeshakenGzip: $TREESHAKEN_GZIP, pr: $PR })" > sizes.json
       - name: Upload artifact
         uses: actions/upload-artifact@v3
         with:

.github/workflows/report-size.yml

@@ -73,6 +73,11 @@ jobs:
         run: |
           FILESIZE_BASE=$(stat --format=%s test/treeshake/three.module.min.js)
           TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.bundle.min.js)
+
+          # log to console
+          echo "FILESIZE_BASE=$FILESIZE_BASE"
+          echo "TREESHAKEN_BASE=$TREESHAKEN_BASE"
+
           echo "FILESIZE_BASE=$FILESIZE_BASE" >> $GITHUB_OUTPUT
           echo "TREESHAKEN_BASE=$TREESHAKEN_BASE" >> $GITHUB_OUTPUT
 
@@ -117,9 +122,9 @@ jobs:
           edit-mode: replace
           body: |
             ### 📦 Bundle size
-            
+
             _Full ESM build, minified and gzipped._
-            
+
             | Filesize | Gzipped | Diff from `${{ github.ref_name }}` |
             |----------|---------|------|
             | ${{ steps.format.outputs.FILESIZE }} | ${{ steps.format.outputs.FILESIZE_GZIP }} | ${{ steps.format.outputs.FILESIZE_DIFF }} |

test/treeshake/utils/format-diff.js

@@ -1,10 +1,10 @@
 // used in report-size.yml
+import { formatBytes } from './formatBytes.js';
 
 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}%`;
+const diff = filesize - filesizeBase;
+const formatted = `${diff >= 0 ? '+' : '-'}${formatBytes( Math.abs( diff ), 2 )}`;
 
 console.log( formatted );

test/treeshake/utils/format-size.js

@@ -1,18 +1,5 @@
 // used in report-size.yml
-
-export function formatBytes( bytes, decimals = 1 ) {
-
-	if ( bytes === 0 ) return '0 B';
-
-	const k = 1000;
-	const dm = decimals < 0 ? 0 : decimals;
-	const sizes = [ 'B', 'kB', 'MB', 'GB' ];
-
-	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
-
-	return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
-
-}
+import { formatBytes } from './formatBytes.js';
 
 const n = Number( process.argv[ 2 ] );
 const formatted = formatBytes( n );

test/treeshake/utils/formatBytes.js

@@ -0,0 +1,13 @@
+export function formatBytes( bytes, decimals = 1 ) {
+
+	if ( bytes === 0 ) return '0 B';
+
+	const k = 1000;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = [ 'B', 'kB', 'MB', 'GB' ];
+
+	const i = Math.floor( Math.log( bytes ) / Math.log( k ) );
+
+	return parseFloat( ( bytes / Math.pow( k, i ) ).toFixed( dm ) ) + ' ' + sizes[ i ];
+
+}