refactor(@angular-devkit/build-angular): reduce repeat TypeScript configuration loading

An application's TypeScript configuration was previously being loaded multiple times in several different aspects of the build setup process. These aspects need to access specific compiler options relevant to that particular area of the setup. However, loading the configuration can be expensive due to the process also calculating the root files for the TypeScript compilation which can result in a large amount of file access. To improve the setup performance, the number of times the TypeScript configuration will be loaded has now been reduced with further reductions possible with additional refactorings.

Author: clydin

packages/angular_devkit/build_angular/src/builders/browser/index.ts

@@ -35,7 +35,6 @@ import {
 } from '../../utils/index-file/index-html-generator';
 import { ensureOutputPaths } from '../../utils/output-paths';
 import { generateEntryPoints } from '../../utils/package-chunk-sort';
-import { readTsconfig } from '../../utils/read-tsconfig';
 import { augmentAppWithServiceWorker } from '../../utils/service-worker';
 import { Spinner } from '../../utils/spinner';
 import { assertCompatibleAngularVersion } from '../../utils/version';
@@ -86,13 +85,14 @@ async function initialize(
   projectRoot: string;
   projectSourceRoot?: string;
   i18n: I18nOptions;
+  target: ScriptTarget;
 }> {
   const originalOutputPath = options.outputPath;
 
   // Assets are processed directly by the builder except when watching
   const adjustedOptions = options.watch ? options : { ...options, assets: [] };
 
-  const { config, projectRoot, projectSourceRoot, i18n } =
+  const { config, projectRoot, projectSourceRoot, i18n, target } =
     await generateI18nBrowserWebpackConfigFromContext(adjustedOptions, context, (wco) => [
       getCommonConfig(wco),
       getBrowserConfig(wco),
@@ -126,7 +126,7 @@ async function initialize(
     deleteOutputDir(context.workspaceRoot, originalOutputPath);
   }
 
-  return { config: transformedConfig || config, projectRoot, projectSourceRoot, i18n };
+  return { config: transformedConfig || config, projectRoot, projectSourceRoot, i18n, target };
 }
 
 /**
@@ -164,16 +164,11 @@ export function buildWebpackBrowser(
         ),
       );
 
-      const { options: compilerOptions } = readTsconfig(options.tsConfig, context.workspaceRoot);
-      const target = compilerOptions.target || ScriptTarget.ES5;
       const buildBrowserFeatures = new BuildBrowserFeatures(sysProjectRoot);
 
       checkInternetExplorerSupport(buildBrowserFeatures.supportedBrowsers, context.logger);
 
-      return {
-        ...(await initialize(options, context, transforms.webpackConfiguration)),
-        target,
-      };
+      return initialize(options, context, transforms.webpackConfiguration);
     }),
     switchMap(
       // eslint-disable-next-line max-lines-per-function

packages/angular_devkit/build_angular/src/builders/server/index.ts

@@ -19,7 +19,6 @@ import { NormalizedBrowserBuilderSchema, deleteOutputDir } from '../../utils';
 import { i18nInlineEmittedFiles } from '../../utils/i18n-inlining';
 import { I18nOptions } from '../../utils/i18n-options';
 import { ensureOutputPaths } from '../../utils/output-paths';
-import { readTsconfig } from '../../utils/read-tsconfig';
 import { assertCompatibleAngularVersion } from '../../utils/version';
 import { generateI18nBrowserWebpackConfigFromContext } from '../../utils/webpack-browser-config';
 import {
@@ -62,8 +61,6 @@ export function execute(
   // Check Angular version.
   assertCompatibleAngularVersion(root);
 
-  const tsConfig = readTsconfig(options.tsConfig, root);
-  const target = tsConfig.options.target || ScriptTarget.ES5;
   const baseOutputPath = path.resolve(root, options.outputPath);
   let outputPaths: undefined | Map<string, string>;
 
@@ -91,7 +88,7 @@ export function execute(
   }
 
   return from(initialize(options, context, transforms.webpackConfiguration)).pipe(
-    concatMap(({ config, i18n }) => {
+    concatMap(({ config, i18n, target }) => {
       return runWebpack(config, context, {
         webpackFactory: require('webpack') as typeof webpack,
         logging: (stats, config) => {
@@ -153,9 +150,10 @@ async function initialize(
 ): Promise<{
   config: webpack.Configuration;
   i18n: I18nOptions;
+  target: ScriptTarget;
 }> {
   const originalOutputPath = options.outputPath;
-  const { config, i18n } = await generateI18nBrowserWebpackConfigFromContext(
+  const { config, i18n, target } = await generateI18nBrowserWebpackConfigFromContext(
     {
       ...options,
       buildOptimizer: false,
@@ -181,5 +179,5 @@ async function initialize(
     deleteOutputDir(context.workspaceRoot, originalOutputPath);
   }
 
-  return { config: transformedConfig || config, i18n };
+  return { config: transformedConfig || config, i18n, target };
 }

packages/angular_devkit/build_angular/src/utils/webpack-browser-config.ts

@@ -9,6 +9,7 @@
 import { BuilderContext } from '@angular-devkit/architect';
 import { getSystemPath, logging, normalize, resolve } from '@angular-devkit/core';
 import * as path from 'path';
+import { ScriptTarget } from 'typescript';
 import { Configuration, javascript } from 'webpack';
 import { merge as webpackMerge } from 'webpack-merge';
 import { Schema as BrowserBuilderSchema } from '../builders/browser/schema';
@@ -69,12 +70,18 @@ export async function generateI18nBrowserWebpackConfigFromContext(
   projectRoot: string;
   projectSourceRoot?: string;
   i18n: I18nOptions;
+  target: ScriptTarget;
 }> {
   const { buildOptions, i18n } = await configureI18nBuild(context, options);
+  let target = ScriptTarget.ES5;
   const result = await generateBrowserWebpackConfigFromContext(
     buildOptions,
     context,
-    webpackPartialGenerator,
+    (wco) => {
+      target = wco.scriptTarget;
+
+      return webpackPartialGenerator(wco);
+    },
     extraBuildOptions,
   );
   const config = result.config;
@@ -119,7 +126,7 @@ export async function generateI18nBrowserWebpackConfigFromContext(
     });
   }
 
-  return { ...result, i18n };
+  return { ...result, i18n, target };
 }
 export async function generateBrowserWebpackConfigFromContext(
   options: BrowserBuilderSchema,