add build size stats

config/jest-browser.rollup.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const crypto = require('crypto');
 const path = require('path');
 const del = require('del');
+const chalk = require('chalk');
 const readline = require('readline');
 const rollup = require('rollup');
 const rollupPluginHtml = require('@rollup/plugin-html');
@@ -168,7 +169,7 @@ const setupRollupTest = async (rootDir, testPath, cacheDir, watch) => {
           const getHtmlFileContent = () => (fs.existsSync(htmlFilePath) ? fs.readFileSync(htmlFilePath, 'utf8') : null);
           const logBuilding = (re) => {
             const text = re ? ' RE-BUILDING ' : ' BUILDING ';
-            console.log(`\x1b[1m\x1b[44m${text}\x1b[0m \x1b[90m${testPath}\x1b[0m`); // eslint-disable-line
+            console.log(`${chalk.bgBlue.bold.whiteBright(text)} ${chalk.blackBright(testPath)}`); // eslint-disable-line
           };
           const logBundleFinish = (duration) => {
             if (duration) {

package.json

@@ -22,6 +22,7 @@
     "babel-plugin-istanbul": "^6.0.0",
     "bufferutil": "^4.0.1",
     "canvas": "^2.6.1",
+    "chalk": "^4.1.0",
     "core-js": "^3.6.5",
     "del": "^5.1.0",
     "eslint": "^7.5.0",
@@ -53,6 +54,7 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-prettier": "^2.1.0",
     "rollup-plugin-serve": "^1.1.0",
+    "rollup-plugin-size-snapshot": "^0.12.0",
     "rollup-plugin-styles": "^3.10.0",
     "rollup-plugin-terser": "^6.1.0",
     "rollup-plugin-typescript2": "^0.27.1",

packages/overlayscrollbars/rollup.sizeSnapshot.json

@@ -0,0 +1,40 @@
+{
+  "overlayscrollbars.js": {
+    "bundled": 56898,
+    "minified": 17946,
+    "gzipped": 7281
+  },
+  "overlayscrollbars.min.js": {
+    "bundled": 16552,
+    "minified": 16524,
+    "gzipped": 6956
+  },
+  "overlayscrollbars.esm.js": {
+    "bundled": 49032,
+    "minified": 22137,
+    "gzipped": 7992,
+    "treeshaked": {
+      "rollup": {
+        "code": 1641,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 2773
+      }
+    }
+  },
+  "overlayscrollbars.esm.min.js": {
+    "bundled": 14911,
+    "minified": 14861,
+    "gzipped": 6756,
+    "treeshaked": {
+      "rollup": {
+        "code": 1629,
+        "import_statements": 0
+      },
+      "webpack": {
+        "code": 2762
+      }
+    }
+  }
+}

rollup.config.base.js

@@ -1,6 +1,7 @@
 const { nodeResolve: rollupResolve } = require('@rollup/plugin-node-resolve');
 const { babel: rollupBabelInputPlugin, createBabelInputPluginFactory } = require('@rollup/plugin-babel');
 const { terser: rollupTerser } = require('rollup-plugin-terser');
+const { sizeSnapshot: rollupSizeSnapshot } = require('rollup-plugin-size-snapshot');
 const rollupInject = require('@rollup/plugin-inject');
 const rollupCommonjs = require('@rollup/plugin-commonjs');
 const rollupTypescript = require('rollup-plugin-typescript2');
@@ -8,9 +9,11 @@ const rollupPrettier = require('rollup-plugin-prettier');
 const del = require('del');
 const fs = require('fs');
 const path = require('path');
+const chalk = require('chalk');
 const resolve = require('./resolve.config.json');
 
 const isTestEnv = process.env.NODE_ENV === 'test';
+const sizeSnapshotFilename = 'rollup.sizeSnapshot.json';
 
 const rollupConfigDefaults = {
   input: './src/index',
@@ -267,7 +270,7 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
         const plugin = typeof item === 'string' ? pipelineMap[item] : item;
         arr.push(...(Array.isArray(plugin) ? plugin : [plugin]));
         return arr;
-      }, []),
+      }, [].concat(isTestEnv ? [] : [rollupSizeSnapshot({ printInfo: false, snapshotPath: sizeSnapshotFilename })])),
     };
   };
 
