Build: Report Brotli sizes in compareSize

mgol · web-flow · commit e4b5e6227717 · 2024-11-25T23:21:37.000+01:00
So far, we were mostly optimizing gzipped sizes. However, using Brotli is more and more popular as all modern browsers support it and compression is much better. It makes sense to also pay attention to these numbers. The `comparseSize` version stays at `2` as this only introduces a new field without affecting existing ones. The only drawback is comparisons with branches that didnt have Brotli computed before will return `NaN`. This can be easily fixed locally by checking out the branch and running the build, but at least we don't lose gzipped sizes in the meantime. Closes gh-5586
diff --git a/build/tasks/lib/compareSize.js b/build/tasks/lib/compareSize.js
@@ -9,6 +9,7 @@ const VERSION = 2;
 const lastRunBranch = " last run";
 
 const gzip = promisify( zlib.gzip );
+const brotli = promisify( zlib.brotliCompress );
 const exec = promisify( nodeExec );
 
 async function getBranchName() {
@@ -53,7 +54,8 @@ function cacheResults( results ) {
 	results.forEach( function( result ) {
 		files[ result.filename ] = {
 			raw: result.raw,
-			gz: result.gz
+			gz: result.gz,
+			br: result.br
 		};
 	} );
 	return files;
@@ -103,6 +105,7 @@ export async function compareSize( { cache = ".sizecache.json", files } = {} ) {
 
 	let rawPadLength = 0;
 	let gzPadLength = 0;
+	let brPadLength = 0;
 	const results = await Promise.all(
 		files.map( async function( filename ) {
 
@@ -116,23 +119,27 @@ export async function compareSize( { cache = ".sizecache.json", files } = {} ) {
 
 			const size = Buffer.byteLength( contents, "utf8" );
 			const gzippedSize = ( await gzip( contents ) ).length;
+			const brotlifiedSize = ( await brotli( contents ) ).length;
 
 			// Add one to give space for the `+` or `-` in the comparison
 			rawPadLength = Math.max( rawPadLength, size.toString().length + 1 );
 			gzPadLength = Math.max( gzPadLength, gzippedSize.toString().length + 1 );
+			brPadLength = Math.max( brPadLength, brotlifiedSize.toString().length + 1 );
 
-			return { filename, raw: size, gz: gzippedSize };
+			return { filename, raw: size, gz: gzippedSize, br: brotlifiedSize };
 		} )
 	);
 
 	const sizeHeader = "raw".padStart( rawPadLength ) +
 		"gz".padStart( gzPadLength + 1 ) +
+		"br".padStart( brPadLength + 1 ) +
 		" Filename";
 
 	const sizes = results.map( function( result ) {
 		const rawSize = result.raw.toString().padStart( rawPadLength );
 		const gzSize = result.gz.toString().padStart( gzPadLength );
-		return `${ rawSize } ${ gzSize } ${ result.filename }`;
+		const brSize = result.br.toString().padStart( brPadLength );
+		return `${ rawSize } ${ gzSize } ${ brSize } ${ result.filename }`;
 	} );
 
 	const comparisons = Object.keys( sizeCache ).sort( sortBranches ).map( function( branch ) {
@@ -148,7 +155,8 @@ export async function compareSize( { cache = ".sizecache.json", files } = {} ) {
 
 			const compareRaw = compareSizes( branchResult.raw, compareResult.raw, rawPadLength );
 			const compareGz = compareSizes( branchResult.gz, compareResult.gz, gzPadLength );
-			return `${ compareRaw } ${ compareGz } ${ filename }`;
+			const compareBr = compareSizes( branchResult.br, compareResult.br, brPadLength );
+			return `${ compareRaw } ${ compareGz } ${ compareBr } ${ filename }`;
 		} );
 
 		return [
