build: switch all instances from ng_rollup_bundle to app_bundle (#…

…44490) The `ng_rollup_bundle` rule has been replaced with a new rule called `app_bundle`. This rule replicates the Angular v13 optimization pipeline in the CLI, so that we can get better benchmarking results. Also the rule is much simpler to maintain as it relies on ESbuild. The old `ng_rollup_bundle` rule did rely on e.g. build-optimizer that no longer has an effect on v13 Angular packages, so technically size tests/symbol tests were no longer as correct as they were before. This commit fixes that. A couple of different changes and their explanation: * Language-service will no longer use the benchmark rule for creating its NPM bundles! It will use plain `rollup_bundle`. ESBuild would have been nice but the language-service relies on AMD that ESBuild cannot generate (yet?) * Service-worker ngsw-worker.js file was generated using the benchmark bundle rule. This is wrong. We will use a simple ESbuild rule in the future. The output is more predictable that way, and we can have a clear use of the benchmark bundle rule.. * A couple of benchmarks in `modules/` had to be updated to use e.g. `initTableUtils` calls. This is done because with the new rule, all files except for the entry-point are considered side-effect free. The utilities for benchmarks relied on side-effects in some transitively-loaded file (bad practice anyway IMO). We are now initializing the utilities using a proper init function that is exported... PR Close #44490
angular · Jan 4, 2022 · c8cd5d5 · c8cd5d5
1 parent 4e58a50
commit c8cd5d5
Show file tree

Hide file tree

Showing 84 changed files with 496 additions and 593 deletions.
diff --git a/modules/benchmarks/src/change_detection/transplanted_views/BUILD.bazel b/modules/benchmarks/src/change_detection/transplanted_views/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 load("//modules/benchmarks:e2e_test.bzl", "e2e_test")
 