@@ -280,11 +283,22 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
   const legacy = genConfig({ esm: false, typeDeclaration: true });
   const esm = esmBuild ? genConfig({ esm: true, typeDeclaration: false }) : null;
 
+  let outputs = 0;
   const builds = [legacy, esm]
     .filter((build) => build !== null)
+    .map((build, index, buildsArr) => {
+      if (index === 0) {
+        buildsArr.forEach((build) => {
+          const { output } = build;
+          outputs += Array.isArray(output) ? output.length : 1;
+        });
+      }
+      return build;
+    })
     .map((build, index, buildsArr) => {
       const isFirst = index === 0;
       const isLast = index === buildsArr.length - 1;
+      const isLastFile = () => outputs === 0;
 
       if (isFirst) {
         const deleteGeneratedDirs = () => {
@@ -302,6 +316,7 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
           },
         });
       }
+
       if (isLast) {
         const deleteCacheDirs = () => {
           const cacheDirs = cache.map((dir) => path.resolve(projectPath, dir));
@@ -313,14 +328,67 @@ const rollupConfig = (config = {}, { project = process.cwd(), overwrite = {}, si
         build.plugins.push({
           name: 'deleteCacheDirs',
           writeBundle() {
-            if (!this.meta.watchMode) {
+            if (!this.meta.watchMode && isLastFile()) {
               deleteCacheDirs();
             }
           },
           closeWatcher: deleteCacheDirs,
         });
+
+        if (!isTestEnv && !silent) {
+          const snapshotPath = resolvePath(projectPath, sizeSnapshotFilename);
+          if (fs.existsSync(snapshotPath)) {
+            const sizeSnapshotBefore = require(snapshotPath);
+
+            build.plugins.push({
+              name: 'compareSizeSnapshots',
+              writeBundle() {
+                if (isLastFile()) {
+                  delete require.cache[snapshotPath];
+                  const sizeSnapshotAfter = require(snapshotPath);
+                  const { yellow, white, green, red, blackBright } = chalk;
+
+                  const printColoredPercent = (value) => {
+                    const fixed = `${value.toFixed(2)}%`;
+                    if (value === 0) {
+                      return white(fixed);
+                    }
+                    if (value > 0) {
+                      return red(`+${fixed}`);
+                    }
+                    if (value < 0) {
+                      return green(fixed);
+                    }
+                  };
+
+                  Object.keys(sizeSnapshotAfter).forEach((key) => {
+                    const { bundled, gzipped } = sizeSnapshotAfter[key];
+                    const { bundled: bundledBefore = bundled / 2, gzipped: gzippedBefore = gzipped / 2 } = sizeSnapshotBefore[key] || {};
+
+                    const bundledPercent = printColoredPercent(((bundled - bundledBefore) / bundledBefore) * 100);
+                    const gzippedPercent = printColoredPercent(((gzipped - gzippedBefore) / gzippedBefore) * 100);
+
+                    setTimeout(() => {
+                      console.log('');
+                      console.log(yellow(key));
+                      console.log(`bundled: ${bundledPercent}`, blackBright(`(previous: ${bundledBefore} | new: ${bundled})`));
+                      console.log(`gzipped: ${gzippedPercent}`, blackBright(`(previous: ${gzippedBefore} | new: ${gzipped})`));
+                    }, 1);
+                  });
+                }
+              },
+            });
+          }
+        }
       }
 
+      build.plugins.unshift({
+        name: 'decreaseOutputs',
+        writeBundle() {
+          outputs -= 1;
+        },
+      });
+
       return build;
     });