refactor(@ngtools/webpack): use cache for resource loader

Author: filipesilva

packages/@ngtools/webpack/src/angular_compiler_plugin.ts

@@ -86,6 +86,7 @@ export class AngularCompilerPlugin implements Tapable {
   private _program: ts.Program | Program;
   private _compilerHost: WebpackCompilerHost;
   private _angularCompilerHost: WebpackCompilerHost & CompilerHost;
+  private _resourceLoader: WebpackResourceLoader;
   // Contains `moduleImportPath#exportName` => `fullModulePath`.
   private _lazyRoutes: LazyRouteMap = Object.create(null);
   private _tsConfigPath: string;
@@ -267,6 +268,10 @@ export class AngularCompilerPlugin implements Tapable {
     this._compilerHost = new WebpackCompilerHost(this._compilerOptions, this._basePath);
     this._compilerHost.enableCaching();
 
+    // Create and set a new WebpackResourceLoader.
+    this._resourceLoader = new WebpackResourceLoader();
+    this._compilerHost.setResourceLoader(this._resourceLoader);
+
     // Override some files in the FileSystem.
     if (this._options.hostOverrideFileSystem) {
       for (const filePath of Object.keys(this._options.hostOverrideFileSystem)) {
@@ -283,6 +288,7 @@ export class AngularCompilerPlugin implements Tapable {
       }
     }
 
+    // Set platform.
     this._platform = options.platform || PLATFORM.Browser;
     timeEnd('AngularCompilerPlugin._setupOptions');
   }
@@ -563,13 +569,11 @@ export class AngularCompilerPlugin implements Tapable {
       return cb(new Error('An @ngtools/webpack plugin already exist for this compilation.'));
     }
 
+    // Set a private variable for this plugin instance.
     this._compilation._ngToolsWebpackPluginInstance = this;
 
-    // Create the resource loader with the webpack compilation.
-    time('AngularCompilerPlugin._make.setResourceLoader');
-    const resourceLoader = new WebpackResourceLoader(compilation);
-    this._compilerHost.setResourceLoader(resourceLoader);
-    timeEnd('AngularCompilerPlugin._make.setResourceLoader');
+    // Update the resource loader with the new webpack compilation.
+    this._resourceLoader.update(compilation);
 
     this._donePromise = Promise.resolve()
       .then(() => {

packages/@ngtools/webpack/src/extract_i18n_plugin.ts

@@ -135,6 +135,8 @@ export class ExtractI18nPlugin implements Tapable {
       }
       this._outFile = options.outFile;
     }
+
+    this._resourceLoader = new WebpackResourceLoader();
   }
 
   apply(compiler: any) {
@@ -163,7 +165,7 @@ export class ExtractI18nPlugin implements Tapable {
 
     this._compilation._ngToolsWebpackXi18nPluginInstance = this;
 
-    this._resourceLoader = new WebpackResourceLoader(compilation);
+    this._resourceLoader.update(compilation);
 
     this._donePromise = Promise.resolve()
       .then(() => {

packages/@ngtools/webpack/src/plugin.ts

@@ -256,6 +256,8 @@ export class AotPlugin implements Tapable {
     // because we don't want SourceFile instances to be cached past this point.
     this._compilerHost.enableCaching();
 
+    this._resourceLoader = new WebpackResourceLoader();
+
     if (options.entryModule) {
       this._entryModule = options.entryModule;
     } else if ((tsConfig.raw['angularCompilerOptions'] as any)
@@ -533,7 +535,7 @@ export class AotPlugin implements Tapable {
 
     this._compilation._ngToolsWebpackPluginInstance = this;
 
-    this._resourceLoader = new WebpackResourceLoader(compilation);
+    this._resourceLoader.update(compilation);
 
     this._donePromise = Promise.resolve()
       .then(() => {

packages/@ngtools/webpack/src/resource_loader.ts

@@ -1,23 +1,40 @@
-import {readFileSync} from 'fs';
 import * as vm from 'vm';
 import * as path from 'path';
 
 const NodeTemplatePlugin = require('webpack/lib/node/NodeTemplatePlugin');
 const NodeTargetPlugin = require('webpack/lib/node/NodeTargetPlugin');
 const LoaderTargetPlugin = require('webpack/lib/LoaderTargetPlugin');
 const SingleEntryPlugin = require('webpack/lib/SingleEntryPlugin');
+const loaderUtils = require('loader-utils');
 
 
+interface CompilationOutput {
+  hash: string;
+  outputName: string;
+  source: string;
+  newSource?: string;
+}
 
 export class WebpackResourceLoader {
+  private _parentCompilation: any;
   private _context: string;
   private _uniqueId = 0;
+  private _cache = new Map<string, CompilationOutput>();
+
+  constructor() {}
 
-  constructor(private _parentCompilation: any) {
-    this._context = _parentCompilation.context;
+  update(parentCompilation: any) {
+    this._parentCompilation = parentCompilation;
+    this._context = parentCompilation.context;
+    this._uniqueId = 0;
   }
 
-  private _compile(filePath: string, _content: string): Promise<any> {
+  private _compile(filePath: string): Promise<CompilationOutput> {
+
+    if (!this._parentCompilation) {
+      throw new Error('WebpackResourceLoader cannot be used without parentCompilation');
+    }
+
     const compilerName = `compiler(${this._uniqueId++})`;
     const outputOptions = { filename: filePath };
     const relativePath = path.relative(this._context || '', filePath);
@@ -63,9 +80,9 @@ export class WebpackResourceLoader {
           // Replace [hash] placeholders in filename
           const outputName = this._parentCompilation.mainTemplate.applyPluginsWaterfall(
             'asset-path', outputOptions.filename, {
-            hash: childCompilation.hash,
-            chunk: entries[0]
-          });
+              hash: childCompilation.hash,
+              chunk: entries[0]
+            });
 
           // Restore the parent compilation to the state like it was before the child compilation.
           Object.keys(childCompilation.assets).forEach((fileName) => {
@@ -78,40 +95,58 @@ export class WebpackResourceLoader {
             }
           });
 
+          const source = childCompilation.assets[outputName].source();
+
           resolve({
-            // Hash of the template entry point.
-            hash: entries[0].hash,
+            // Hash of the source.
+            hash: loaderUtils.getHashDigest(source),
             // Output name.
-            outputName: outputName,
+            outputName,
             // Compiled code.
-            content: childCompilation.assets[outputName].source()
+            source
           });
         }
       });
     });
   }
 
-  private _evaluate(fileName: string, source: string): Promise<string> {
+  private _evaluate(output: CompilationOutput): Promise<string> {
     try {
-      const vmContext = vm.createContext(Object.assign({require: require}, global));
-      const vmScript = new vm.Script(source, {filename: fileName});
+      const vmContext = vm.createContext(Object.assign({ require: require }, global));
+      const vmScript = new vm.Script(output.source, { filename: output.outputName });
 
       // Evaluate code and cast to string
       let newSource: string;
       newSource = vmScript.runInContext(vmContext);
 
       if (typeof newSource == 'string') {
+        this._cache.set(output.outputName, { ...output, newSource });
         return Promise.resolve(newSource);
       }
 
-      return Promise.reject('The loader "' + fileName + '" didn\'t return a string.');
+      return Promise.reject('The loader "' + output.outputName + '" didn\'t return a string.');
     } catch (e) {
       return Promise.reject(e);
     }
   }
 
   get(filePath: string): Promise<string> {
-    return this._compile(filePath, readFileSync(filePath, 'utf8'))
-      .then((result: any) => this._evaluate(result.outputName, result.content));
+    return this._compile(filePath)
+      .then((result: any) => {
+        // Check cache.
+        const outputName = result.outputName;
+        const output = this._cache.get(outputName);
+        if (output) {
+          if (output.hash === result.hash && output.newSource) {
+            // Return cached newSource.
+            return Promise.resolve(output.newSource);
+          } else {
+            // Delete cache entry.
+            this._cache.delete(outputName);
+          }
+        }
+
+        return this._evaluate(result);
+      });
   }
 }