feat(@angular/cli): use cache and parallelization for build-optimizer

Author: filipesilva

package-lock.json

@@ -46,6 +46,7 @@
     "@angular-devkit/schematics": "~0.0.51",
     "@schematics/angular": "~0.1.16",
     "autoprefixer": "^7.2.3",
+    "cache-loader": "^1.2.0",
     "chalk": "~2.2.0",
     "circular-dependency-plugin": "^4.2.1",
     "clean-css": "^4.1.9",
@@ -61,6 +62,7 @@
     "file-loader": "^1.1.5",
     "fs-extra": "^4.0.0",
     "glob": "^7.0.3",
+    "happypack": "^4.0.0",
     "html-webpack-plugin": "^2.29.0",
     "istanbul-instrumenter-loader": "^3.0.0",
     "karma-source-map-support": "^1.2.0",
@@ -114,8 +116,8 @@
     "@types/fs-extra": "^4.0.0",
     "@types/glob": "^5.0.29",
     "@types/jasmine": "2.5.45",
-    "@types/lodash": "~4.14.50",
     "@types/loader-utils": "^1.1.0",
+    "@types/lodash": "~4.14.50",
     "@types/minimist": "^1.2.0",
     "@types/mock-fs": "^3.6.30",
     "@types/node": "^6.0.84",

package.json

@@ -11,6 +11,8 @@ import { ScriptsWebpackPlugin } from '../../plugins/scripts-webpack-plugin';
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const SilentError = require('silent-error');
+const HappyPack = require('happypack');
+const resolve = require('resolve');
 
 /**
  * Enumerate loaders and their dependencies from this file to let the dependency validator
@@ -20,6 +22,7 @@ const SilentError = require('silent-error');
  * require('raw-loader')
  * require('url-loader')
  * require('file-loader')
+ * require('cache-loader')
  * require('@angular-devkit/build-optimizer')
  */
 
@@ -104,8 +107,8 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
 
         if (!asset.allowOutsideOutDir) {
           const message = 'An asset cannot be written to a location outside of the output path. '
-                        + 'You can override this message by setting the `allowOutsideOutDir` '
-                        + 'property on the asset to true in the CLI configuration.';
+            + 'You can override this message by setting the `allowOutsideOutDir` '
+            + 'property on the asset to true in the CLI configuration.';
           throw new SilentError(message);
         }
       }
@@ -163,13 +166,28 @@ export function getCommonConfig(wco: WebpackConfigOptions) {
   }
 
   if (buildOptions.buildOptimizer) {
+    // Set the cache directory to the Build Optimizer dir, so that package updates will delete it.
+    const buildOptimizerDir = path.dirname(
+      resolve.sync('@angular-devkit/build-optimizer', { basedir: projectRoot }));
+    const cacheDirectory = path.resolve(buildOptimizerDir, './.cache/');
+
     extraRules.push({
       test: /\.js$/,
-      use: [{
-        loader: '@angular-devkit/build-optimizer/webpack-loader',
-        options: { sourceMap: buildOptions.sourcemaps }
-      }]
+      use: ['happypack/loader'],
     });
+    extraPlugins.push(new HappyPack({
+      verbose: false,
+      loaders: [
+        {
+          loader: 'cache-loader',
+          options: { cacheDirectory }
+        },
+        {
+          loader: '@angular-devkit/build-optimizer/webpack-loader',
+          options: { sourceMap: buildOptions.sourcemaps }
+        }
+      ],
+    }));
   }
 
   if (buildOptions.namedChunks) {

packages/@angular/cli/models/webpack-configs/common.ts

@@ -34,6 +34,7 @@
     "@ngtools/webpack": "1.10.0-beta.1",
     "@schematics/angular": "~0.1.16",
     "autoprefixer": "^7.2.3",
+    "cache-loader": "^1.2.0",
     "chalk": "~2.2.0",
     "circular-dependency-plugin": "^4.2.1",
     "clean-css": "^4.1.9",
@@ -48,6 +49,7 @@
     "file-loader": "^1.1.5",
     "fs-extra": "^4.0.0",
     "glob": "^7.0.3",
+    "happypack": "^4.0.0",
     "html-webpack-plugin": "^2.29.0",
     "karma-source-map-support": "^1.2.0",
     "less": "^2.7.2",

packages/@angular/cli/package.json

@@ -27,6 +27,7 @@ const SubresourceIntegrityPlugin = require('webpack-subresource-integrity');
 const SilentError = require('silent-error');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
 const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
+const HappyPlugin = require('happypack');
 const Task = require('../ember-cli/lib/models/task');
 
 const ProgressPlugin = require('webpack/lib/ProgressPlugin');
@@ -171,6 +172,10 @@ class JsonWebpackSerializer {
     return plugin.options;
   }
 
+  private _happyPlugin(plugin: any) {
+    return plugin.config;
+  }
+
   private _pluginsReplacer(plugins: any[]) {
     return plugins.map(plugin => {
       let args = plugin.options || undefined;
@@ -255,6 +260,10 @@ class JsonWebpackSerializer {
           args = this._uglifyjsPlugin(plugin);
           this.variableImports['uglifyjs-webpack-plugin'] = 'UglifyJsPlugin';
           break;
+        case HappyPlugin:
+          args = this._happyPlugin(plugin);
+          this.variableImports['happypack'] = 'HappyPlugin';
+          break;
         case SubresourceIntegrityPlugin:
           this.variableImports['webpack-subresource-integrity'] = 'SubresourceIntegrityPlugin';
           break;