⚡ Optimize build by combining JSDOM transforms

.eleventy.js

@@ -73,11 +73,10 @@ module.exports = function (eleventyConfig) {
     verbose: false,
   });
 
-  eleventyConfig.addPlugin(require("./_11ty/img-dim.js"));
   eleventyConfig.addPlugin(require("./_11ty/json-ld.js"));
   eleventyConfig.addPlugin(require("./_11ty/youtube-html-transform.js"));
   eleventyConfig.addPlugin(require("./_11ty/optimize-html.js"));
-  eleventyConfig.addPlugin(require("./_11ty/apply-csp.js"));
+  eleventyConfig.addPlugin(require("./_11ty/combined-transforms.js"));
   eleventyConfig.setDataDeepMerge(true);
   eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
   eleventyConfig.addNunjucksAsyncFilter(

_11ty/apply-csp.js

@@ -45,13 +45,9 @@ function quote(str) {
   return `'${str}'`;
 }
 
-const addCspHash = async (rawContent, outputPath) => {
-  let content = rawContent;
-
-  if (outputPath && outputPath.endsWith(".html")) {
-    const dom = new JSDOM(content);
+const processCsp = (document) => {
     const cspAble = [
-      ...dom.window.document.querySelectorAll("script[csp-hash]"),
+      ...document.querySelectorAll("script[csp-hash]"),
     ];
 
     const hashes = cspAble.map((element) => {
@@ -63,17 +59,24 @@ const addCspHash = async (rawContent, outputPath) => {
       hashes.push.apply(hashes, AUTO_RELOAD_SCRIPTS);
     }
 
-    const csp = dom.window.document.querySelector(
+    const csp = document.querySelector(
       "meta[http-equiv='Content-Security-Policy']"
     );
     if (!csp) {
-      return content;
+      return;
     }
     csp.setAttribute(
       "content",
       csp.getAttribute("content").replace("HASHES", hashes.join(" "))
     );
+}
 
+const addCspHash = async (rawContent, outputPath) => {
+  let content = rawContent;
+
+  if (outputPath && outputPath.endsWith(".html")) {
+    const dom = new JSDOM(content);
+    processCsp(dom.window.document);
     content = dom.serialize();
   }
 
@@ -102,6 +105,7 @@ module.exports = {
   configFunction: async (eleventyConfig, pluginOptions = {}) => {
     eleventyConfig.addTransform("csp", addCspHash);
   },
+  processCsp, // Exporting for reuse
 };
 
 function isDevelopmentMode() {

_11ty/combined-transforms.js

@@ -0,0 +1,26 @@
+const { JSDOM } = require("jsdom");
+const { processImages } = require("./img-dim");
+const { processCsp } = require("./apply-csp");
+
+const combinedTransform = async (rawContent, outputPath) => {
+  let content = rawContent;
+
+  if (outputPath && outputPath.endsWith(".html")) {
+    const dom = new JSDOM(content);
+    const doc = dom.window.document;
+
+    await processImages(doc, outputPath);
+    processCsp(doc, outputPath);
+
+    content = dom.serialize();
+  }
+
+  return content;
+};
+
+module.exports = {
+  initArguments: {},
+  configFunction: async (eleventyConfig, pluginOptions = {}) => {
+    eleventyConfig.addTransform("combined", combinedTransform);
+  },
+};

_11ty/img-dim.js

@@ -145,17 +145,21 @@ async function setSrcset(img, src, format) {
   return setInfo.fallback;
 }
 
+const processImages = async (document, outputPath) => {
+  const images = [...document.querySelectorAll("img,amp-img")];
+
+  if (images.length > 0) {
+    await Promise.all(images.map((i) => processImage(i, outputPath)));
+  }
+};
+
 const dimImages = async (rawContent, outputPath) => {
   let content = rawContent;
 
   if (outputPath && outputPath.endsWith(".html")) {
     const dom = new JSDOM(content);
-    const images = [...dom.window.document.querySelectorAll("img,amp-img")];
-
-    if (images.length > 0) {
-      await Promise.all(images.map((i) => processImage(i, outputPath)));
-      content = dom.serialize();
-    }
+    await processImages(dom.window.document, outputPath);
+    content = dom.serialize();
   }
 
   return content;
@@ -166,4 +170,5 @@ module.exports = {
   configFunction: async (eleventyConfig, pluginOptions = {}) => {
     eleventyConfig.addTransform("imgDim", dimImages);
   },
+  processImages, // Exporting for reuse
 };