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

package-lock.json

@@ -1103,6 +1103,60 @@
         "unset-value": "1.0.0"
       }
     },
+    "cache-loader": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/cache-loader/-/cache-loader-1.2.0.tgz",
+      "integrity": "sha512-E95knP7jxy2bF/HKuw5gCEXm06tp7/sEjewNF39ezyVBnVmNzB9bnXflEFBvrqZrswsCmgiCbiIc7xIeVXW7Gw==",
+      "requires": {
+        "async": "2.5.0",
+        "loader-utils": "1.1.0",
+        "mkdirp": "0.5.1",
+        "schema-utils": "0.4.2"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "3.2.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.0.tgz",
+          "integrity": "sha512-NnSOmMEYtVR2JVMIGTzynRkkaxtiq1xnFBcdQD/DnNCYPoEPsVJhM98BDyaoNOQIi7p4okdi3E27eN7GQbsUug==",
+          "requires": {
+            "color-convert": "1.9.0"
+          }
+        },
+        "chalk": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
+          "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+          "requires": {
+            "ansi-styles": "3.2.0",
+            "escape-string-regexp": "1.0.5",
+            "supports-color": "4.5.0"
+          }
+        },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+        },
+        "schema-utils": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.2.tgz",
+          "integrity": "sha512-LCuuUj7L43TbSIqeERp+/Z2FH/NxSA48mqcWlGTSYUUKsevGafj2SpyaFVTxyWWFLkIAS3p7jDTLpNsrU7PXoA==",
+          "requires": {
+            "ajv": "5.2.2",
+            "ajv-keywords": "2.1.0",
+            "chalk": "2.3.0"
+          }
+        },
+        "supports-color": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        }
+      }
+    },
     "caller-path": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-0.1.0.tgz",

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

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

@@ -11,6 +11,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 +21,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 +165,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/package.json

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