optimization
This commit is contained in:
@@ -1,107 +1,107 @@
|
||||
// @ts-check
|
||||
import crypto from "node:crypto";
|
||||
import objectHash from "object-hash";
|
||||
import getImageSources from "./getImageSources.js";
|
||||
import getProcessedImage from "./getProcessedImage.js";
|
||||
import getArtDirectedImages from "./getArtDirectedImages.js";
|
||||
import pMap from "p-map";
|
||||
|
||||
const imagesData = new Map();
|
||||
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
export default async function ({
|
||||
src,
|
||||
type,
|
||||
sizes: imagesizes,
|
||||
format,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
artDirectives,
|
||||
transformConfigs,
|
||||
}) {
|
||||
try {
|
||||
const args = Array.from(arguments);
|
||||
const hash = objectHash(args);
|
||||
if (imagesData.has(hash)) {
|
||||
return imagesData.get(hash);
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
|
||||
const { path, base, rest, image, imageWidth, imageHeight, imageFormat } =
|
||||
await getProcessedImage(src, transformConfigs);
|
||||
|
||||
await delay(250);
|
||||
src = path;
|
||||
|
||||
rest.aspect = `${imageWidth / imageHeight}`;
|
||||
if (!fallbackFormat) {
|
||||
fallbackFormat = imageFormat;
|
||||
}
|
||||
|
||||
// Fetch both image sources and art-directed images
|
||||
const [mainImage, artDirectedImages] = await pMap(
|
||||
[
|
||||
async () =>
|
||||
await getImageSources(
|
||||
src,
|
||||
base,
|
||||
image,
|
||||
format,
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
imageFormat,
|
||||
formatOptions,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
rest
|
||||
),
|
||||
async () => {
|
||||
await delay(250);
|
||||
return await getArtDirectedImages(
|
||||
artDirectives,
|
||||
placeholder,
|
||||
format,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
rest
|
||||
);
|
||||
},
|
||||
],
|
||||
async (task) => await task(),
|
||||
{ concurrency: 1 }
|
||||
);
|
||||
|
||||
// Ensure artDirectedImages is an array
|
||||
const images = Array.isArray(artDirectedImages) ? [...artDirectedImages, mainImage] : [mainImage];
|
||||
|
||||
const uuid = crypto.randomBytes(4).toString("hex").toUpperCase();
|
||||
|
||||
const returnObject = {
|
||||
uuid,
|
||||
images,
|
||||
};
|
||||
|
||||
imagesData.set(hash, returnObject);
|
||||
|
||||
const end = performance.now();
|
||||
|
||||
console.log(
|
||||
`Responsive Image sets generated for ${type} at ${args[0].src} in ${end - start}ms`
|
||||
);
|
||||
|
||||
return returnObject;
|
||||
} catch (error) {
|
||||
console.error("Error processing images:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
// @ts-check
|
||||
import crypto from "node:crypto";
|
||||
import objectHash from "object-hash";
|
||||
import getImageSources from "./getImageSources.js";
|
||||
import getProcessedImage from "./getProcessedImage.js";
|
||||
import getArtDirectedImages from "./getArtDirectedImages.js";
|
||||
import pMap from "p-map";
|
||||
|
||||
const imagesData = new Map();
|
||||
|
||||
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
export default async function ({
|
||||
src,
|
||||
type,
|
||||
sizes: imagesizes,
|
||||
format,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
artDirectives,
|
||||
transformConfigs,
|
||||
}) {
|
||||
try {
|
||||
const args = Array.from(arguments);
|
||||
const hash = objectHash(args);
|
||||
if (imagesData.has(hash)) {
|
||||
return imagesData.get(hash);
|
||||
}
|
||||
|
||||
const start = performance.now();
|
||||
|
||||
const { path, base, rest, image, imageWidth, imageHeight, imageFormat } =
|
||||
await getProcessedImage(src, transformConfigs);
|
||||
|
||||
await delay(100);
|
||||
src = path;
|
||||
|
||||
rest.aspect = `${imageWidth / imageHeight}`;
|
||||
if (!fallbackFormat) {
|
||||
fallbackFormat = imageFormat;
|
||||
}
|
||||
|
||||
// Fetch both image sources and art-directed images
|
||||
const [mainImage, artDirectedImages] = await pMap(
|
||||
[
|
||||
async () =>
|
||||
await getImageSources(
|
||||
src,
|
||||
base,
|
||||
image,
|
||||
format,
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
imageFormat,
|
||||
formatOptions,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
rest
|
||||
),
|
||||
async () => {
|
||||
await delay(100);
|
||||
return await getArtDirectedImages(
|
||||
artDirectives,
|
||||
placeholder,
|
||||
format,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
formatOptions,
|
||||
rest
|
||||
);
|
||||
},
|
||||
],
|
||||
async (task) => await task(),
|
||||
{ concurrency: 1 }
|
||||
);
|
||||
|
||||
// Ensure artDirectedImages is an array
|
||||
const images = Array.isArray(artDirectedImages) ? [...artDirectedImages, mainImage] : [mainImage];
|
||||
|
||||
const uuid = crypto.randomBytes(4).toString("hex").toUpperCase();
|
||||
|
||||
const returnObject = {
|
||||
uuid,
|
||||
images,
|
||||
};
|
||||
|
||||
imagesData.set(hash, returnObject);
|
||||
|
||||
const end = performance.now();
|
||||
|
||||
console.log(
|
||||
`Responsive Image sets generated for ${type} at ${args[0].src} in ${end - start}ms`
|
||||
);
|
||||
|
||||
return returnObject;
|
||||
} catch (error) {
|
||||
console.error("Error processing images:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,91 +1,91 @@
|
||||
// @ts-check
|
||||
import getSrcset from "./getSrcset.js";
|
||||
import getConfigOptions from "./getConfigOptions.js";
|
||||
import getFallbackImage from "./getFallbackImage.js";
|
||||
import pMap from "p-map";
|
||||
|
||||
function delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export default async function getImageSources(
|
||||
src,
|
||||
base,
|
||||
image,
|
||||
format,
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
imageFormat,
|
||||
formatOptions,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
rest
|
||||
) {
|
||||
try {
|
||||
const calculatedConfigs = getConfigOptions(
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
format,
|
||||
imageFormat,
|
||||
fallbackFormat,
|
||||
includeSourceFormat
|
||||
);
|
||||
|
||||
const { formats, requiredBreakpoints } = calculatedConfigs;
|
||||
imagesizes = calculatedConfigs.imagesizes;
|
||||
const maxWidth = requiredBreakpoints[requiredBreakpoints.length - 1];
|
||||
const sliceLength = -(maxWidth.toString().length + 2);
|
||||
|
||||
const sources = await pMap(
|
||||
formats,
|
||||
async (format) => {
|
||||
try {
|
||||
await delay(250);
|
||||
const srcset = await getSrcset(src, base, requiredBreakpoints, format, {
|
||||
...rest,
|
||||
...formatOptions[format],
|
||||
});
|
||||
|
||||
const srcsets = srcset.split(", ");
|
||||
const srcObject =
|
||||
format === fallbackFormat
|
||||
? { src: srcsets[srcsets.length - 1].slice(0, sliceLength) }
|
||||
: {};
|
||||
|
||||
return {
|
||||
...srcObject,
|
||||
format,
|
||||
srcset,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error processing format ${format}:`, error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
{ concurrency: 1 }
|
||||
);
|
||||
|
||||
const filteredSources = sources.filter(Boolean);
|
||||
|
||||
const sizes = {
|
||||
width: maxWidth,
|
||||
height: Math.round(maxWidth / rest.aspect),
|
||||
};
|
||||
|
||||
const fallback = await getFallbackImage(
|
||||
src,
|
||||
placeholder,
|
||||
image,
|
||||
fallbackFormat,
|
||||
formatOptions,
|
||||
rest
|
||||
)
|
||||
return { sources: filteredSources, sizes, fallback, imagesizes };
|
||||
} catch (error) {
|
||||
console.error("Error in getImageSources:", error);
|
||||
return { sources: [], sizes: {}, fallback: null, imagesizes: null };
|
||||
}
|
||||
}
|
||||
// @ts-check
|
||||
import getSrcset from "./getSrcset.js";
|
||||
import getConfigOptions from "./getConfigOptions.js";
|
||||
import getFallbackImage from "./getFallbackImage.js";
|
||||
import pMap from "p-map";
|
||||
|
||||
function delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
export default async function getImageSources(
|
||||
src,
|
||||
base,
|
||||
image,
|
||||
format,
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
placeholder,
|
||||
imageFormat,
|
||||
formatOptions,
|
||||
fallbackFormat,
|
||||
includeSourceFormat,
|
||||
rest
|
||||
) {
|
||||
try {
|
||||
const calculatedConfigs = getConfigOptions(
|
||||
imageWidth,
|
||||
imagesizes,
|
||||
breakpoints,
|
||||
format,
|
||||
imageFormat,
|
||||
fallbackFormat,
|
||||
includeSourceFormat
|
||||
);
|
||||
|
||||
const { formats, requiredBreakpoints } = calculatedConfigs;
|
||||
imagesizes = calculatedConfigs.imagesizes;
|
||||
const maxWidth = requiredBreakpoints[requiredBreakpoints.length - 1];
|
||||
const sliceLength = -(maxWidth.toString().length + 2);
|
||||
|
||||
const sources = await pMap(
|
||||
formats,
|
||||
async (format) => {
|
||||
try {
|
||||
await delay(100);
|
||||
const srcset = await getSrcset(src, base, requiredBreakpoints, format, {
|
||||
...rest,
|
||||
...formatOptions[format],
|
||||
});
|
||||
|
||||
const srcsets = srcset.split(", ");
|
||||
const srcObject =
|
||||
format === fallbackFormat
|
||||
? { src: srcsets[srcsets.length - 1].slice(0, sliceLength) }
|
||||
: {};
|
||||
|
||||
return {
|
||||
...srcObject,
|
||||
format,
|
||||
srcset,
|
||||
};
|
||||
} catch (error) {
|
||||
console.error(`Error processing format ${format}:`, error);
|
||||
return null;
|
||||
}
|
||||
},
|
||||
{ concurrency: 1 }
|
||||
);
|
||||
|
||||
const filteredSources = sources.filter(Boolean);
|
||||
|
||||
const sizes = {
|
||||
width: maxWidth,
|
||||
height: Math.round(maxWidth / rest.aspect),
|
||||
};
|
||||
|
||||
const fallback = await getFallbackImage(
|
||||
src,
|
||||
placeholder,
|
||||
image,
|
||||
fallbackFormat,
|
||||
formatOptions,
|
||||
rest
|
||||
)
|
||||
return { sources: filteredSources, sizes, fallback, imagesizes };
|
||||
} catch (error) {
|
||||
console.error("Error in getImageSources:", error);
|
||||
return { sources: [], sizes: {}, fallback: null, imagesizes: null };
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user