feat: Minification (#94)

* added minifications for html, and css built from scss

* cleanup css themes to keep only the first comment

.eleventy.js

@@ -5,6 +5,7 @@ const matter = require("gray-matter");
 const faviconPlugin = require("eleventy-favicon");
 const tocPlugin = require("eleventy-plugin-nesting-toc");
 const { parse } = require("node-html-parser");
+const htmlMinifier = require("html-minifier");
 
 const { headerToId, namedHeadingsFilter } = require("./src/helpers/utils");
 const {
@@ -304,6 +305,23 @@ module.exports = function (eleventyConfig) {
     return str && parsed.innerHTML;
   });
 
+  eleventyConfig.addTransform("htmlMinifier", (content, outputPath) => {
+    if (
+      process.env.NODE_ENV === "production" &&
+      outputPath &&
+      outputPath.endsWith(".html")
+    ) {
+      return htmlMinifier.minify(content, {
+        useShortDoctype: true,
+        removeComments: true,
+        collapseWhitespace: true,
+        minifyCSS: true,
+        minifyJS: true,
+      });
+    }
+    return content;
+  });
+
   eleventyConfig.addPassthroughCopy("src/site/img");
   eleventyConfig.addPassthroughCopy("src/site/scripts");
   eleventyConfig.addPassthroughCopy("src/site/styles/_theme.*.css");

package.json

@@ -8,7 +8,7 @@
         "watch:sass": "sass --watch src/site/styles:dist/styles",
         "watch:eleventy": "cross-env ELEVENTY_ENV=dev eleventy --serve",
         "build:eleventy": "cross-env ELEVENTY_ENV=prod NODE_OPTIONS=--max-old-space-size=4096 eleventy",
-        "build:sass": "sass src/site/styles:dist/styles",
+        "build:sass": "sass src/site/styles:dist/styles --style compressed",
         "get-theme": "node src/site/get-theme.js",
         "build": "npm-run-all get-theme build:*",
         "postbuild": "node src/site/lunr-index.js"
@@ -19,6 +19,7 @@
     "devDependencies": {
         "@11ty/eleventy": "^2.0.0",
         "cross-env": "^7.0.3",
+        "html-minifier": "^4.0.0",
         "node-html-parser": "^6.1.4",
         "npm-run-all": "^4.1.5",
         "sass": "^1.49.9"
@@ -43,4 +44,4 @@
         "markdown-it-plantuml": "^1.4.1",
         "markdown-it-task-checkbox": "^1.0.6"
     }
-}
+}

src/site/get-theme.js

@@ -4,6 +4,8 @@ const fs = require("fs");
 const crypto = require("crypto");
 const glob = require("glob");
 
+const themeCommentRegex = /\/\*[\s\S]*?\*\//g;
+
 async function getTheme() {
   let themeUrl = process.env.THEME;
   if (themeUrl) {
@@ -26,13 +28,19 @@ async function getTheme() {
         fs.rmSync(file);
       });
     } catch {}
+    let skippedFirstComment = false;
+    const data = res.data.replace(themeCommentRegex, (match) => {
+      if (skippedFirstComment) {
+        return "";
+      } else {
+        skippedFirstComment = true;
+        return match;
+      }
+    });
     const hashSum = crypto.createHash("sha256");
-    hashSum.update(res.data);
+    hashSum.update(data);
     const hex = hashSum.digest("hex");
-    fs.writeFileSync(
-      `src/site/styles/_theme.${hex.substring(0, 8)}.css`,
-      res.data
-    );
+    fs.writeFileSync(`src/site/styles/_theme.${hex.substring(0, 8)}.css`, data);
   }
 }