Initial work towards benchmarking bundle size over time

.github/workflows/docs.yml

@@ -43,7 +43,7 @@ jobs:
               working-directory: element-web
               run: |
                   yarn install --frozen-lockfile
-                  yarn ts-node ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
+                  tsx ./scripts/gen-workflow-mermaid.ts ../element-desktop ../element-web ../matrix-js-sdk > docs/automations.md
                   echo "-   [Automations](automations.md)" >> docs/SUMMARY.md
 
             - name: Setup mdBook

.github/workflows/end-to-end-tests-netlify.yaml

@@ -23,6 +23,7 @@ jobs:
             statuses: write
             deployments: write
             actions: read
+            contents: write
         steps:
             - name: Download HTML report
               uses: actions/download-artifact@v4
@@ -44,3 +45,59 @@ jobs:
                   desc: Playwright Report
                   deployment_env: EndToEndTests
                   prefix: "e2e-"
+
+    benchmark:
+        if: github.event.workflow_run.conclusion != 'cancelled'
+        name: Benchmarks
+        runs-on: ubuntu-24.04
+        environment: Netlify
+        permissions:
+            statuses: write
+            deployments: write
+            actions: read
+            contents: write
+        steps:
+            - uses: actions/checkout@v4
+
+            - uses: actions/setup-node@v4
+              with:
+                  cache: "yarn"
+                  node-version-file: package.json
+
+            - name: Install Deps
+              run: "yarn install --frozen-lockfile"
+
+            - name: Download webapp
+              uses: actions/download-artifact@v4
+              with:
+                  name: webapp
+                  path: webapp
+
+            - name: Generate benchmark result
+              run: ./scripts/benchmark-bundle.ts > benchmarks.json
+
+            - name: Evaluate benchmark result
+              uses: benchmark-action/github-action-benchmark@d48d326b4ca9ba73ca0cd0d59f108f9e02a381c7 # v1
+              with:
+                  tool: "customSmallerIsBetter"
+                  output-file-path: "benchmarks.json"
+                  gh-pages-branch: benchmarks
+                  auto-push: false
+
+            - name: Push latest develop results
+              if: github.event.workflow_run.head_branch == 'develop' && github.event.workflow_run.head_repository.owner.login == 'element-hq'
+              run: git push origin benchmarks
+
+            - name: 📤 Deploy to Netlify
+              uses: matrix-org/netlify-pr-preview@v3
+              if: github.event.workflow_run.head_branch == 'develop' && github.event.workflow_run.head_repository.owner.login == 'element-hq'
+              with:
+                  path: .
+                  owner: ${{ github.event.workflow_run.head_repository.owner.login }}
+                  branch: ${{ github.event.workflow_run.head_branch }}
+                  revision: ${{ github.event.workflow_run.head_sha }}
+                  token: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+                  site_id: ${{ vars.NETLIFY_SITE_ID }}
+                  desc: Bundle Size Benchmark
+                  deployment_env: BundleSize
+                  prefix: "benchmark-"

package.json

@@ -39,16 +39,16 @@
         "clean": "rimraf lib webapp",
         "build": "yarn clean && yarn build:genfiles && yarn build:bundle",
         "build-stats": "yarn clean && yarn build:genfiles && yarn build:bundle-stats",
-        "build:res": "ts-node scripts/copy-res.ts",
+        "build:res": "tsx scripts/copy-res.ts",
         "build:genfiles": "yarn build:res && yarn build:module_system",
         "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js",
         "build:bundle": "webpack --progress --mode production",
         "build:bundle-stats": "webpack --progress --mode production --json > webpack-stats.json",
-        "build:module_system": "ts-node --project ./tsconfig.module_system.json module_system/scripts/install.ts",
+        "build:module_system": "tsx --project ./tsconfig.module_system.json module_system/scripts/install.ts",
         "dist": "./scripts/package.sh",
         "start": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n modules,res \"yarn build:module_system\" \"yarn build:res\" && concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js\"",
         "start:https": "concurrently --kill-others-on-fail --prefix \"{time} [{name}]\" -n res,element-js \"yarn start:res\" \"yarn start:js --server-type https\"",
-        "start:res": "ts-node scripts/copy-res.ts -w",
+        "start:res": "tsx scripts/copy-res.ts -w",
         "start:js": "webpack serve --output-path webapp --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js --mode development",
         "lint": "yarn lint:types && yarn lint:js && yarn lint:style && yarn lint:workflows",
         "lint:js": "eslint --max-warnings 0 src test playwright module_system && prettier --check .",
@@ -66,7 +66,7 @@
         "test:playwright:screenshots:build": "docker build playwright -t element-web-playwright",
         "test:playwright:screenshots:run": "docker run --rm --network host -e BASE_URL -e CI -v $(pwd):/work/ -v $(node -e 'console.log(require(`path`).dirname(require.resolve(`matrix-js-sdk/package.json`)))'):/work/node_modules/matrix-js-sdk -v /var/run/docker.sock:/var/run/docker.sock -v /tmp/:/tmp/ -it element-web-playwright",
         "coverage": "yarn test --coverage",
-        "analyse:unused-exports": "ts-node ./scripts/analyse_unused_exports.ts",
+        "analyse:unused-exports": "tsx ./scripts/analyse_unused_exports.ts",
         "analyse:webpack-bundles": "webpack-bundle-analyzer webpack-stats.json webapp",
         "update:jitsi": "curl -s https://meet.element.io/libs/external_api.min.js > ./res/jitsi_external_api.min.js"
     },
@@ -278,8 +278,8 @@
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",
-        "ts-node": "^10.9.1",
         "ts-prune": "^0.10.3",
+        "tsx": "^4.19.2",
         "typescript": "5.6.3",
         "util": "^0.12.5",
         "web-streams-polyfill": "^4.0.0",

scripts/benchmark-bundle.ts

@@ -0,0 +1,28 @@
+#!/usr/bin/env -S yarn --silent tsx
+
+import { glob } from "glob";
+import path from "node:path";
+import { stat } from "node:fs/promises";
+
+async function main() {
+    const cwd = path.join(__dirname, "..", "webapp");
+    const jsfiles = await glob("**/*.js", { cwd });
+    const sizes = await Promise.all(
+        jsfiles.map(async (file) => {
+            const data = await stat(path.join(cwd, file));
+            return data.size;
+        }),
+    );
+
+    const totalBytes = sizes.reduce((acc, size) => acc + size, 0);
+
+    console.log([
+        {
+            name: "Total JS bundle size",
+            unit: "Megabytes",
+            value: totalBytes / 1024 / 1024,
+        },
+    ]);
+}
+
+main();

scripts/gen-workflow-mermaid.ts

@@ -1,4 +1,4 @@
-#!/usr/bin/env -S npx ts-node
+#!/usr/bin/env -S yarn --silent tsx
 
 import fs from "node:fs";
 import path from "node:path";

tsconfig.json

@@ -27,11 +27,5 @@
         "./test/**/*.ts",
         "./test/**/*.tsx",
         "./scripts/*.ts"
-    ],
-    "ts-node": {
-        "files": true,
-        "moduleTypes": {
-            "*": "cjs"
-        }
-    }
+    ]
 }