feat: pick up the srcset and sizes attributes for image preload, #149

Author: webdiscus

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.17.0 (2025-01-29)
+
+- feat: pick up the `srcset` and `sizes` attributes for image preload, #149
+
 ## 4.16.0 (2025-01-28)
 
 - feat: add integrity attribute for preload tags if integrity option on, #145

package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-bundler-webpack-plugin",
-  "version": "4.16.0",
+  "version": "4.17.0",
   "description": "Generates complete single-page or multi-page website from source assets. Build-in support for Markdown, Eta, EJS, Handlebars, Nunjucks, Pug. Alternative to html-webpack-plugin.",
   "keywords": [
     "html",

src/Plugin/Preload.js

@@ -1,5 +1,6 @@
 const path = require('path');
 const { detectIndent, getFileExtension } = require('../Common/Helpers');
+const { HtmlParser } = require('../Common/HtmlParser');
 const { optionPreloadAsException } = require('./Messages/Exception');
 
 /**
@@ -108,6 +109,7 @@ class Preload {
     const LF = this.pluginOption.getLF();
     const indent = LF + detectIndent(content, insertPos - 1);
     const groupBy = {};
+    let hasImage = false;
 
     // normalize preload attributes and create sorted groups in the order of the specified 'preload' options
     for (const conf of options) {
@@ -127,6 +129,7 @@ class Preload {
 
       // for the `font` type, the `crossorigin` attribute is mandatory, if it is not defined, set to default value
       if (as === 'font' && !('crossorigin' in attrs)) attrs.crossorigin = true;
+      if (as === 'image') hasImage = true;
 
       // whether the 'type' property exist regardless of a value;
       // if the property exists and have the undefined value, exclude this attribute in generating preload tag
@@ -141,6 +144,9 @@ class Preload {
       groupBy[as] = [];
     }
 
+    // pick up image attributes to preload
+    const imageAttributes = hasImage ? this.#getImageAttributes(content) : new Map();
+
     // prepare a flat array with preload assets
     for (let item of data.assets) {
       if (item.inline) continue;
@@ -170,6 +176,12 @@ class Preload {
 
           if (this.pluginOption.applyAdvancedFiler({ sourceFiles, outputFile }, conf._opts.filter)) {
             let props = this.createPreloadAttributes(conf, { integrity: item.integrity, crossorigin });
+            let imgAttrs = imageAttributes.get(item.assetFile);
+
+            if (imgAttrs) {
+              props.attrs = Object.assign(props.attrs, imgAttrs);
+            }
+
             preloadAssets.set(item.assetFile, props);
           }
         }
@@ -204,19 +216,20 @@ class Preload {
             : assetItem.assetFile;
 
           if (this.pluginOption.applyAdvancedFiler({ sourceFiles, outputFile }, conf._opts.filter)) {
-            preloadAssets.set(outputFile, conf._opts);
+            let props = this.createPreloadAttributes(conf);
+            preloadAssets.set(outputFile, props);
           }
         }
       }
     }
 
     // save generated preload tags for verbose
     data.preloads = [];
-    for (const [filename, opts] of preloadAssets.entries()) {
-      const attrs = { ...opts.attrs };
+    for (const [filename, props] of preloadAssets.entries()) {
+      const { attrs } = props;
 
       attrs.href = filename;
-      if (!opts.hasType) {
+      if (!props.hasType) {
         const ext = getFileExtension(filename);
         attrs.type = mimeType[attrs.as]?.[ext] || attrs.as + '/' + ext;
       }
@@ -246,19 +259,59 @@ class Preload {
   }
 
   /**
-   * @param {Object} conf
-   * @param {string|undefined} integrity
-   * @param {string} crossorigin
-   * @return {Object} Returns preload attributes. It my contains integrity if exists.
+   * @param {Object} conf The source options from configuration.
+   * @param {string|undefined} integrity The integrity, used by script and style only.
+   * @param {string} crossorigin The attribute required for integrity, used by script and style only.
+   * @return {Object} Returns new object of preload attributes. It may contains integrity if exists.
    */
-  createPreloadAttributes(conf, { integrity, crossorigin }) {
-    let opts = { ...conf._opts };
+  createPreloadAttributes(conf, { integrity, crossorigin } = {}) {
+    let props = { ...conf._opts };
+
+    // create new object for attributes, to keep original config unchanged
+    props.attrs = { ...props.attrs };
 
     if (integrity) {
-      opts.attrs = { ...opts.attrs, integrity, crossorigin };
+      props.attrs.integrity = integrity;
+      props.attrs.crossorigin = crossorigin;
+    }
+
+    return props;
+  }
+
+  /**
+   * Pick up image attributes to preload.
+   *
+   * @param {string} content
+   * @return {Map<string, any>}
+   */
+  #getImageAttributes(content) {
+    const imageAttributes = new Map();
+    const parseOptions = {
+      tag: 'img',
+      attributes: ['srcset', 'sizes'],
+    };
+    const imageTags = HtmlParser.parseTag(content, parseOptions);
+
+    for (const tag of imageTags) {
+      const attrs = {};
+      let hasAttrs = false;
+
+      if (tag.attrs.srcset) {
+        attrs.imagesrcset = tag.attrs.srcset.replaceAll(/\n|\b|\s{2,}/g, '');
+        hasAttrs = true;
+      }
+
+      if (tag.attrs.sizes) {
+        attrs.imagesizes = tag.attrs.sizes.replaceAll(/\n|\b|\s{2,}/g, '');
+        hasAttrs = true;
+      }
+
+      if (hasAttrs) {
+        imageAttributes.set(tag.attrs.src, attrs);
+      }
     }
 
-    return opts;
+    return imageAttributes;
   }
 
   /**

test/cases/option-preload-img-srcset/expected/img/abstract.webp

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+<link rel="preload" href="img/hardware.webp" as="image" type="image/webp" imagesrcset="img/hardware-xs.webp 340w,img/hardware-sm.webp 540w,img/hardware-md.webp 960w" imagesizes="(max-width: 576px) 100vw,(max-width: 768px) 540px,(max-width: 992px) 720px,1140px">
+<link rel="preload" href="img/abstract.webp" as="image" type="image/webp">
+</head>
+<body>
+  <h1>Home</h1>
+  <img src="img/hardware.webp" width="700" height="480"
+       srcset="
+         img/hardware-xs.webp 340w,
+         img/hardware-sm.webp 540w,
+         img/hardware-md.webp 960w"
+       sizes="
+        (max-width: 576px) 100vw,
+        (max-width: 768px) 540px,
+        (max-width: 992px) 720px,
+        1140px"
+       alt="hardware">
+
+  <img src="img/abstract.webp" width="640" height="320" alt="abstract">
+</body>
+</html>

test/cases/option-preload-img-srcset/expected/img/hardware-md.webp

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Home</title>
+</head>
+<body>
+  <h1>Home</h1>
+  <img src="@images/responsive/hardware.webp" width="700" height="480"
+       srcset="
+         @images/responsive/hardware.webp?as=xs 340w,
+         @images/responsive/hardware.webp?as=sm 540w,
+         @images/responsive/hardware.webp?as=md 960w"
+       sizes="
+        (max-width: 576px) 100vw,
+        (max-width: 768px) 540px,
+        (max-width: 992px) 720px,
+        1140px"
+       alt="hardware">
+
+  <img src="@images/responsive/abstract.webp" width="640" height="320" alt="abstract">
+</body>
+</html>