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",
@@ -114,8 +115,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

@@ -1,5 +1,6 @@
 import * as webpack from 'webpack';
 import * as path from 'path';
+import * as os from 'os';
 import * as CopyWebpackPlugin from 'copy-webpack-plugin';
 import { NamedLazyChunksWebpackPlugin } from '../../plugins/named-lazy-chunks-webpack-plugin';
 import { extraEntryParser, getOutputHashFormat, AssetPattern } from './utils';
@@ -11,6 +12,7 @@ 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 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')
  */
 
@@ -163,12 +166,20 @@ 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: 'cache-loader',
+        options: { cacheDirectory }
+      }, {
         loader: '@angular-devkit/build-optimizer/webpack-loader',
         options: { sourceMap: buildOptions.sourcemaps }
-      }]
+      }],
     });
   }
 

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",