build: update size test tool to work with Angular v13 (#23811)

* test: remove unnecessary boostrap module calls in size tests

* build: add comment explaining the processing of `.mjs` in esbuild rule

Adds a little comment explaining why`.mjs` is processed in the Angular
esbuild rule.

* build: update size test tool to work with Angular v13

Updates the size test tool to properly run with the Angular
v13 compilation pipeline, matching conceptually with what the
Angular CLI performs. i.e. running the Angular linker, running the
non-deprecated build-optimizer variant (i.e. the Babel plugins).

* test: update size-golden to reflect recent compilation pipeline changes

Author: devversion

goldens/size-test.yaml

@@ -1,18 +1,18 @@
-cdk/drag-drop/all-directives: 160859
-cdk/drag-drop/basic: 158225
-material-experimental/mdc-chips/basic: 385551
-material-experimental/mdc-form-field/advanced: 417584
-material-experimental/mdc-form-field/basic: 416339
-material/autocomplete/without-optgroup: 392028
-material/button-toggle/standalone: 124412
-material/chips/basic: 320073
-material/datepicker/range-picker/without-form-field: 505044
-material/expansion/without-accordion: 330526
-material/form-field/advanced: 377468
-material/form-field/basic: 376144
-material/list/nav-list: 328072
-material/menu/without-lazy-content: 398590
-material/radio/without-group: 127571
-material/select/basic: 437305
-material/tabs/advanced: 369608
-material/tabs/basic: 368747
+cdk/drag-drop/all-directives: 155091
+cdk/drag-drop/basic: 152522
+material-experimental/mdc-chips/basic: 249660
+material-experimental/mdc-form-field/advanced: 296409
+material-experimental/mdc-form-field/basic: 294855
+material/autocomplete/without-optgroup: 281544
+material/button-toggle/standalone: 186619
+material/chips/basic: 228157
+material/datepicker/range-picker/without-form-field: 398783
+material/expansion/without-accordion: 200184
+material/form-field/advanced: 247973
+material/form-field/basic: 246355
+material/list/nav-list: 194468
+material/menu/without-lazy-content: 286831
+material/radio/without-group: 189803
+material/select/basic: 329893
+material/tabs/advanced: 248653
+material/tabs/basic: 247787

integration/size-test/BUILD.bazel

@@ -1,3 +1,4 @@
+load("@npm//@bazel/esbuild:index.bzl", "esbuild_config")
 load("//tools:defaults.bzl", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -8,6 +9,16 @@ exports_files([
     "index-tmpl.ts",
 ])
 
+esbuild_config(
+    name = "esbuild_config",
+    config_file = "esbuild.config.mjs",
+    deps = [
+        "@npm//@angular-devkit/build-angular",
+        "@npm//@angular/compiler-cli",
+        "@npm//@babel/core",
+    ],
+)
+
 ts_library(
     name = "check-size",
     srcs = ["check-size.ts"],

integration/size-test/esbuild.config.mjs

@@ -0,0 +1,90 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import babel from '@babel/core';
+import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
+import {ConsoleLogger, NodeJSFileSystem, LogLevel} from '@angular/compiler-cli';
+import {GLOBAL_DEFS_FOR_TERSER_WITH_AOT} from '@angular/compiler-cli/private/tooling';
+import adjustStaticClassMembersPlugin from '@angular-devkit/build-angular/src/babel/plugins/adjust-static-class-members.js';
+import elideAngularMetadataPlugin from '@angular-devkit/build-angular/src/babel/plugins/elide-angular-metadata.js';
+import adjustTypeScriptEnumsPlugin from '@angular-devkit/build-angular/src/babel/plugins/adjust-typescript-enums.js';
+import pureToplevelFunctionsPlugin from '@angular-devkit/build-angular/src/babel/plugins/pure-toplevel-functions.js';
+import fs from 'fs';
+
+/** Babel plugin running the Angular linker. */
+const linkerBabelPlugin = createEs2015LinkerPlugin({
+  fileSystem: new NodeJSFileSystem(),
+  logger: new ConsoleLogger(LogLevel.warn),
+  linkerJitMode: false,
+});
+
+/**
+ * ESBuild plugin configuring various optimization Babel plugins. The Babel plugins
+ * configured as part of this plugin run in the Angular CLI compilation pipeline as well.
+ */
+const esbuildBabelOptimizePlugin = {
+  name: 'ng-babel-optimize-esbuild',
+  setup: build => {
+    build.onLoad({filter: /.*/}, async args => {
+      const filePath = args.path;
+      const content = await fs.promises.readFile(filePath, 'utf8');
+      const plugins = [
+        linkerBabelPlugin,
+        adjustStaticClassMembersPlugin,
+        elideAngularMetadataPlugin,
+        adjustTypeScriptEnumsPlugin,
+      ];
+
+      // All files except for the auto-generated module entry-point are considered side-effect
+      // free. For these we can add the pure-top level Babel plugin. This matches conceptually
+      // with what is done in the Angular CLI compilation pipeline, with respect to everything
+      // in this repo being an official side-effect free APF package.
+      if (!args.path.includes('autogenerated_module_index.mjs')) {
+        plugins.push(pureToplevelFunctionsPlugin);
+      }
+
+      const {code} = await babel.transformAsync(content, {
+        filename: filePath,
+        filenameRelative: filePath,
+        plugins: plugins,
+        // Sourcemaps are generated inline so that ESBuild can process them.
+        sourceMaps: 'inline',
+        compact: false,
+      });
+
+      return {contents: code};
+    });
+  },
+};
+
+export default {
+  // Note: We prefer `.mjs` here as this is the extension used by Angular APF packages.
+  resolveExtensions: ['.mjs', '.js'],
+  conditions: ['es2020', 'es2015'],
+  mainFields: ['fesm2020', 'es2020', 'es2015', 'module'],
+  format: 'iife',
+  // The majority of these options match with the ones the CLI sets:
+  // https://github.com/angular/angular-cli/blob/0d76bf04bca6e083865972b5398a32bbe9396e14/packages/angular_devkit/build_angular/src/webpack/plugins/javascript-optimizer-worker.ts#L133.
+  treeShaking: true,
+  minifyIdentifiers: true,
+  minifySyntax: true,
+  minifyWhitespace: false,
+  pure: ['forwardRef'],
+  legalComments: 'none',
+  // ESBuild requires the `define` option to take a string-based dictionary.
+  define: convertObjectToStringDictionary(GLOBAL_DEFS_FOR_TERSER_WITH_AOT),
+  plugins: [esbuildBabelOptimizePlugin],
+};
+
+/** Converts an object to a string dictionary. */
+function convertObjectToStringDictionary(value) {
+  return Object.entries(value).reduce((result, [propName, value]) => {
+    result[propName] = String(value);
+    return result;
+  }, {});
+}

integration/size-test/index.bzl

@@ -1,13 +1,13 @@
 load("@npm//@angular/dev-infra-private/bazel:expand_template.bzl", "expand_template")
 load("@build_bazel_rules_nodejs//:index.bzl", "nodejs_binary", "nodejs_test")
 load("@bazel_skylib//lib:paths.bzl", "paths")
-load("@npm//@bazel/rollup:index.bzl", "rollup_bundle")
+load("@npm//@bazel/esbuild:index.bzl", "esbuild")
 load("@npm//@bazel/terser:index.bzl", "terser_minified")
 load("//tools:defaults.bzl", "ng_module")
 
 """
   Performs size measurements for the specified file. The file will be built as part
-  of a `ng_module` and then will be optimized with build-optimizer, rollup and Terser.
+  of a `ng_module` and then will be optimized with esbuild, babel and terser.
 
   The resulting size will be validated against a golden file to ensure that we don't
   regress in payload size, or that we can improvements to payload size.
@@ -35,31 +35,30 @@ def size_test(name, file, deps):
         testonly = True,
         deps = [
             "@npm//@angular/core",
-            "@npm//@angular/platform-browser-dynamic",
+            "@npm//@angular/platform-browser",
         ] + deps,
     )
 
-    rollup_bundle(
+    esbuild(
         name = "%s_bundle" % name,
-        config_file = "//integration/size-test:rollup.config.js",
+        config = "//integration/size-test:esbuild_config",
         testonly = True,
-        entry_points = {
-            (index_file): "%s_bundled" % name,
-        },
+        minify = True,
+        entry_point = index_file,
         deps = [
             ":%s_lib" % name,
-            "@npm//@rollup/plugin-node-resolve",
-            "@npm//@angular-devkit/build-optimizer",
         ],
+        target = "es2020",
+        platform = "browser",
         # Link the workspace root so that files can be loaded from the workspace.
         link_workspace_root = True,
-        sourcemap = "false",
+        sourcemap = "external",
     )
 
     terser_minified(
         testonly = True,
         name = "%s_bundle_min" % name,
-        src = ":%s_bundle" % name,
+        src = "%s_bundle" % name,
         config_file = "//integration/size-test:terser-config.json",
         sourcemap = False,
     )

integration/size-test/material-experimental/mdc-chips/basic.ts

@@ -1,5 +1,4 @@
 import {Component, NgModule} from '@angular/core';
-import {platformBrowser} from '@angular/platform-browser';
 import {MatChipsModule} from '@angular/material-experimental/mdc-chips';
 
 /**
@@ -21,5 +20,3 @@ export class TestComponent {}
   bootstrap: [TestComponent],
 })
 export class AppModule {}
-
-platformBrowser().bootstrapModule(AppModule);

integration/size-test/material/chips/basic.ts

@@ -1,5 +1,4 @@
 import {Component, NgModule} from '@angular/core';
-import {platformBrowser} from '@angular/platform-browser';
 import {MatChipsModule} from '@angular/material/chips';
 
 /**
@@ -21,5 +20,3 @@ export class TestComponent {}
   bootstrap: [TestComponent],
 })
 export class AppModule {}
-
-platformBrowser().bootstrapModule(AppModule);

integration/size-test/rollup.config.js

@@ -1,17 +1,12 @@
 {
-  "output": {
-    "ecma": "es2015",
-    "comments": false
-  },
+  "ecma": "es2020",
   "compress": {
-    "global_defs": {
-      "ngDevMode": false,
-      "ngI18nClosureMode": false,
-      "ngJitMode": false
-    },
-    "passes": 3,
+    "passes": 2,
     "pure_getters": true
   },
-  "toplevel": true,
-  "mangle": true
+  "format": {
+    "ascii_only": true,
+    "wrap_func_args": false
+  },
+  "mangle": false
 }

integration/size-test/terser-config.json

@@ -67,7 +67,6 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "13.0.0-next.7",
-    "@angular-devkit/build-optimizer": "0.1300.0-next.7",
     "@angular-devkit/core": "13.0.0-next.7",
     "@angular-devkit/schematics": "13.0.0-next.7",
     "@angular/bazel": "13.0.0-next.15",

package.json

@@ -9,6 +9,7 @@
 import {createLinkerEsbuildPlugin} from './create_linker_esbuild_plugin.mjs';
 
 export default {
+  // Note: We support `.mjs` here as this is the extension used by Angular APF packages.
   resolveExtensions: ['.mjs', '.js'],
   format: 'esm',
   plugins: [