feat: add minimized tag in stats output for minimized HTML assets

webdiscus · Dec 5, 2024 · e4ed22a · e4ed22a
1 parent 02ad648
commit e4ed22a
Show file tree

Hide file tree

Showing 13 changed files with 87 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Change log
 
+## 4.8.0 (2024-12-05)
+
+- feat: add `minimized` tag in stats output for minimized HTML assets
+
 ## 4.7.0 (2024-12-04)
 
 - feat: precompile Handlebars templates with sub partials

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "description": "HTML Bundler Plugin for Webpack renders HTML templates containing source files of scripts, styles, images. Supports template engines: Eta, EJS, Handlebars, Nunjucks, Pug, TwigJS. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

diff --git a/src/Plugin/AssetCompiler.js b/src/Plugin/AssetCompiler.js
@@ -446,6 +446,21 @@ class AssetCompiler {
     // - only in the processAssets hook is possible to modify an asset content via async function
     // - the stage`Infinity` ensures that the process will be run after all optimizations
     compilation.hooks.processAssets.tapPromise({ name: pluginName, stage: Infinity + 1 }, this.processAssetsFinalAsync);
+
+    // output asset info tags in console statistics
+    compilation.hooks.statsPrinter.tap(pluginName, (stats) => {
+      stats.hooks.print.for('asset.info.minimized').tap(pluginName, (minimized, { green, formatFlag }) => {
+        if (!minimized) {
+          return '';
+        }
+
+        if (!green || !formatFlag) {
+          return 'minimized';
+        }
+
+        return green(formatFlag('minimized'));
+      });
+    });
   }
 
   /* istanbul ignore next: this method is called in watch mode after changes */
@@ -1026,7 +1041,7 @@ class AssetCompiler {
     }
 
     return this.collection
-      .render()
+      .render(assets)
       .then(() => {
         // remove all unused assets from compilation
         this.assetTrash.clearCompilation();

diff --git a/src/Plugin/Collection.js b/src/Plugin/Collection.js
@@ -867,13 +867,16 @@ class Collection {
    * Render all resolved assets in contents.
    * Inline JS, CSS, substitute output JS filenames.
    *
+   * @param {Object} assets
+   *
    * @return {Promise<Awaited<unknown>[]>|Promise<unknown>}
    */
-  render() {
+  render(assets) {
     const compilation = this.compilation;
     const { RawSource } = compilation.compiler.webpack.sources;
     const LF = this.pluginOption.getLF();
     const isIntegrity = this.pluginOption.isIntegrityEnabled();
+    const isHtmlMinify = this.pluginOption.isMinify();
 
     const hooks = this.hooks;
     const promises = [];
@@ -933,7 +936,7 @@ class Collection {
       // 3. minify HTML before inlining JS and CSS to avoid:
       //    - needles minification already minified assets in production mode
       //    - issues by parsing the inlined JS/CSS code with the html minification module
-      if (this.pluginOption.isMinify()) {
+      if (isHtmlMinify) {
         promise = promise.then((value) => minify(value, this.pluginOption.get().minifyOptions));
       }
 
@@ -1095,7 +1098,12 @@ class Collection {
       // update HTML content
       promise = promise.then((content) => {
         if (typeof content === 'string') {
-          compilation.updateAsset(entryFilename, new RawSource(content));
+          compilation.updateAsset(entryFilename, new RawSource(content), (assetInfo) => {
+            // update assetInfo for stats tags
+            assetInfo.minimized = isHtmlMinify;
+
+            return assetInfo;
+          });
         }
       });
 

diff --git a/test/cases/hook-statsPrinter-add-minimized/expected/index.html b/test/cases/hook-statsPrinter-add-minimized/expected/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><title>Test</title><link href="style.css" rel="stylesheet"/><script src="main.js" defer="defer"></script></head><body><h1>Hello World!</h1></body></html>
diff --git a/test/cases/hook-statsPrinter-add-minimized/expected/main.js b/test/cases/hook-statsPrinter-add-minimized/expected/main.js
@@ -0,0 +1 @@
+console.log(">> main");
diff --git a/test/cases/hook-statsPrinter-add-minimized/expected/style.css b/test/cases/hook-statsPrinter-add-minimized/expected/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/hook-statsPrinter-add-minimized/src/index.html b/test/cases/hook-statsPrinter-add-minimized/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Test</title>
+  <link href="./style.css" rel="stylesheet" />
+  <script src="./main.js" defer="defer"></script>
+</head>
+<body>
+  <h1>Hello World!</h1>
+</body>
+</html>
diff --git a/test/cases/hook-statsPrinter-add-minimized/src/main.js b/test/cases/hook-statsPrinter-add-minimized/src/main.js
@@ -0,0 +1 @@
+console.log('>> main');
diff --git a/test/cases/hook-statsPrinter-add-minimized/src/style.css b/test/cases/hook-statsPrinter-add-minimized/src/style.css
@@ -0,0 +1,3 @@
+h1 {
+  color: red;
+}
diff --git a/test/cases/hook-statsPrinter-add-minimized/webpack.config.js b/test/cases/hook-statsPrinter-add-minimized/webpack.config.js
@@ -0,0 +1,29 @@
+const path = require('path');
+const HtmlBundlerPlugin = require('@test/html-bundler-webpack-plugin');
+
+module.exports = {
+  mode: 'production',
+  stats: true, // test stats.hooks.print
+
+  output: {
+    path: path.join(__dirname, 'dist/'),
+  },
+
+  plugins: [
+    new HtmlBundlerPlugin({
+      entry: {
+        index: './src/index.html',
+      },
+      minify: true, // test [minimized] tag for HTML files
+    }),
+  ],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['css-loader'],
+      },
+    ],
+  },
+};
diff --git a/test/integration.test.js b/test/integration.test.js
@@ -192,6 +192,10 @@ describe('plugin hooks', () => {
 
   // TODO: add an argument as flat map of assets, w/o tree, to create a manifest
   test('afterEmit', () => compareFiles('hook-afterEmit'));
+
+  test('display stats with tags', () => compareFiles('hook-statsPrinter-add-minimized'));
+  test('stats, tag minimized', () =>
+    stdoutContain('hook-statsPrinter-add-minimized', 'asset index.html 180 bytes [compared for emit] [minimized]'));
 });
 
 describe('plugin callbacks', () => {

diff --git a/test/manual/handlebars/webpack.config.js b/test/manual/handlebars/webpack.config.js
@@ -4,7 +4,7 @@ const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
 module.exports = {
   //mode: 'production',
   mode: 'development',
-  stats: 'minimal',
+  //stats: 'minimal',
 
   resolve: {
     alias: {
@@ -47,6 +47,7 @@ module.exports = {
       },
 
       hotUpdate: true, // test this option
+      minify: true,
     }),
   ],
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html><head><title>Test</title><link href="style.css" rel="stylesheet"/><script src="main.js" defer="defer"></script></head><body><h1>Hello World!</h1></body></html>