Minify HTML decryption template

package.json

@@ -24,6 +24,7 @@
     "devDependencies": {
         "@types/node": "^22.10.7",
         "esbuild": "^0.20.2",
+        "html-minifier-terser": "^7.2.0",
         "prettier": "^3.4.2",
         "typescript": "^5.7.3",
         "vite": "^6.0.7",

scripts/esbuild.js

@@ -3,6 +3,7 @@ import { cp, readFile, writeFile, rm, readdir, mkdir } from 'fs/promises'
 import { execSync } from 'child_process'
 import { resolve, join } from 'path'
 import { performance } from 'perf_hooks'
+import { minify } from 'html-minifier-terser'
 
 const readJSON = (path) => readFile(path, 'utf-8').then(JSON.parse)
 const writeJSON = (path, content, indentation = 4) =>
@@ -21,6 +22,26 @@ async function emptyDir(dir) {
     )
 }
 
+async function minifyHTML(html) {
+    const minifiedHTML = await minify(html, {
+        removeComments: true,
+        removeEmptyAttributes: true,
+        html5: true,
+        decodeEntities: true,
+        collapseWhitespace: true,
+        collapseBooleanAttributes: true,
+        removeAttributeQuotes: true,
+        removeRedundantAttributes: true,
+    })
+    console.log(
+        `HTML size reduced by ${Math.round(
+            100 - (minifiedHTML.length / html.length) * 100,
+        )}%`,
+    )
+
+    return minifiedHTML
+}
+
 const startTime = performance.now()
 const pkg = await readJSON('./package.json')
 
@@ -31,6 +52,19 @@ const distDir = resolve(outDir)
 
 await emptyDir(distDir)
 
+const minifyHTMLPlugin = {
+    name: 'minifyl-html-plugin',
+    setup(build) {
+        build.onLoad({ filter: /\.html$/ }, async (args) => {
+            const contents = await readFile(args.path, 'utf8')
+            return {
+                contents: await minifyHTML(contents),
+                loader: 'text',
+            }
+        })
+    },
+}
+
 esbuild
     .build({
         entryPoints: ['src/index.ts', 'src/core.ts', 'src/cli.ts'],
@@ -42,8 +76,8 @@ esbuild
         format: 'esm',
         target: ['esnext'],
         platform: 'node',
-        loader: { '.html': 'text' },
         external: ['rfc4648', 'sade'],
+        plugins: [minifyHTMLPlugin],
     })
     .then(async () => {
         // Build declaration files with TSC since they aren't built by esbuild.

src/decrypt-template.html

@@ -21,7 +21,7 @@
                 <p id="msg">This page is password protected.</p>
             </header>
             <form class="hidden">
-                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus />
+                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus>
                 <input type="submit" value="Submit">
             </form>
         </div>

web/index.html

@@ -21,7 +21,7 @@
                 <p id="msg">This page is password protected.</p>
             </header>
             <form class="hidden">
-                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus />
+                <input type="password" id="pwd" name="pwd" aria-label="Password" autofocus>
                 <input type="submit" value="Submit">
             </form>
         </div>