feat(@angular-devkit/build-angular): add profile option to browser builder

This should help users send us profile logs for builds that take too long.

Author: filipesilva

package-lock.json

@@ -125,6 +125,7 @@
     "source-map": "^0.5.6",
     "source-map-loader": "^0.2.3",
     "source-map-support": "^0.5.0",
+    "speed-measure-webpack-plugin": "^1.2.2",
     "stats-webpack-plugin": "^0.6.2",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

package.json

@@ -42,6 +42,7 @@
     "sass-loader": "~6.0.7",
     "source-map-support": "^0.5.0",
     "source-map-loader": "^0.2.3",
+    "speed-measure-webpack-plugin": "^1.2.2",
     "stats-webpack-plugin": "^0.6.2",
     "style-loader": "^0.21.0",
     "stylus": "^0.54.5",

packages/angular_devkit/build_angular/package.json

@@ -47,6 +47,7 @@ export interface BuildOptions {
   skipAppShell?: boolean;
   statsJson: boolean;
   forkTypeChecker: boolean;
+  profile?: boolean;
 
   main: string;
   index: string;

packages/angular_devkit/build_angular/src/angular-cli-files/models/build-options.ts

@@ -9,7 +9,7 @@
 // TODO: cleanup this file, it's copied as is from Angular CLI.
 
 import * as path from 'path';
-import { HashedModuleIdsPlugin } from 'webpack';
+import { HashedModuleIdsPlugin, debug } from 'webpack';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { getOutputHashFormat } from './utils';
 import { isDirectory } from '../../utilities/is-directory';
@@ -62,6 +62,12 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
     entryPoints['polyfills'] = [path.resolve(root, buildOptions.polyfills)];
   }
 
+  if (buildOptions.profile) {
+    extraPlugins.push(new debug.ProfilingPlugin({
+      outputPath: path.resolve(root, 'chrome-profiler-events.json'),
+    }))
+  }
+
   // determine hashing format
   const hashFormat = getOutputHashFormat(buildOptions.outputHashing as any);
 

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

@@ -12,7 +12,7 @@ import {
   BuilderContext,
 } from '@angular-devkit/architect';
 import { LoggingCallback, WebpackBuilder } from '@angular-devkit/build-webpack';
-import { Path, getSystemPath, normalize, resolve, virtualFs } from '@angular-devkit/core';
+import { Path, getSystemPath, join, normalize, resolve, virtualFs } from '@angular-devkit/core';
 import * as fs from 'fs';
 import { Observable, concat, of, throwError } from 'rxjs';
 import { concatMap, last, tap } from 'rxjs/operators';
@@ -36,6 +36,7 @@ import {
 } from '../angular-cli-files/utilities/stats';
 import { addFileReplacements, normalizeAssetPatterns } from '../utils';
 import { AssetPatternObject, BrowserBuilderSchema, CurrentFileReplacement } from './schema';
+const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
 const webpackMerge = require('webpack-merge');
 
 
@@ -151,7 +152,18 @@ export class BrowserBuilder implements Builder<BrowserBuilderSchema> {
       webpackConfigs.push(typescriptConfigPartial);
     }
 
-    return webpackMerge(webpackConfigs);
+    const webpackConfig = webpackMerge(webpackConfigs);
+
+    if (options.profile) {
+      const smp = new SpeedMeasurePlugin({
+        outputFormat: 'json',
+        outputTarget: getSystemPath(join(root, 'speed-measure-plugin.json')),
+      });
+
+      return smp.wrap(webpackConfig);
+    }
+
+    return webpackConfig;
   }
 
   private _deleteOutputDir(root: Path, outputPath: Path, host: virtualFs.Host) {

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

@@ -222,6 +222,11 @@ export interface BrowserBuilderSchema {
    * Budget thresholds to ensure parts of your application stay within boundaries which you set.
    */
   budgets: Budget[];
+
+  /**
+   * Output profile events for Chrome profiler.
+   */
+  profile: boolean;
 }
 
 export type AssetPattern = string | AssetPatternObject;

packages/angular_devkit/build_angular/src/browser/schema.d.ts

@@ -237,6 +237,11 @@
         "$ref": "#/definitions/budget"
       },
       "default": []
+    },
+    "profile": {
+      "type": "boolean",
+      "description": "Output profile events for Chrome profiler.",
+      "default": false
     }
   },
   "additionalProperties": false,

packages/angular_devkit/build_angular/src/browser/schema.json

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 { runTargetSpec } from '@angular-devkit/architect/testing';
+import { normalize } from '@angular-devkit/core';
+import { tap } from 'rxjs/operators';
+import { browserTargetSpec, host } from '../utils';
+
+
+describe('Browser Builder profile', () => {
+  beforeEach(done => host.initialize().toPromise().then(done, done.fail));
+  afterEach(done => host.restore().toPromise().then(done, done.fail));
+
+  it('works', (done) => {
+    const overrides = { profile: true };
+    runTargetSpec(host, browserTargetSpec, overrides).pipe(
+      tap((buildEvent) => expect(buildEvent.success).toBe(true)),
+      tap(() => {
+        expect(host.scopedSync().exists(normalize('chrome-profiler-events.json'))).toBe(true);
+        expect(host.scopedSync().exists(normalize('speed-measure-plugin.json'))).toBe(true);
+      }),
+    ).toPromise().then(done, done.fail);
+  });
+});