chore: new bundle size tool

Author: layershifter

apps/bundle-size/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "extends": ["plugin:@fluentui/eslint-plugin/node"],
+  "root": true,
+  "rules": {
+    "import/no-extraneous-dependencies": "off"
+  }
+}

apps/bundle-size/README.md

@@ -0,0 +1,39 @@
+## `bundle-size`
+
+A tool to measure bundle size locally and on CI.
+
+**To ensure that we are measuring the same artifacts as customers `bundle-size` requires to build packages first.**
+
+### Fixtures
+
+A tool relies on fixtures represented by JavaScript files, fixtures are created inside each package.
+
+For example:
+
+```js
+import { Component } from '@fluentui/react-component';
+
+console.log(Component);
+// 👆 "console.log()" is the easiest way to prevent tree-shaking
+
+export default {
+  name: 'Component',
+  // 👆 defines a name for story that will be used in output
+};
+```
+
+### `build`
+
+```sh
+yarn bundle-size build [--verbose]
+```
+
+Builds fixtures and produces artifacts.
+
+For each fixture:
+
+- `[fixture].fixture.js` - a modified fixture without a default export, used by a bundler
+- `[fixture].output.js` - a partially minified file, useful for debugging
+- `[fixture].min.js` - a fully minified file, used for measurements
+
+A report file `bundle-size.json` that is used by other steps.

apps/bundle-size/bin/bundle-size.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../src/index');

apps/bundle-size/just.config.ts

@@ -0,0 +1,3 @@
+import { preset } from '@fluentui/scripts';
+
+preset();

apps/bundle-size/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "bundle-size",
+  "version": "1.0.0",
+  "private": true,
+  "bin": {
+    "bundle-size": "./bin/bundle-size.js"
+  },
+  "scripts": {
+    "build": "tsc --noEmit",
+    "lint": "just-scripts lint"
+  }
+}

apps/bundle-size/src/commands/build.js

@@ -0,0 +1,67 @@
+// @ts-check
+
+const chalk = require('chalk');
+const Table = require('cli-table3');
+const fs = require('fs-extra');
+const glob = require('glob');
+const path = require('path');
+const prettyBytes = require('pretty-bytes');
+
+const buildFixture = require('../utils/buildFixture');
+const { hrToSeconds } = require('../utils/helpers');
+const prepareFixture = require('../utils/prepareFixture');
+
+/**
+ * @param {{ verbose: boolean }} options
+ */
+async function build(options) {
+  const { verbose } = options;
+
+  const startTime = process.hrtime();
+  const artifactsDir = path.resolve(process.cwd(), 'dist', 'bundle-size');
+
+  await fs.remove(artifactsDir);
+
+  if (verbose) {
+    console.log(`${chalk.blue('[i]')} artifacts dir is cleared`);
+  }
+
+  const fixtures = glob.sync('bundle-size/*.fixture.js', {
+    cwd: process.cwd(),
+  });
+
+  if (verbose) {
+    console.log(`${chalk.blue('[i]')} Measuring bundle size for ${fixtures.length} fixture(s)...`);
+    console.log(fixtures.map(fixture => `  - ${fixture}`).join('\n'));
+  }
+
+  const preparedFixtures = await Promise.all(fixtures.map(prepareFixture));
+  const measurements = [];
+
+  for (const preparedFixture of preparedFixtures) {
+    measurements.push(await buildFixture(preparedFixture, verbose));
+  }
+
+  measurements.sort((a, b) => a.path.localeCompare(b.path));
+
+  await fs.writeJSON(path.resolve(process.cwd(), 'dist', 'bundle-size', 'bundle-size.json'), measurements);
+
+  if (verbose) {
+    const table = new Table({
+      head: ['Fixture', 'Minified size', 'GZIP size'],
+    });
+
+    measurements.forEach(r => {
+      table.push([r.name, prettyBytes(r.minifiedSize), prettyBytes(r.gzippedSize)]);
+    });
+
+    console.log(table.toString());
+    console.log(`Completed in ${hrToSeconds(process.hrtime(startTime))}`);
+  }
+}
+
+// ---
+
+exports.command = 'build';
+exports.desc = 'builds bundle size fixtures and generates JSON report';
+exports.handler = build;

apps/bundle-size/src/index.js

@@ -0,0 +1,12 @@
+// @ts-check
+
+require('yargs')
+  .commandDir('commands')
+
+  .option('verbose', {
+    alias: 'v',
+    type: 'boolean',
+    description: 'Run with verbose logging',
+    default: false,
+  })
+  .help().argv;

apps/bundle-size/src/utils/buildFixture.js

