Build: Report Brotli sizes in compareSize

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

1 files changed, 12 insertions, 4 deletions

diff --git a/build/tasks/lib/compareSize.js b/build/tasks/lib/compareSize.js
index 86548a6da..4cb0b40c5 100644
--- 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 [