@@ -18,7 +18,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -32,7 +32,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 benchmark_test(

diff --git a/modules/benchmarks/src/expanding_rows/BUILD.bazel b/modules/benchmarks/src/expanding_rows/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver", "ts_library")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver", "ts_library")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
@@ -31,7 +31,7 @@ ts_library(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -45,7 +45,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 ts_devserver(

diff --git a/modules/benchmarks/src/js-web-frameworks/ng2/BUILD.bazel b/modules/benchmarks/src/js-web-frameworks/ng2/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
@@ -15,7 +15,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -29,7 +29,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 benchmark_test(

diff --git a/modules/benchmarks/src/largetable/baseline/index.ts b/modules/benchmarks/src/largetable/baseline/index.ts
@@ -7,7 +7,8 @@
  */
 
 import {bindAction, profile} from '../../util';
-import {buildTable, emptyTable} from '../util';
+import {buildTable, emptyTable, initTableUtils} from '../util';
+
 import {TableComponent} from './table';
 
 let table: TableComponent;
@@ -27,6 +28,8 @@ function init() {
   rootEl.textContent = '';
   table = new TableComponent(rootEl);
 
+  initTableUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
 

diff --git a/modules/benchmarks/src/largetable/incremental_dom/index.ts b/modules/benchmarks/src/largetable/incremental_dom/index.ts
@@ -7,7 +7,8 @@
  */
 
 import {bindAction, profile} from '../../util';
-import {buildTable, emptyTable} from '../util';
+import {buildTable, emptyTable, initTableUtils} from '../util';
+
 import {TableComponent} from './table';
 
 let table: TableComponent;
@@ -25,6 +26,8 @@ function noop() {}
 function init() {
   table = new TableComponent(document.querySelector('largetable'));
 
+  initTableUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
 

diff --git a/modules/benchmarks/src/largetable/ng2/BUILD.bazel b/modules/benchmarks/src/largetable/ng2/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 load("//modules/benchmarks:e2e_test.bzl", "e2e_test")
 
@@ -21,7 +21,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -35,7 +35,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 benchmark_test(

diff --git a/modules/benchmarks/src/largetable/ng2/init.ts b/modules/benchmarks/src/largetable/ng2/init.ts
@@ -9,7 +9,7 @@
 import {ApplicationRef, NgModuleRef} from '@angular/core';
 
 import {bindAction, profile} from '../../util';
-import {buildTable, emptyTable} from '../util';
+import {buildTable, emptyTable, initTableUtils} from '../util';
 
 import {AppModule, TableComponent} from './table';
 
@@ -31,8 +31,10 @@ export function init(moduleRef: NgModuleRef<AppModule>) {
 
   const injector = moduleRef.injector;
   appRef = injector.get(ApplicationRef);
-
   table = appRef.components[0].instance;
+
+  initTableUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
   bindAction('#updateDomProfile', profile(createDom, noop, 'update'));

diff --git a/modules/benchmarks/src/largetable/ng2_switch/init.ts b/modules/benchmarks/src/largetable/ng2_switch/init.ts
@@ -9,7 +9,7 @@
 import {ApplicationRef, NgModuleRef} from '@angular/core';
 
 import {bindAction, profile} from '../../util';
-import {buildTable, emptyTable} from '../util';
+import {buildTable, emptyTable, initTableUtils} from '../util';
 
 import {AppModule, TableComponent} from './table';
 
@@ -31,8 +31,10 @@ export function init(moduleRef: NgModuleRef<AppModule>) {
 
   const injector = moduleRef.injector;
   appRef = injector.get(ApplicationRef);
-
   table = appRef.components[0].instance;
+
+  initTableUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
   bindAction('#updateDomProfile', profile(createDom, noop, 'update'));

diff --git a/modules/benchmarks/src/largetable/render3/BUILD.bazel b/modules/benchmarks/src/largetable/render3/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 load("//modules/benchmarks:e2e_test.bzl", "e2e_test")
 
@@ -19,7 +19,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -33,7 +33,7 @@ ts_devserver(
     port = 4200,
     static_files = ["index.html"],
     deps = [
-        ":bundle.min_debug.js",
+        ":bundle.debug.min.js",
     ],
 )
 

diff --git a/modules/benchmarks/src/largetable/render3/index_aot.ts b/modules/benchmarks/src/largetable/render3/index_aot.ts
@@ -8,6 +8,7 @@
 import {ɵrenderComponent as renderComponent} from '@angular/core';
 
 import {bindAction, profile} from '../../util';
+import {initTableUtils} from '../util';
 
 import {createDom, destroyDom, LargeTableComponent} from './table';
 
@@ -17,6 +18,9 @@ export function main() {
   let component: LargeTableComponent;
   if (typeof window !== 'undefined') {
     component = renderComponent<LargeTableComponent>(LargeTableComponent);
+
+    initTableUtils();
+
     bindAction('#createDom', () => createDom(component));
     bindAction('#destroyDom', () => destroyDom(component));
     bindAction('#updateDomProfile', profile(() => createDom(component), noop, 'update'));

diff --git a/modules/benchmarks/src/largetable/util.ts b/modules/benchmarks/src/largetable/util.ts
@@ -18,9 +18,7 @@ let maxCol: number;
 let numberData: TableCell[][];
 let charData: TableCell[][];
 
-init();
-
-function init() {
+export function initTableUtils() {
   maxRow = getIntParameter('rows');
   maxCol = getIntParameter('cols');
   tableCreateCount = 0;

diff --git a/modules/benchmarks/src/styling/ng2/BUILD.bazel b/modules/benchmarks/src/styling/ng2/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 
 package(default_visibility = ["//modules/benchmarks:__subpackages__"])
@@ -15,7 +15,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -29,7 +29,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 benchmark_test(

diff --git a/modules/benchmarks/src/styling/ng2/init.ts b/modules/benchmarks/src/styling/ng2/init.ts
@@ -7,15 +7,10 @@
  */
 
 import {ApplicationRef, NgModuleRef} from '@angular/core';
-import {bindAction, profile} from '../../util';
-import {StylingModule} from './styling';
 
-const empty = [];
-const items = [];
-for (let i = 0; i < 2000; i++) {
-  items.push(i);
-}
+import {bindAction, profile} from '../../util';
 
+import {StylingModule} from './styling';
 
 export function init(moduleRef: NgModuleRef<StylingModule>) {
   const injector = moduleRef.injector;
@@ -25,6 +20,9 @@ export function init(moduleRef: NgModuleRef<StylingModule>) {
   const componentHostEl = componentRef.location.nativeElement;
   const select = document.querySelector('#scenario-select')! as HTMLSelectElement;
 
+  const empty = [];
+  const items = [];
+
   function create(tplRefIdx: number) {
     component.tplRefIdx = tplRefIdx;
     component.data = items;
@@ -57,6 +55,10 @@ export function init(moduleRef: NgModuleRef<StylingModule>) {
     });
   }
 
+  for (let i = 0; i < 2000; i++) {
+    items.push(i);
+  }
+
   bindAction('#create', () => create(select.selectedIndex));
   bindAction('#update', update);
   bindAction('#detect_changes', detectChanges);

diff --git a/modules/benchmarks/src/tree/baseline/index.ts b/modules/benchmarks/src/tree/baseline/index.ts
@@ -7,7 +7,8 @@
  */
 
 import {bindAction, profile} from '../../util';
-import {buildTree, emptyTree} from '../util';
+import {buildTree, emptyTree, initTreeUtils} from '../util';
+
 import {TreeComponent} from './tree';
 
 let tree: TreeComponent;
@@ -27,6 +28,8 @@ function init() {
   rootEl.textContent = '';
   tree = new TreeComponent(rootEl);
 
+  initTreeUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
 

diff --git a/modules/benchmarks/src/tree/incremental_dom/index.ts b/modules/benchmarks/src/tree/incremental_dom/index.ts
@@ -7,7 +7,8 @@
  */
 
 import {bindAction, profile} from '../../util';
-import {buildTree, emptyTree} from '../util';
+import {buildTree, emptyTree, initTreeUtils} from '../util';
+
 import {TreeComponent} from './tree';
 
 let tree: TreeComponent;
@@ -25,6 +26,8 @@ function noop() {}
 function init() {
   tree = new TreeComponent(document.querySelector('tree'));
 
+  initTreeUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
 

diff --git a/modules/benchmarks/src/tree/ng1/index.ts b/modules/benchmarks/src/tree/ng1/index.ts
@@ -7,7 +7,7 @@
  */
 
 import {bindAction, profile} from '../../util';
-import {buildTree, emptyTree} from '../util';
+import {buildTree, emptyTree, initTreeUtils} from '../util';
 
 import {addTreeToModule} from './tree';
 
@@ -42,6 +42,8 @@ function init() {
         });
       }
 
+      initTreeUtils();
+
       bindAction('#destroyDom', destroyDom);
       bindAction('#createDom', createDom);
       bindAction('#detectChanges', detectChanges);

diff --git a/modules/benchmarks/src/tree/ng2/BUILD.bazel b/modules/benchmarks/src/tree/ng2/BUILD.bazel
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_module", "ng_rollup_bundle", "ts_devserver")
+load("//tools:defaults.bzl", "app_bundle", "ng_module", "ts_devserver")
 load("@npm//@angular/dev-infra-private/bazel/benchmark/component_benchmark:benchmark_test.bzl", "benchmark_test")
 load("//modules/benchmarks:e2e_test.bzl", "e2e_test")
 
@@ -21,7 +21,7 @@ ng_module(
     ],
 )
 
-ng_rollup_bundle(
+app_bundle(
     name = "bundle",
     entry_point = ":index_aot.ts",
     deps = [
@@ -35,7 +35,7 @@ ts_devserver(
     bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
     port = 4200,
     static_files = ["index.html"],
-    deps = [":bundle.min_debug.js"],
+    deps = [":bundle.debug.min.js"],
 )
 
 benchmark_test(

diff --git a/modules/benchmarks/src/tree/ng2/init.ts b/modules/benchmarks/src/tree/ng2/init.ts
@@ -9,7 +9,7 @@
 import {ApplicationRef, NgModuleRef} from '@angular/core';
 
 import {bindAction, profile} from '../../util';
-import {buildTree, emptyTree} from '../util';
+import {buildTree, emptyTree, initTreeUtils} from '../util';
 
 import {AppModule, TreeComponent} from './tree';
 
@@ -44,6 +44,8 @@ export function init(moduleRef: NgModuleRef<AppModule>) {
 
   tree = appRef.components[0].instance;
 
+  initTreeUtils();
+
   bindAction('#destroyDom', destroyDom);
   bindAction('#createDom', createDom);
   bindAction('#detectChanges', detectChanges);