@@ -0,0 +1,148 @@
+// @ts-check
+
+const chalk = require('chalk');
+const gzipSize = require('gzip-size');
+const fs = require('fs-extra');
+const path = require('path');
+const { minify } = require('terser');
+const webpack = require('webpack');
+
+const { hrToSeconds } = require('./helpers');
+
+/**
+ * @param {string} fixturePath
+ * @param {string} outputPath
+ *
+ * @return {import("webpack").Configuration}
+ */
+function createWebpackConfig(fixturePath, outputPath) {
+  return {
+    name: 'client',
+    target: 'web',
+    mode: 'production',
+
+    cache: {
+      type: 'memory',
+    },
+    externals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+
+    entry: fixturePath,
+    output: {
+      filename: path.basename(outputPath),
+      path: path.dirname(outputPath),
+
+      pathinfo: true,
+    },
+    performance: {
+      hints: false,
+    },
+    optimization: {
+      minimize: false,
+    },
+    stats: {
+      optimizationBailout: true,
+    },
+  };
+}
+
+/**
+ * @param {import("webpack").Configuration} webpackConfig
+ * @return {Promise<null>}
+ */
+function webpackAsync(webpackConfig) {
+  return new Promise((resolve, reject) => {
+    const compiler = webpack(webpackConfig);
+
+    compiler.run(err => {
+      if (err) {
+        reject(err);
+      }
+
+      resolve(null);
+    });
+  });
+}
+
+// ---
+
+/** @typedef {{ name: string, path: string, minifiedSize: number, gzippedSize: number }} BuildResult */
+
+/**
+ * Builds a fixture with Webpack and then minifies it with Terser. Produces two files as artifacts:
+ * - partially minified file (.output.js) for debugging
+ * - fully minified file (.min.js)
+ *
+ * @param {import('./prepareFixture').PreparedFixture} preparedFixture
+ * @param {boolean} verbose
+ *
+ * @return {Promise<BuildResult>}
+ */
+module.exports = async function buildFixture(preparedFixture, verbose) {
+  const webpackStartTime = process.hrtime();
+
+  const webpackOutputPath = preparedFixture.absolutePath.replace(/.fixture.js$/, '.output.js');
+  const config = createWebpackConfig(preparedFixture.absolutePath, webpackOutputPath);
+
+  await webpackAsync(config);
+
+  if (verbose) {
+    console.log(
+      [
+        chalk.blue('[i]'),
+        `"${path.basename(preparedFixture.relativePath)}": Webpack in ${hrToSeconds(process.hrtime(webpackStartTime))}`,
+      ].join(' '),
+    );
+  }
+
+  // ---
+
+  const terserStartTime = process.hrtime();
+  const terserOutputPath = preparedFixture.absolutePath.replace(/.fixture.js$/, '.min.js');
+
+  const webpackOutput = (await fs.promises.readFile(webpackOutputPath)).toString();
+
+  const [terserOutput, terserOutputMinified] = await Promise.all([
+    // Performs only dead-code elimination
+    /* eslint-disable @typescript-eslint/naming-convention */
+    minify(webpackOutput, {
+      mangle: false,
+      output: {
+        beautify: true,
+        comments: true,
+        preserve_annotations: true,
+      },
+    }),
+    minify(webpackOutput, {
+      output: {
+        comments: false,
+      },
+    }),
+    /* eslint-enable @typescript-eslint/naming-convention */
+  ]);
+
+  await fs.promises.writeFile(webpackOutputPath, terserOutput.code);
+  await fs.promises.writeFile(terserOutputPath, terserOutputMinified.code);
+
+  if (verbose) {
+    console.log(
+      [
+        chalk.blue('[i]'),
+        `"${path.basename(preparedFixture.relativePath)}": Terser in ${hrToSeconds(process.hrtime(terserStartTime))}`,
+      ].join(' '),
+    );
+  }
+
+  const minifiedSize = (await fs.promises.stat(terserOutputPath)).size;
+  const gzippedSize = await gzipSize.file(terserOutputPath);
+
+  return {
+    name: preparedFixture.name,
+    path: preparedFixture.relativePath,
+
+    minifiedSize,
+    gzippedSize,
+  };
+};

apps/bundle-size/src/utils/helpers.js

@@ -0,0 +1,15 @@
+// @ts-check
+
+/**
+ * @param {[number, number]} hrtime
+ * @return {string}
+ */
+function hrToSeconds(hrtime) {
+  const raw = hrtime[0] + hrtime[1] / 1e9;
+
+  return raw.toFixed(2) + 's';
+}
+
+module.exports = {
+  hrToSeconds,
+};