fix(ivy): ensure DebugNode/DebugElement are tree-shakeable in Ivy (angular#35003)

gkalpak · AndrewKushnir · commit 669df70da521 · 2020-01-28T15:57:57.000-08:00
There are different `DebugNode`/`DebugElement` implementations (and associated helper functions) for ViewEngine and Ivy. Additionally, these classes/functions, which are defined inside the `core` package, are imported by the `platform-browser` package. Previously, this code was not tree-shaken as expected in Ivy. angular#30130 partially addressed the issue, but only for the case where `core` and `platform-browser` end up in the same closure after webpack's scope hoisting. In cases where this is not the case, our webpack/terser based tooling is not capable of tree-shaking it. This commit fixes the problem, by ensuring that the code retained in Ivy mode (due to the cross-package import) does not unnecessarily reference `DebugNode`/`DebugElement`, allowing the code to be tree-shaken away. This results in a 7.6KB reduction in the size of the main angular.io bundle. Jira issue: [FW-1802](https://angular-team.atlassian.net/browse/FW-1802) PR Close angular#35003
diff --git a/aio/scripts/_payload-limits.json b/aio/scripts/_payload-limits.json
@@ -12,7 +12,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2987,
-        "main-es2015": 456604,
+        "main-es2015": 448956,
         "polyfills-es2015": 52487
       }
     }
@@ -21,7 +21,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 3097,
-        "main-es2015": 426978,
+        "main-es2015": 427017,
         "polyfills-es2015": 52487
       }
     }
diff --git a/integration/_payload-limits.json b/integration/_payload-limits.json
@@ -39,7 +39,7 @@
     "master": {
       "uncompressed": {
         "runtime-es2015": 2289,
-        "main-es2015": 254657,
+        "main-es2015": 247225,
         "polyfills-es2015": 36808,
         "5-es2015": 751
       }
diff --git a/packages/core/src/core_private_export.ts b/packages/core/src/core_private_export.ts
@@ -12,6 +12,7 @@ export {defaultIterableDiffers as ɵdefaultIterableDiffers, defaultKeyValueDiffe
 export {devModeEqual as ɵdevModeEqual, isListLikeIterable as ɵisListLikeIterable} from './change_detection/change_detection_util';
 export {ChangeDetectorStatus as ɵChangeDetectorStatus, isDefaultChangeDetectionStrategy as ɵisDefaultChangeDetectionStrategy} from './change_detection/constants';
 export {Console as ɵConsole} from './console';
+export {getDebugNodeR2 as ɵgetDebugNodeR2} from './debug/debug_node';
 export {inject, setCurrentInjector as ɵsetCurrentInjector, ɵɵinject} from './di/injector_compatibility';
 export {getInjectableDef as ɵgetInjectableDef, ɵɵInjectableDef, ɵɵInjectorDef} from './di/interface/defs';
 export {INJECTOR_SCOPE as ɵINJECTOR_SCOPE} from './di/scope';
diff --git a/packages/core/src/debug/debug_node.ts b/packages/core/src/debug/debug_node.ts
@@ -727,6 +727,18 @@ export function getDebugNode__POST_R3__(nativeNode: any): DebugNode|null {
  */
 export const getDebugNode: (nativeNode: any) => DebugNode | null = getDebugNode__PRE_R3__;
 
+
+export function getDebugNodeR2__PRE_R3__(nativeNode: any): DebugNode|null {
+  return getDebugNode__PRE_R3__(nativeNode);
+}
+
+export function getDebugNodeR2__POST_R3__(_nativeNode: any): DebugNode|null {
+  return null;
+}
+
+export const getDebugNodeR2: (nativeNode: any) => DebugNode | null = getDebugNodeR2__PRE_R3__;
+
+
 export function getAllDebugNodes(): DebugNode[] {
   return Array.from(_nativeNodeToDebugNode.values());
 }
diff --git a/packages/platform-browser/src/dom/debug/ng_probe.ts b/packages/platform-browser/src/dom/debug/ng_probe.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {APP_INITIALIZER, ApplicationRef, DebugNode, NgProbeToken, NgZone, Optional, Provider, getDebugNode} from '@angular/core';
+import {APP_INITIALIZER, ApplicationRef, DebugNode, NgProbeToken, NgZone, Optional, Provider, ɵgetDebugNodeR2} from '@angular/core';
 
 import {exportNgVar} from '../util';
 
@@ -23,14 +23,14 @@ const CORE_TOKENS_GLOBAL_NAME = 'coreTokens';
  * null if the given native element does not have an Angular view associated
  * with it.
  */
-export function inspectNativeElement(element: any): DebugNode|null {
-  return getDebugNode(element);
+export function inspectNativeElementR2(element: any): DebugNode|null {
+  return ɵgetDebugNodeR2(element);
 }
 
-export function _createNgProbe(coreTokens: NgProbeToken[]): any {
-  exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElement);
+export function _createNgProbeR2(coreTokens: NgProbeToken[]): any {
+  exportNgVar(INSPECT_GLOBAL_NAME, inspectNativeElementR2);
   exportNgVar(CORE_TOKENS_GLOBAL_NAME, {...CORE_TOKENS, ..._ngProbeTokensToMap(coreTokens || [])});
-  return () => inspectNativeElement;
+  return () => inspectNativeElementR2;
 }
 
 function _ngProbeTokensToMap(tokens: NgProbeToken[]): {[name: string]: any} {
@@ -52,7 +52,7 @@ export const ELEMENT_PROBE_PROVIDERS__POST_R3__ = [];
 export const ELEMENT_PROBE_PROVIDERS__PRE_R3__: Provider[] = [
   {
     provide: APP_INITIALIZER,
-    useFactory: _createNgProbe,
+    useFactory: _createNgProbeR2,
     deps: [
       [NgProbeToken, new Optional()],
     ],

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`"master": {`
`13`	`13`	`"uncompressed": {`
`14`	`14`	`"runtime-es2015": 2987,`
`15`		`- "main-es2015": 456604,`
	`15`	`+ "main-es2015": 448956,`
`16`	`16`	`"polyfills-es2015": 52487`
`17`	`17`	`}`
`18`	`18`	`}`
`@@ -21,7 +21,7 @@`
`21`	`21`	`"master": {`
`22`	`22`	`"uncompressed": {`
`23`	`23`	`"runtime-es2015": 3097,`
`24`		`- "main-es2015": 426978,`
	`24`	`+ "main-es2015": 427017,`
`25`	`25`	`"polyfills-es2015": 52487`
`26`	`26`	`}`
`27`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,7 @@`
`39`	`39`	`"master": {`
`40`	`40`	`"uncompressed": {`
`41`	`41`	`"runtime-es2015": 2289,`
`42`		`- "main-es2015": 254657,`
	`42`	`+ "main-es2015": 247225,`
`43`	`43`	`"polyfills-es2015": 36808,`
`44`	`44`	`"5-es2015": 751`
`45`	`45`	`}`