ci(docs-infra): store JS bundles as CI artifacts to debug size check flakes (#37703)

As reported in #37699, the size of the main angular.io bundle sometimes
ends up bigger than expected on CI. This usually goes away after
rerunning the job a couple of times.

It is unclear what is causing this. In order to help debug the issue,
this commit stores the JS files that are checked as part of the aio
payload-size check as CI artifacts, where they can be retrieved from and
inspected.

PR Close #37703

.circleci/config.yml

@@ -377,6 +377,10 @@ jobs:
 
   test_aio:
     executor: default-executor
+    parameters:
+      debugArtifactsDir:
+        type: string
+        default: aio/dist/size-debug-artifacts
     steps:
       - custom_attach_workspace
       - init_environment
@@ -395,6 +399,15 @@ jobs:
       - run: yarn --cwd aio test-a11y-score-localhost
         # Check the bundle sizes.
       - run: yarn --cwd aio payload-size
+        # When `payload-size` check fails, copy the files that were checked into `debugArtifactsDir`.
+      - run:
+          when: on_fail
+          name: Prepare JS bundles to be stored as artifacts
+          command: node aio/scripts/prepare-size-debug-artifacts aio << parameters.debugArtifactsDir >>
+        # Store files in `debugArtifactsDir` (if any) as artifacts for debugging purposes.
+      - store_artifacts:
+          path: << parameters.debugArtifactsDir >>
+          destination: aio
         # Run unit tests for Firebase redirects
       - run: yarn --cwd aio redirects-test
 
@@ -410,6 +423,9 @@ jobs:
 
   test_aio_local:
     parameters:
+      debugArtifactsDir:
+        type: string
+        default: aio/dist/size-debug-artifacts
       viewengine:
         type: boolean
         default: false
@@ -428,6 +444,15 @@ jobs:
       - run: yarn --cwd aio test-pwa-score-localhost $CI_AIO_MIN_PWA_SCORE
         # Check the bundle sizes.
       - run: yarn --cwd aio payload-size aio-local<<# parameters.viewengine >>-viewengine<</ parameters.viewengine >>
+        # When `payload-size` check fails, copy the files that were checked into `debugArtifactsDir`.
+      - run:
+          when: on_fail
+          name: Prepare JS bundles to be stored as artifacts
+          command: node aio/scripts/prepare-size-debug-artifacts aio-local<<# parameters.viewengine >>-viewengine<</ parameters.viewengine >> << parameters.debugArtifactsDir >>
+        # Store files in `debugArtifactsDir` (if any) as artifacts for debugging purposes.
+      - store_artifacts:
+          path: << parameters.debugArtifactsDir >>
+          destination: aio
 
   test_aio_tools:
     executor: default-executor

aio/scripts/prepare-size-debug-artifacts.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+const {cp, ls, mkdir, set} = require('shelljs');
+const {join, resolve} = require('path');
+set('-e');
+
+// Read input arguments.
+const [sizesTarget, artifactsRelativeDir] = process.argv.slice(2);
+
+// Compute paths.
+const projectDir = resolve(__dirname, '../..');
+const sizesFilePath = join(projectDir, 'goldens/size-tracking/aio-payloads.json');
+const distDir = join(projectDir, 'aio/dist');
+const artifactsDir = resolve(projectDir, artifactsRelativeDir);
+
+// Determine which files need to be copied.
+const fileNamePrefixes = Object.keys(require(sizesFilePath)[sizesTarget].master.uncompressed);
+const filesToCopyRe = new RegExp(`^(?:${fileNamePrefixes.join('|')})\\..+\\.js$`);
+const filesToCopy = ls(distDir)
+    .filter(file => filesToCopyRe.test(file))
+    .map(file => join(distDir, file));
+
+// Copy files to the specified directory.
+mkdir('-p', artifactsDir);
+cp(filesToCopy, artifactsDir);