refactor(@angular-devkit/build-angular): lazy load several optional webpack plugins

Multiple Webpack plugins are only used when certain options are enabled.  By only requiring them when needed, startup time can be reduced by potentially eliminating large dependency hierarchies from being loaded that will then be unused.  This change currently only applies to plugins that are required.  This limitation is due to the current webpack configuration infrastructure being synchronous which prevents dynamic import usage.

Author: clydin

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

@@ -10,10 +10,6 @@ import { CommonJsUsageWarnPlugin } from '../../plugins/webpack';
 import { WebpackConfigOptions } from '../build-options';
 import { getSourceMapDevTool, isPolyfillsEntry, normalizeExtraEntryPoints } from './utils';
 
-const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
-const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
-
-
 export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configuration {
   const { buildOptions } = wco;
   const {
@@ -35,12 +31,14 @@ export function getBrowserConfig(wco: WebpackConfigOptions): webpack.Configurati
   } = buildOptions.sourceMap;
 
   if (subresourceIntegrity) {
+    const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
     extraPlugins.push(new SubresourceIntegrityPlugin({
       hashFuncNames: ['sha384'],
     }));
   }
 
   if (extractLicenses) {
+    const LicenseWebpackPlugin = require('license-webpack-plugin').LicenseWebpackPlugin;
     extraPlugins.push(new LicenseWebpackPlugin({
       stats: {
         warnings: false,

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

@@ -47,8 +47,6 @@ import { findAllNodeModules } from '../../utilities/find-up';
 import { WebpackConfigOptions } from '../build-options';
 import { getEsVersionForFileName, getOutputHashFormat, normalizeExtraEntryPoints } from './utils';
 
-const ProgressPlugin = require('webpack/lib/ProgressPlugin');
-const CircularDependencyPlugin = require('circular-dependency-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
 const PnpWebpackPlugin = require('pnp-webpack-plugin');
 
@@ -297,10 +295,12 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   if (buildOptions.progress) {
+    const ProgressPlugin = require('webpack/lib/ProgressPlugin');
     extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));
   }
 
   if (buildOptions.showCircularDependencies) {
+    const CircularDependencyPlugin = require('circular-dependency-plugin');
     extraPlugins.push(
       new CircularDependencyPlugin({
         exclude: /([\\\/]node_modules[\\\/])|(ngfactory\.js$)/,

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

@@ -10,9 +10,6 @@ import { Configuration } from 'webpack';
 import { WebpackConfigOptions } from '../build-options';
 import { getTypescriptWorkerPlugin } from './typescript';
 
-const WorkerPlugin = require('worker-plugin');
-
-
 export function getWorkerConfig(wco: WebpackConfigOptions): Configuration {
   const { buildOptions } = wco;
 
@@ -25,6 +22,7 @@ export function getWorkerConfig(wco: WebpackConfigOptions): Configuration {
   }
 
   const workerTsConfigPath = resolve(wco.root, buildOptions.webWorkerTsConfig);
+  const WorkerPlugin = require('worker-plugin');
 
   return {
     plugins: [new WorkerPlugin({

packages/angular_devkit/build_angular/src/angular-cli-files/plugins/named-chunks-plugin.ts

@@ -5,17 +5,16 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { Compiler } from 'webpack';
-// Webpack doesn't export these so the deep imports can potentially break.
-// There doesn't seem to exist any ergonomic way to alter chunk names for non-context lazy chunks
-// (https://github.com/webpack/webpack/issues/9075) so this is the best alternative for now.
-const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
-const ImportDependenciesBlock = require('webpack/lib/dependencies/ImportDependenciesBlock');
-const Template = require('webpack/lib/Template');
-
 export class NamedLazyChunksPlugin {
   constructor() { }
-  apply(compiler: Compiler): void {
+  apply(compiler: import('webpack').Compiler): void {
+    // Webpack doesn't export these so the deep imports can potentially break.
+    // There doesn't seem to exist any ergonomic way to alter chunk names for non-context lazy chunks
+    // (https://github.com/webpack/webpack/issues/9075) so this is the best alternative for now.
+    const ImportDependency = require('webpack/lib/dependencies/ImportDependency');
+    const ImportDependenciesBlock = require('webpack/lib/dependencies/ImportDependenciesBlock');
+    const Template = require('webpack/lib/Template');
+
     compiler.hooks.compilation.tap('named-lazy-chunks-plugin', compilation => {
       // The dependencyReference hook isn't in the webpack typings so we have to type it as any.
       // tslint:disable-next-line: no-any