refactor(compiler): output arrow functions for deferred dependencies functions (angular#51650)

crisbeto · thePunderWoman · commit 7c068861b75d · 2023-09-05T18:16:59.000Z
Reworks the compiler to generate arrow functions for the deferred dependencies which reduces the number of bytes we generate. PR Close angular#51650
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deferred_with_external_deps_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deferred_with_external_deps_template.js
@@ -2,11 +2,7 @@ import {EagerDep} from './deferred_with_external_deps_eager';
 import {LoadingDep} from './deferred_with_external_deps_loading';
 import * as $r3$ from "@angular/core";
 
-function MyApp_Defer_4_DepsFn() {
-  return [import("./deferred_with_external_deps_lazy").then(function (m) {
-    return m.LazyDep;
-  })];
-}
+const MyApp_Defer_4_DepsFn = () => [import("./deferred_with_external_deps_lazy").then(m => m.LazyDep)];
 
 function MyApp_Defer_2_Template(rf, ctx) {
   if (rf & 1) {
diff --git a/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deferred_with_local_deps_template.js b/packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/deferred_with_local_deps_template.js
@@ -1,6 +1,4 @@
-function MyApp_Defer_4_DepsFn() {
-  return [LazyDep];
-}
+const MyApp_Defer_4_DepsFn = () => [LazyDep];
 …
 MyApp.ɵcmp = /*@__PURE__*/ $r3$.ɵɵdefineComponent({
   …
diff --git a/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts b/packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
@@ -8793,9 +8793,7 @@ function allTests(os: string) {
         const jsContents = env.getContents('test.js');
 
         expect(jsContents).toContain('ɵɵdefer(1, 0, TestCmp_Defer_1_DepsFn)');
-        expect(jsContents)
-            .toContain(
-                'function TestCmp_Defer_1_DepsFn() { return [import("./cmp-a").then(function (m) { return m.CmpA; }), LocalDep]; }');
+        expect(jsContents).toContain('() => [import("./cmp-a").then(m => m.CmpA), LocalDep]');
 
         // The `CmpA` symbol wasn't referenced elsewhere, so it can be defer-loaded
         // via dynamic imports and an original import can be removed.
@@ -8847,7 +8845,7 @@ function allTests(os: string) {
 
           // The dependency function doesn't have a dynamic import, because `CmpA`
           // was eagerly referenced in component's code, thus regular import can not be removed.
-          expect(jsContents).toContain('function TestCmp_Defer_1_DepsFn() { return [CmpA]; }');
+          expect(jsContents).toContain('() => [CmpA]');
           expect(jsContents).toContain('import { CmpA }');
         });
 
@@ -8904,8 +8902,7 @@ function allTests(os: string) {
           // The dependency function doesn't have a dynamic import, because `CmpA`
           // was eagerly referenced in component's code, thus regular import can not be removed.
           // This also affects `CmpB`, since it was extracted from the same import.
-          expect(jsContents)
-              .toContain('function TestCmp_Defer_1_DepsFn() { return [CmpA, CmpB]; }');
+          expect(jsContents).toContain('() => [CmpA, CmpB]');
           expect(jsContents).toContain('import { CmpA, CmpB }');
         });
 
@@ -8957,9 +8954,9 @@ function allTests(os: string) {
           // referenced elsewhere, so we generate dynamic imports and drop a regular one.
           expect(jsContents)
               .toContain(
-                  'function TestCmp_Defer_1_DepsFn() { return [' +
-                  'import("./cmp-a").then(function (m) { return m.CmpA; }), ' +
-                  'import("./cmp-a").then(function (m) { return m.CmpB; })]; }');
+                  '() => [' +
+                  'import("./cmp-a").then(m => m.CmpA), ' +
+                  'import("./cmp-a").then(m => m.CmpB)]');
           expect(jsContents).not.toContain('import { CmpA, CmpB }');
         });
       });
@@ -9062,7 +9059,7 @@ function allTests(os: string) {
              const jsContents = env.getContents('test.js');
 
              // Dependency function eagerly references `CmpA`.
-             expect(jsContents).toContain('function TestCmp_Defer_1_DepsFn() { return [CmpA]; }');
+             expect(jsContents).toContain('() => [CmpA]');
 
              // The `setClassMetadataAsync` wasn't generated, since there are no deferrable
              // symbols.
diff --git a/packages/compiler/src/render3/view/template.ts b/packages/compiler/src/render3/view/template.ts
@@ -1339,10 +1339,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
 
     for (const deferredDep of deferredDeps) {
       if (deferredDep.isDeferrable) {
-        // Callback function, e.g. `function(m) { return m.MyCmp; }`.
-        const innerFn = o.fn(
-            [new o.FnParam('m', o.DYNAMIC_TYPE)],
-            [new o.ReturnStatement(o.variable('m').prop(deferredDep.symbolName))]);
+        // Callback function, e.g. `m () => m.MyCmp;`.
+        const innerFn = o.arrowFn(
+            [new o.FnParam('m', o.DYNAMIC_TYPE)], o.variable('m').prop(deferredDep.symbolName));
 
         // Dynamic import, e.g. `import('./a').then(...)`.
         const importExpr =
@@ -1354,10 +1353,9 @@ export class TemplateDefinitionBuilder implements t.Visitor<void>, LocalResolver
       }
     }
 
-    const depsFnExpr =
-        o.fn([], [new o.ReturnStatement(o.literalArr(dependencyExp))], o.INFERRED_TYPE, null, name);
+    const depsFnExpr = o.arrowFn([], o.literalArr(dependencyExp));
 
-    this.constantPool.statements.push(depsFnExpr.toDeclStmt(name));
+    this.constantPool.statements.push(depsFnExpr.toDeclStmt(name, o.StmtModifier.Final));
 
     return o.variable(name);
   }
