Build time increases after upgrade from v5.0.0 to v6.0.x

[Gr0t3Man]

After upgrading the eleventy-img plugin from v5.0.0 to v6.0.2 i notice a increased built time. Specially on the sites which are heavily (13940x) using on the image shortcode. I first noticed it when editing the site, in the “--serve -incremental” mode.

The initial startup in “--serve” mode increases with 3x from 5,68 sec to 18,55 sec. (311 files)
After a change in a global data file (which triggers a rebuild in --serve), the build time increase from 1,47 sec (v5.0.0, with benchmark 407ms ) to 11,78 sec (v6.0.2 with benchmark 5560ms on the image Nunjucks async shortcode). An increase of 8x time!!

A full build of the site (3683 files) increase from 60 sec to 105 sec, this is including a "htmlmin" transform.

All the images are stored local on a drive and the destination is on the same drive.

The nunjucks shortcode:

{% image imageSrc, catalog[catalogAlts][language][imageSrc], "(max-width: 575px) 200px, (max-width: 768px) 300px, (min-width: 992px) 200px, 100w", "200, 300, 400","card-img-top shop-item-thumbnail img-fluid mx-auto d-block", loading -%}

The async shortcode function is:

import Image from '@11ty/eleventy-img'; import path from 'path'; const srcPrefix = ./assets/images/; const urlPathImages = /images/; const outputPathImages = ./_site/images/`;

async function imageShortcode(src, alt, sizes, range, cls, loading) {
if (alt === undefined) {
// You bet we throw an error on missing alt (alt="" works okay)
throw new Error(Missing \alt` on responsiveimage from: ${src}`);
}
src = srcPrefix + src;

let metadata = await Image(src, {
widths: range.split(","),
formats: ["webp", "jpeg"],
urlPath: urlPathImages,
outputDir: outputPathImages,
filenameFormat: function (id, src, width, format, options) {
const extension = path.extname(src);
const name = path.basename(src, extension);
return ${width}w/${name}.${format};
},
});

let lowsrc = metadata.jpeg[0];
let highsrc = metadata.jpeg[metadata.jpeg.length - 1];
let aspect = highsrc.width / 100 + "/" + highsrc.height / 100;

return <picture> ${Object.values(metadata) .map((imageFormat) => { return <source type="${
imageFormat[0].sourceType
}" srcset="${imageFormat
.map((entry) => entry.srcset)
.join(", ")}" sizes="${sizes}">; }) .join("\n")} <img src="${highsrc.url}" class="${cls}" alt="${alt}" loading="${loading}" aspect-ratio="${aspect}" decoding="async"> </picture>;
};'

workaround
For this moment I switch back to v5.0.0, since the performance is way better and i don't use any new feature on this moment.

[Gr0t3Man]

Screenshots from v5.0.0 buildtimes

[Gr0t3Man]

Screenshots from the v6.0.2 buildtimes

[Gr0t3Man]

I have done some testing, because i also notice that laptop became slowly after multiple saves/rebuilds during "--serve" mode. (save of a global data file (json). During testing no information was added/deleted to the file, just pressing ctrl-s.

It looks like there is memory-leak with v6.0.2, because after every save/rebuild the memory usage keeps increasing, until al physical memory is full and the process starts using swap memory. With my laptop (16GB) is around save 7 the max is reached.
The same test with v5.0.0 the memory usage levels out after save 2 and stays at the same level for at least 10 saves

[Gr0t3Man]

I have done some testing (on a smaller website with eleventy v3.0.0) and monitored the memory usage, using the process.memoryUsage() of the node.js process, I found that the external and arrayBuffers keeps rising after every save with v6.0.2. While in v5.0.0 these values varies in time, a sign that memory is cleaned.

The testing was done by adding the following line in the eleventy.config.js file

eleventyConfig.on('eleventy.after', async () => { console.log(process.memoryUsage()) });

[Gr0t3Man]

I have tested with Eleventy 3.1.0 and eleventy-img 6.0.4, still the same external memory leak exist.