feat(compiler): Use timestamps to verify cache validity

Author: jantimon

index.js

@@ -87,7 +87,10 @@ class HtmlWebpackPlugin {
     // Clear the cache once a new HtmlWebpackPlugin is added
     childCompiler.clearCache(compiler);
 
-    compiler.hooks.compile.tap('HtmlWebpackPlugin', () => {
+    compiler.hooks.compilation.tap('HtmlWebpackPlugin', (compilation) => {
+      if (childCompiler.hasOutDatedTemplateCache(compilation)) {
+        childCompiler.clearCache(compiler);
+      }
       childCompiler.addTemplateToCompiler(compiler, this.options.template);
     });
 
@@ -101,12 +104,13 @@ class HtmlWebpackPlugin {
           compilation.errors.push(prettyError(err, compiler.context).toString());
           return {
             content: self.options.showErrors ? prettyError(err, compiler.context).toJsonHtml() : 'ERROR',
-            outputName: self.options.filename
+            outputName: self.options.filename,
+            hash: ''
           };
         })
         .then(compilationResult => {
           // If the compilation change didnt change the cache is valid
-          isCompilationCached = compilationResult.hash && self.childCompilerHash === compilationResult.hash;
+          isCompilationCached = Boolean(compilationResult.hash) && self.childCompilerHash === compilationResult.hash;
           self.childCompilerHash = compilationResult.hash;
           self.childCompilationOutputName = compilationResult.outputName;
           callback();
@@ -121,9 +125,6 @@ class HtmlWebpackPlugin {
      * @param {() => void} callback
     */
       (compilation, callback) => {
-        // Clear the childCompilerCache
-        childCompiler.clearCache(compiler);
-
         // Get all entry point names for this html file
         const entryNames = Array.from(compilation.entrypoints.keys());
         const filteredEntryNames = self.filterChunks(entryNames, self.options.chunks, self.options.excludeChunks);

lib/compiler.js

@@ -34,14 +34,19 @@ class HtmlWebpackChildCompiler {
      */
     this.compilationPromise;
     /**
-     * @type {Date}
+     * @type {number}
      */
-    this.compilationStarted;
+    this.compilationStartedTimestamp;
     /**
      * All file dependencies of the child compiler
      * @type {string[]}
      */
     this.fileDependencies = [];
+    /**
+     * Store if the cache was already verified for the given compilation
+     * @type {WeakMap<WebpackCompilation, boolean>}}
+     */
+    this.cacheVerifiedForCompilation = new WeakMap();
   }
 
   /**
@@ -63,6 +68,7 @@ class HtmlWebpackChildCompiler {
     // Add the template to the childCompiler
     const newTemplateId = this.templates.length;
     this.templates.push(template);
+    // Mark the cache invalid
     return newTemplateId;
   }
 
@@ -117,7 +123,7 @@ class HtmlWebpackChildCompiler {
       new SingleEntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}`).apply(childCompiler);
     });
 
-    this.compilationStarted = new Date();
+    this.compilationStartedTimestamp = new Date().getTime();
     this.compilationPromise = new Promise((resolve, reject) => {
       childCompiler.runAsChild((err, entries, childCompilation) => {
         // Extract templates
@@ -159,6 +165,37 @@ class HtmlWebpackChildCompiler {
 
     return this.compilationPromise;
   }
+
+  /**
+   * Returns `false` if any template file depenendencies has changed
+   * for the given main compilation
+   *
+   * @param {WebpackCompilation} mainCompilation
+   * @returns {boolean}
+   */
+  hasOutDatedTemplateCache (mainCompilation) {
+    // Check if cache validation was already computed
+    const isCacheValid = this.cacheVerifiedForCompilation.get(mainCompilation);
+    if (isCacheValid !== undefined) {
+      return isCacheValid;
+    }
+    // If the compilation was never run there is no invalid cache
+    if (!this.compilationStartedTimestamp) {
+      this.cacheVerifiedForCompilation.set(mainCompilation, false);
+      return false;
+    }
+    // Check if any dependent file was changed after the last compilation
+    const fileTimestamps = mainCompilation.fileTimestamps;
+    const isCacheOutOfDate = this.fileDependencies.some((fileDependency) => {
+      const timestamp = fileTimestamps.get(fileDependency);
+      // If the timestamp is not known the file is new
+      // If the timestamp is larger then the file has changed
+      // Otherwise the file is still the same
+      return !timestamp || timestamp > this.compilationStartedTimestamp;
+    });
+    this.cacheVerifiedForCompilation.set(mainCompilation, isCacheOutOfDate);
+    return isCacheOutOfDate;
+  }
 }
 
 /**
@@ -215,10 +252,13 @@ const childCompilerCache = new WeakMap();
  * @param {WebpackCompiler} mainCompiler
  */
 function getChildCompiler (mainCompiler) {
-  if (!childCompilerCache[mainCompiler]) {
-    childCompilerCache[mainCompiler] = new HtmlWebpackChildCompiler();
+  const cachedChildCompiler = childCompilerCache.get(mainCompiler);
+  if (cachedChildCompiler) {
+    return cachedChildCompiler;
   }
-  return childCompilerCache[mainCompiler];
+  const newCompiler = new HtmlWebpackChildCompiler();
+  childCompilerCache.set(mainCompiler, newCompiler);
+  return newCompiler;
 }
 
 /**
@@ -227,7 +267,7 @@ function getChildCompiler (mainCompiler) {
  * @param {WebpackCompiler} mainCompiler
  */
 function clearCache (mainCompiler) {
-  delete (childCompilerCache[mainCompiler]);
+  childCompilerCache.delete(mainCompiler);
 }
 
 /**
@@ -253,6 +293,7 @@ function addTemplateToCompiler (mainCompiler, templatePath) {
 function compileTemplate (templatePath, outputFilename, mainCompilation) {
   const childCompiler = getChildCompiler(mainCompilation.compiler);
   return childCompiler.compileTemplates(mainCompilation).then((compiledTemplates) => {
+    if (!compiledTemplates[templatePath]) console.log(Object.keys(compiledTemplates), templatePath);
     const compiledTemplate = compiledTemplates[templatePath];
     // Replace [hash] placeholders in filename
     const outputName = mainCompilation.mainTemplate.hooks.assetPath.call(outputFilename, {
@@ -270,8 +311,20 @@ function compileTemplate (templatePath, outputFilename, mainCompilation) {
   });
 }
 
+/**
+ * Returns false if the cache is not valid anymore
+ *
+ * @param {WebpackCompilation} compilation
+ * @returns {boolean}
+ */
+function hasOutDatedTemplateCache (compilation) {
+  const childCompiler = childCompilerCache.get(compilation.compiler);
+  return childCompiler ? childCompiler.hasOutDatedTemplateCache(compilation) : false;
+}
+
 module.exports = {
   addTemplateToCompiler,
   compileTemplate,
+  hasOutDatedTemplateCache,
   clearCache
 };

spec/CachingSpec.js

@@ -202,4 +202,48 @@ describe('HtmlWebpackPluginCaching', function () {
       })
       .then(done);
   });
+
+  it('should keep watching the webpack html if only a js file was changed', function (done) {
+    var template = path.join(__dirname, 'fixtures/plain.html');
+    const jsFile = path.join(__dirname, 'fixtures/index.js');
+    var htmlWebpackPlugin = new HtmlWebpackPlugin({
+      template: template
+    });
+    var compiler = setUpCompiler(htmlWebpackPlugin);
+    compiler.addTestFile(template);
+    compiler.addTestFile(jsFile);
+    // Build the template file for the first time
+    compiler.startWatching()
+      // Change the template file (second build)
+      .then(() => {
+        compiler.simulateFileChange(template, {footer: '<!-- 1 -->'});
+        return compiler.waitForWatchRunComplete();
+      })
+      // Change js
+      .then(() => {
+        compiler.simulateFileChange(jsFile, {footer: '// 1'});
+        return compiler.waitForWatchRunComplete();
+      })
+      // Change js
+      .then(() => {
+        compiler.simulateFileChange(jsFile, {footer: '// 2'});
+        return compiler.waitForWatchRunComplete();
+      })
+      // Change js
+      .then(() => {
+        compiler.simulateFileChange(jsFile, {footer: '// 3'});
+        return compiler.waitForWatchRunComplete();
+      })
+      // Change the template file (third build)
+      .then(() => {
+        compiler.simulateFileChange(template, {footer: '<!-- 2 -->'});
+        return compiler.waitForWatchRunComplete();
+      })
+      .then(() => {
+        // Verify that the html was processed trice
+        expect(htmlWebpackPlugin.evaluateCompilationResult.calls.count())
+          .toBe(3);
+      })
+      .then(done);
+  });
 });