chore: new bundle size tool (#18010)

* chore: new bundle size tool

* fix NX workspace

* fix permissions

* disable version output

* update readme

* rename "build" script to "type-check"

* rename "build" command to "measure", use "quiet" as a flag

* remove ts-check pragma

* use tsconfig.base.json and move "--noEmit" to config

* rename to "@fluentui/bundle-size" and move to packages

* restore fmt

* type command export

* type yarns init

* remove usage of fs-extra, use SVP for del

* do not mutate results

* move schema to .json file

* Update packages/bundle-size/README.md

Co-authored-by: Martin Hochel <martinhochel@microsoft.com>

* Update packages/bundle-size/README.md

Co-authored-by: Martin Hochel <martinhochel@microsoft.com>

* update structure of README

Co-authored-by: Martin Hochel <martinhochel@microsoft.com>

Author: layershifter

change/@fluentui-react-divider-3541ca45-ebbc-4960-916b-cdb657741319.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "add bundle size fixtures",
+  "packageName": "@fluentui/react-divider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-image-5c7095b4-f359-4777-a1d6-4e45ea4b8ed7.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "add bundle size fixtures",
+  "packageName": "@fluentui/react-image",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

change/@fluentui-react-make-styles-8c55fcf9-79ca-4cdb-a57b-7805c2b0c15d.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "add bundle size fixtures",
+  "packageName": "@fluentui/react-make-styles",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "none"
+}

nx.json

@@ -35,6 +35,7 @@
     "@fluentui/api-docs": { "implicitDependencies": [] },
     "@fluentui/azure-themes": { "implicitDependencies": [] },
     "@fluentui/babel-make-styles": { "implicitDependencies": [] },
+    "@fluentui/bundle-size": { "implicitDependencies": [] },
     "@fluentui/codemods": { "implicitDependencies": [] },
     "@fluentui/common-styles": { "implicitDependencies": [] },
     "@fluentui/cra-template": { "implicitDependencies": [] },

package.json

@@ -72,6 +72,7 @@
     "vrtest": "cd apps && cd vr-tests && yarn screener"
   },
   "devDependencies": {
+    "@babel/core": "7.12.16",
     "@ctrl/tinycolor": "3.3.4",
     "@microsoft/api-extractor": "7.13.0",
     "@nrwl/cli": "12.1.0",
@@ -102,19 +103,24 @@
     "@types/webpack-dev-middleware": "4.1.0",
     "@types/webpack-env": "1.16.0",
     "@types/yargs": "13.0.11",
+    "ajv": "8.4.0",
     "babel-plugin-annotate-pure-calls": "0.4.0",
     "beachball": "1.53.1",
     "chalk": "4.1.0",
+    "cli-table3": "0.6.0",
     "copy-webpack-plugin": "8.1.0",
     "cross-env": "^5.1.4",
     "css-loader": "5.0.1",
     "cypress": "6.6.0",
     "cypress-real-events": "1.2.0",
     "danger": "^6.0.5",
+    "del": "6.0.0",
     "eslint": "7.25.0",
     "eslint-plugin-es": "4.1.0",
     "file-loader": "6.2.0",
+    "glob": "7.1.6",
     "gulp": "^4.0.2",
+    "gzip-size": "6.0.0",
     "html-webpack-plugin": "5.1.0",
     "imports-loader": "1.2.0",
     "jest": "24.9.0",
@@ -130,13 +136,15 @@
     "postcss-loader": "4.1.0",
     "postcss-modules": "2.0.0",
     "prettier": "2.2.1",
+    "pretty-bytes": "5.6.0",
     "raw-loader": "4.0.2",
     "react-app-polyfill": "2.0.0",
     "sass-loader": "10.1.1",
     "satisfied": "^1.1.1",
     "storybook-addon-performance": "0.14.0",
     "style-loader": "2.0.0",
     "syncpack": "^5.6.10",
+    "terser": "5.5.1",
     "tmp": "0.2.1",
     "ts-jest": "24.3.0",
     "ts-loader": "8.0.14",

packages/bundle-size/.eslintrc.json

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

packages/bundle-size/README.md

@@ -0,0 +1,43 @@
+## `@fluentui/bundle-size`
+
+A CLI tool to measure bundle size locally and on CI.
+
+> NOTE: `bundle-size` requires to build packages first before doing any kind of measurements. Make sure to accommodate this in your pipeline\*\*
+
+### Usage
+
+#### Fixtures
+
+Fixtures declare exports that should be measured by the `bundle-size` tool. 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
+};
+```
+
+### Commands
+
+#### `measure`
+
+```sh
+yarn bundle-size measure [--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.

packages/bundle-size/bin/bundle-size.js

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

packages/bundle-size/just.config.ts

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

packages/bundle-size/package.json

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