fix: Fix bundle size tracking

.circleci/config.yml

@@ -277,6 +277,9 @@ workflows:
       - user-actions-benchmark:
           requires:
             - prep-build-test
+      - bundle-size:
+          requires:
+            - prep-build-test
       - job-publish-prerelease:
           requires:
             - prep-deps
@@ -294,6 +297,7 @@ workflows:
             - prep-build-ts-migration-dashboard
             - benchmark
             - user-actions-benchmark
+            - bundle-size
             - all-tests-pass
       - job-publish-release:
           filters:
@@ -1270,6 +1274,36 @@ jobs:
           paths:
             - test-artifacts
 
+  bundle-size:
+    executor: node-browsers-small
+    steps:
+      - run: *shallow-git-clone-and-enable-vnc
+      - run: sudo corepack enable
+      - attach_workspace:
+          at: .
+      - run:
+          name: Move test build to dist
+          command: mv ./dist-test ./dist
+      - run:
+          name: Move test zips to builds
+          command: mv ./builds-test ./builds
+      - run:
+          name: Measure bundle size
+          command: yarn bundle-size --out test-artifacts/chrome
+      - run:
+          name: Install jq
+          command: sudo apt install jq -y
+      - run:
+          name: Record bundle size at commit
+          command: ./.circleci/scripts/bundle-stats-commit.sh
+      - store_artifacts:
+          path: test-artifacts
+          destination: test-artifacts
+      - persist_to_workspace:
+          root: .
+          paths:
+            - test-artifacts
+
   job-publish-prerelease:
     executor: node-browsers-medium
     steps:

package.json

@@ -28,6 +28,7 @@
     "start:test:mv2:flask": "ENABLE_MV3=false yarn start:test:flask --apply-lavamoat=false --snow=false",
     "start:test:mv2": "ENABLE_MV3=false BLOCKAID_FILE_CDN=static.cx.metamask.io/api/v1/confirmations/ppom yarn start:test --apply-lavamoat=false --snow=false",
     "benchmark:chrome": "SELENIUM_BROWSER=chrome ts-node test/e2e/benchmark.js",
+    "bundle-size": "SELENIUM_BROWSER=chrome ts-node test/e2e/mv3-perf-stats/bundle-size.js",
     "user-actions-benchmark:chrome": "SELENIUM_BROWSER=chrome ts-node test/e2e/user-actions-benchmark.js",
     "benchmark:firefox": "SELENIUM_BROWSER=firefox ts-node test/e2e/benchmark.js",
     "build:test": "yarn env:e2e build test",

test/e2e/mv3-perf-stats/bundle-size.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+
+/* eslint-disable node/shebang */
+const path = require('path');
+const { promises: fs } = require('fs');
+const yargs = require('yargs/yargs');
+const { hideBin } = require('yargs/helpers');
+const {
+  isWritable,
+  getFirstParentDirectoryThatExists,
+} = require('../../helpers/file');
+
+const { exitWithError } = require('../../../development/lib/exit-with-error');
+
+/**
+ * The e2e test case is used to capture bundle time statistics for extension.
+ */
+
+const backgroundFiles = [
+  'scripts/runtime-lavamoat.js',
+  'scripts/lockdown-more.js',
+  'scripts/sentry-install.js',
+  'scripts/policy-load.js',
+];
+
+const uiFiles = [
+  'scripts/sentry-install.js',
+  'scripts/runtime-lavamoat.js',
+  'scripts/lockdown-more.js',
+  'scripts/policy-load.js',
+];
+
+const BackgroundFileRegex = /background-[0-9]*.js/u;
+const CommonFileRegex = /common-[0-9]*.js/u;
+const UIFileRegex = /ui-[0-9]*.js/u;
+
+async function main() {
+  const { argv } = yargs(hideBin(process.argv)).usage(
+    '$0 [options]',
+    'Capture bundle size stats',
+    (_yargs) =>
+      _yargs.option('out', {
+        description:
+          'Output filename. Output printed to STDOUT of this is omitted.',
+        type: 'string',
+        normalize: true,
+      }),
+  );
+  const { out } = argv;
+
+  const distFolder = 'dist/chrome';
+  const backgroundFileList = [];
+  const uiFileList = [];
+  const commonFileList = [];
+
+  const files = await fs.readdir(distFolder);
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    if (CommonFileRegex.test(file)) {
+      const stats = await fs.stat(`${distFolder}/${file}`);
+      commonFileList.push({ name: file, size: stats.size });
+    } else if (
+      backgroundFiles.includes(file) ||
+      BackgroundFileRegex.test(file)
+    ) {
+      const stats = await fs.stat(`${distFolder}/${file}`);
+      backgroundFileList.push({ name: file, size: stats.size });
+    } else if (uiFiles.includes(file) || UIFileRegex.test(file)) {
+      const stats = await fs.stat(`${distFolder}/${file}`);
+      uiFileList.push({ name: file, size: stats.size });
+    }
+  }
+
+  const backgroundBundleSize = backgroundFileList.reduce(
+    (result, file) => result + file.size,
+    0,
+  );
+
+  const uiBundleSize = uiFileList.reduce(
+    (result, file) => result + file.size,
+    0,
+  );
+
+  const commonBundleSize = commonFileList.reduce(
+    (result, file) => result + file.size,
+    0,
+  );
+
+  const result = {
+    background: {
+      name: 'background',
+      size: backgroundBundleSize,
+      fileList: backgroundFileList,
+    },
+    ui: {
+      name: 'ui',
+      size: uiBundleSize,
+      fileList: uiFileList,
+    },
+    common: {
+      name: 'common',
+      size: commonBundleSize,
+      fileList: commonFileList,
+    },
+  };
+
+  if (out) {
+    const outPath = `${out}/bundle_size.json`;
+    const outputDirectory = path.dirname(outPath);
+    const existingParentDirectory = await getFirstParentDirectoryThatExists(
+      outputDirectory,
+    );
+    if (!(await isWritable(existingParentDirectory))) {
+      throw new Error('Specified output file directory is not writable');
+    }
+    if (outputDirectory !== existingParentDirectory) {
+      await fs.mkdir(outputDirectory, { recursive: true });
+    }
+    await fs.writeFile(outPath, JSON.stringify(result, null, 2));
+    await fs.writeFile(
+      `${out}/bundle_size_stats.json`,
+      JSON.stringify(
+        {
+          background: backgroundBundleSize,
+          ui: uiBundleSize,
+          common: commonBundleSize,
+          timestamp: new Date().getTime(),
+        },
+        null,
+        2,
+      ),
+    );
+  } else {
+    console.log(JSON.stringify(result, null, 2));
+  }
+}
+
+main().catch((error) => {
+  exitWithError(error);
+});