Minify HTML in production

Author: seproDev

.eleventy.js

@@ -1,13 +1,14 @@
 const filters = require("./utils/filters.js")
 const esbuild = require("esbuild");
 const { sassPlugin } = require("esbuild-sass-plugin");
+const htmlmin = require("html-minifier");
 
 module.exports = function (eleventyConfig) {
 
   eleventyConfig.addGlobalData("generated", () => {
     let now = new Date();
     return new Intl.DateTimeFormat(
-      "en-GB", { dateStyle: "medium", timeStyle: "long", timeZone: "UTC"}
+      "en-GB", { dateStyle: "medium", timeStyle: "long", timeZone: "UTC" }
     ).format(now);
   });
 
@@ -16,17 +17,29 @@ module.exports = function (eleventyConfig) {
     eleventyConfig.addFilter(filterName, filters[filterName])
   })
 
+  eleventyConfig.addTransform("htmlmin", (content, outputPath) => {
+    if (outputPath && outputPath.endsWith(".html") && process.env.NODE_ENV === "production") {
+      return htmlmin.minify(content, {
+        useShortDoctype: true,
+        removeComments: true,
+        collapseWhitespace: true
+      });
+    }
+    return content;
+  });
+
   eleventyConfig.on("afterBuild", () => {
     return esbuild.build({
       entryPoints: ["_site/_esbuild/app.scss", "_site/_esbuild/app.js"],
       outdir: "_site/assets",
       bundle: true,
+      legalComments: "linked",
       minify: process.env.NODE_ENV === "production",
       sourcemap: process.env.NODE_ENV !== "production",
       plugins: [sassPlugin()]
     });
   });
-  
+
   eleventyConfig.addWatchTarget("./src/sass/");
   eleventyConfig.addWatchTarget("./src/js/");
 

package-lock.json

@@ -18,6 +18,7 @@
     "esbuild": "^0.14.47",
     "esbuild-sass-plugin": "^2.2.6",
     "flexsearch": "^0.7.21",
+    "html-minifier": "^4.0.0",
     "markdown-it": "^13.0.1",
     "p-limit": "^3.1.0"
   }

package.json

@@ -1,7 +1,6 @@
 ---
 permalink: /_esbuild/app.scss
 ---
-
 @import "../../node_modules/bootstrap/scss/functions";
 
 // variable overrides