Prints bundle sizes in build script log (#9900)

* Prints bundle size with flags

* Add "gzipped" to cspell.json

* Print esm bundle size

* Remove gzipped size from log

package.json

@@ -120,6 +120,7 @@
     "npm-run-all": "4.1.5",
     "path-browserify": "1.0.1",
     "prettier": "2.2.1",
+    "pretty-bytes": "5.4.1",
     "rimraf": "3.0.2",
     "rollup": "2.35.1",
     "rollup-plugin-node-globals": "1.4.0",

scripts/build/build.js

@@ -2,6 +2,7 @@
 
 const path = require("path");
 const fs = require("fs");
+const readline = require("readline");
 const chalk = require("chalk");
 const execa = require("execa");
 const minimist = require("minimist");
@@ -40,17 +41,18 @@ for (const { color, text } of statusConfig) {
   status[text] = chalk[color].black(padStatusText(text));
 }
 
-function fitTerminal(input) {
+function fitTerminal(input, suffix = "") {
   const columns = Math.min(process.stdout.columns || 40, 80);
   const WIDTH = columns - maxLength + 1;
   if (input.length < WIDTH) {
-    input += chalk.dim(".").repeat(WIDTH - input.length - 1);
+    const repeatCount = WIDTH - input.length - 1 - suffix.length;
+    input += chalk.dim(".").repeat(repeatCount) + suffix;
   }
   return input;
 }
 
 async function createBundle(bundleConfig, cache, options) {
-  const { output, target } = bundleConfig;
+  const { output, target, format, type } = bundleConfig;
   process.stdout.write(fitTerminal(output));
   try {
     const { cached, skipped } = await bundler(bundleConfig, cache, options);
@@ -65,17 +67,41 @@ async function createBundle(bundleConfig, cache, options) {
       return;
     }
 
+    const file = path.join("dist", output);
+    const content = fs.readFileSync(file, "utf8");
+
     // Files including U+FFEE can't load in Chrome Extension
     // `prettier-chrome-extension` https://github.com/prettier/prettier-chrome-extension
     // details https://github.com/prettier/prettier/pull/8534
     if (target === "universal") {
-      const file = path.join("dist", output);
-      const content = fs.readFileSync(file, "utf8");
       if (content.includes("\ufffe")) {
         throw new Error("Bundled umd file should not have U+FFFE character.");
       }
     }
 
+    if (options["print-size"]) {
+      // Clear previous line
+      readline.clearLine(process.stdout, 0);
+      readline.cursorTo(process.stdout, 0, null);
+
+      const prettyBytes = require("pretty-bytes");
+      const getSizeText = (file) => prettyBytes(fs.statSync(file).size);
+      const sizeTexts = [getSizeText(file, content)];
+      if (
+        type !== "core" &&
+        format !== "esm" &&
+        bundleConfig.bundler !== "webpack" &&
+        target === "universal"
+      ) {
+        const esmFile = path.join("dist/esm", output.replace(".js", ".mjs"));
+        const esmContent = fs.readFileSync(esmFile, "utf8");
+        sizeTexts.push(`esm ${getSizeText(esmFile, esmContent)}`);
+      }
+      process.stdout.write(
+        fitTerminal(output, sizeTexts.join(", ").concat(" "))
+      );
+    }
+
     console.log(status.DONE);
   } catch (error) {
     console.log(status.FAIL + "\n");
@@ -153,6 +179,6 @@ async function run(params) {
 
 run(
   minimist(process.argv.slice(2), {
-    boolean: ["purge-cache", "playground"],
+    boolean: ["purge-cache", "playground", "print-size"],
   })
 );

yarn.lock

@@ -5912,6 +5912,11 @@ prettier@2.2.1:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
   integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
 
+pretty-bytes@5.4.1:
+  version "5.4.1"
+  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.4.1.tgz#cd89f79bbcef21e3d21eb0da68ffe93f803e884b"
+  integrity sha512-s1Iam6Gwz3JI5Hweaz4GoCD1WUNUIyzePFy5+Js2hjwGVt2Z79wNN+ZKOZ2vB6C+Xs6njyB84Z1IthQg8d9LxA==
+
 pretty-format@^26.1.0:
   version "26.1.0"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-26.1.0.tgz#272b9cd1f1a924ab5d443dc224899d7a65cb96ec"