feat(@angular-devkit/build-angular): implement bundle level downleveling to support differential loading

Author: clydin

packages/angular_devkit/build_angular/package.json

@@ -11,6 +11,8 @@
     "@angular-devkit/build-optimizer": "0.0.0",
     "@angular-devkit/build-webpack": "0.0.0",
     "@angular-devkit/core": "0.0.0",
+    "@babel/core": "7.5.5",
+    "@babel/preset-env": "7.5.5",
     "@ngtools/webpack": "0.0.0",
     "ajv": "6.10.2",
     "autoprefixer": "9.6.1",
@@ -40,20 +42,23 @@
     "sass": "1.22.9",
     "sass-loader": "7.1.0",
     "semver": "6.3.0",
+    "source-map": "0.7.3",
     "source-map-support": "0.5.13",
     "source-map-loader": "0.2.4",
     "speed-measure-webpack-plugin": "1.3.1",
     "style-loader": "0.23.1",
     "stylus": "0.54.5",
     "stylus-loader": "3.0.2",
     "tree-kill": "1.2.1",
+    "terser": "4.1.3",
     "terser-webpack-plugin": "1.4.1",
     "webpack": "4.38.0",
     "webpack-dev-middleware": "3.7.0",
     "webpack-dev-server": "3.7.2",
     "webpack-merge": "4.2.1",
     "webpack-sources": "1.4.1",
     "webpack-subresource-integrity": "1.1.0-rc.6",
+    "worker-farm": "1.7.0",
     "worker-plugin": "3.1.0"
   },
   "devDependencies": {

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/common.ts

@@ -23,7 +23,7 @@ import {
 } from 'webpack';
 import { RawSource } from 'webpack-sources';
 import { AssetPatternClass, ExtraEntryPoint } from '../../../browser/schema';
-import { BuildBrowserFeatures } from '../../../utils/build-browser-features';
+import { BuildBrowserFeatures, fullDifferential } from '../../../utils';
 import { BundleBudgetPlugin } from '../../plugins/bundle-budget';
 import { CleanCssWebpackPlugin } from '../../plugins/cleancss-webpack-plugin';
 import { NamedLazyChunksPlugin } from '../../plugins/named-chunks-plugin';
@@ -59,19 +59,23 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   const entryPoints: { [key: string]: string[] } = {};
 
   const targetInFileName = getEsVersionForFileName(
-    buildOptions.scriptTargetOverride,
+    fullDifferential ? buildOptions.scriptTargetOverride : tsConfig.options.target,
     buildOptions.esVersionInFileName,
   );
 
   if (buildOptions.main) {
     entryPoints['main'] = [path.resolve(root, buildOptions.main)];
   }
 
+  let differentialLoadingNeeded = false;
   if (wco.buildOptions.platform !== 'server') {
     const buildBrowserFeatures = new BuildBrowserFeatures(
       projectRoot,
       tsConfig.options.target || ScriptTarget.ES5,
     );
+
+    differentialLoadingNeeded = buildBrowserFeatures.isDifferentialLoadingNeeded();
+
     if ((buildOptions.scriptTargetOverride || tsConfig.options.target) === ScriptTarget.ES5) {
       if (
         buildOptions.es5BrowserSupport ||
@@ -90,16 +94,28 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
             : [noModuleScript];
         }
 
-        // For differential loading we don't need to generate a seperate polyfill file
+        // For full build differential loading we don't need to generate a seperate polyfill file
         // because they will be loaded exclusivly based on module and nomodule
-        const polyfillsChunkName = buildBrowserFeatures.isDifferentialLoadingNeeded()
-          ? 'polyfills'
-          : 'polyfills-es5';
+        const polyfillsChunkName =
+          fullDifferential && differentialLoadingNeeded ? 'polyfills' : 'polyfills-es5';
 
         entryPoints[polyfillsChunkName] = [path.join(__dirname, '..', 'es5-polyfills.js')];
+        if (!fullDifferential && differentialLoadingNeeded) {
+          // Add zone.js legacy support to the es5 polyfills
+          // This is a noop execution-wise if zone-evergreen is not used.
+          entryPoints[polyfillsChunkName].push('zone.js/dist/zone-legacy');
+        }
         if (!buildOptions.aot) {
+          // If not performing a full differential build the JIT polyfills need to be added to ES5
+          if (!fullDifferential && differentialLoadingNeeded) {
+            entryPoints[polyfillsChunkName].push(path.join(__dirname, '..', 'jit-polyfills.js'));
+          }
           entryPoints[polyfillsChunkName].push(path.join(__dirname, '..', 'es5-jit-polyfills.js'));
         }
+        // If not performing a full differential build the polyfills need to be added to ES5 bundle
+        if (!fullDifferential && buildOptions.polyfills) {
+          entryPoints[polyfillsChunkName].push(path.resolve(root, buildOptions.polyfills));
+        }
       }
     }
 
@@ -309,11 +325,17 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
     }
 
     const terserOptions = {
-      ecma: wco.supportES2015 ? 6 : 5,
+      // Use 5 if using bundle downleveling to ensure script bundles do not use ES2015+ features
+      // Script bundles are shared for differential loading
+      // Bundle processing will use the ES2015+ optimizations on the ES2015 bundles
+      ecma:
+        wco.supportES2015 &&
+        (!differentialLoadingNeeded || (differentialLoadingNeeded && fullDifferential))
+          ? 6
+          : 5,
       warnings: !!buildOptions.verbose,
       safari10: true,
       output: {
-        ascii_only: true,
         comments: false,
         webkit: true,
       },
@@ -332,7 +354,10 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
               global_defs: angularGlobalDefinitions,
             },
       // We also want to avoid mangling on server.
-      ...(buildOptions.platform == 'server' ? { mangle: false } : {}),
+      // Name mangling is handled within the browser builder
+      mangle:
+        buildOptions.platform !== 'server' &&
+        (!differentialLoadingNeeded || (differentialLoadingNeeded && fullDifferential)),
     };
 
     extraMinimizers.push(

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

@@ -15,6 +15,7 @@ import {
   NgToolsLoader,
   PLATFORM
 } from '@ngtools/webpack';
+import { fullDifferential } from '../../../utils';
 import { WebpackConfigOptions, BuildOptions } from '../build-options';
 
 function _pluginOptionsOverrides(
@@ -32,7 +33,7 @@ function _pluginOptionsOverrides(
     }
   }
 
-  if (buildOptions.scriptTargetOverride) {
+  if (fullDifferential && buildOptions.scriptTargetOverride) {
     compilerOptions.target = buildOptions.scriptTargetOverride;
   }
 

packages/angular_devkit/build_angular/src/angular-cli-files/utilities/index-file/augment-index-html.ts

@@ -150,7 +150,10 @@ export async function augmentIndexHtml(params: AugmentIndexHtmlOptions): Promise
       const isModuleType = moduleFiles.some(scriptPredictor);
 
       if (isNoModuleType && !isModuleType) {
-        attrs.push({ name: 'nomodule', value: null }, { name: 'defer', value: null });
+        attrs.push({ name: 'nomodule', value: null });
+        if (!script.startsWith('polyfills-nomodule-es5')) {
+          attrs.push({ name: 'defer', value: null });
+        }
       } else if (isModuleType && !isNoModuleType) {
         attrs.push({ name: 'type', value: 'module' });
       } else {