html-bundler-webpack-plugin Upstream issue in `html-minifier-terser`: `<meta name="viewport" content="width=device-width initial-scale=1">` is incorrectly minified

Just linking it here so it can be more easily tracked, and others that might be affected when using html-bundler-webpack-plugin can more easily find it here.

Upstream issue: https://github.com/terser/html-minifier-terser/issues/178

Aug 01 '24 15:08 davidmurdoch

@davidmurdoch thanks for the link to the issue.

Aug 01 '24 15:08 webdiscus

@davidmurdoch

Alternatively, can be used another minify lib.

Just disable build-in minify option: minify: false and use the postprocess callback option with other minify:

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
const myMinify = require('ANY-MINIFY-PACKAGE'); // <= install another minify package

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: './src/home.html',
      },
      minify: false, // <= disable build-in minify
      postprocess: (content) => myMinify(content), // <= use custom minify function
    }),
  ],
};

Aug 01 '24 15:08 webdiscus

Valid property separators are also comma or semicolon. Tag <meta name="viewport" content="width=device-width, initial-scale=1"> is valid. Minified to valid <meta name="viewport" content="width=device-width,initial-scale=1">.

Dec 04 '24 20:12 vralle

@davidmurdoch

thanks to @vralle, provided an example of using more efficient and faster HTML minimizer html-minimizer-webpack-plugin plugin with the @swc/html module, which keep the content value unchanged.

const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
import HtmlMinimizerPlugin from 'html-minimizer-webpack-plugin';

module.exports = {
  plugins: [
    new HtmlBundlerPlugin({
      entry: {
        index: './src/index.html',
      },
      minify: false, // <= disable build-in minify
    }),
  ],
  optimization: {
    minimizer: [
      new HtmlMinimizerPlugin({
        minify: HtmlMinimizerPlugin.swcMinify, // <= requires additional `@swc/html` package
        minimizerOptions: {
          quotes: false,
          tagOmission: false, // <= this option must be `false` to keep head and body tags
        },
      }),
    ],
  },
};

The generated minified HTML containing valid content="width=device-width initial-scale=1":

<!doctype html><html><head><meta name=viewport content="width=device-width initial-scale=1">
<link href=css/home.bundle.css rel=stylesheet><script src=js/main.bundle.js></script></head><body><h1>Hello World!</h1></body></html>

Here is the test case used html-minimizer-webpack-plugin.

Jan 12 '25 23:01 webdiscus