fix: better way to avoid optimize twice (#457)

webpack-contrib · Nov 19, 2024 · 1b2d40e · 1b2d40e
1 parent 5c4b1e4
commit 1b2d40e
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 11 deletions.
diff --git a/src/index.js b/src/index.js
@@ -16,6 +16,7 @@ const {
   sharpMinify,
   sharpGenerate,
   svgoMinify,
+  IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS,
 } = require("./utils.js");
 
 /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
@@ -26,6 +27,7 @@ const {
 /** @typedef {import("webpack").Asset} Asset */
 /** @typedef {import("webpack").AssetInfo} AssetInfo */
 /** @typedef {import("webpack").sources.Source} Source */
+/** @typedef {import("webpack").Module} Module */
 /** @typedef {import("./utils.js").imageminMinify} ImageminMinifyFunction */
 /** @typedef {import("./utils.js").squooshMinify} SquooshMinifyFunction */
 
@@ -469,7 +471,7 @@ class ImageMinimizerPlugin {
         compilation.hooks.moduleAsset.tap(
           { name: pluginName },
           (module, file) => {
-            const newInfo = module?.buildMeta?.imageMinimizerPluginInfo;
+            const newInfo = IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS.get(module);
 
             if (newInfo) {
               const asset = /** @type {Asset} */ (compilation.getAsset(file));
@@ -483,8 +485,14 @@ class ImageMinimizerPlugin {
         compilation.hooks.assetPath.tap(
           { name: pluginName },
           (filename, data, info) => {
-            // @ts-ignore
-            const newInfo = data?.module?.buildMeta?.imageMinimizerPluginInfo;
+            const newInfo =
+              /** @type {{ module: Module }} */
+              (data)?.module
+                ? IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS.get(
+                    /** @type {{ module: Module }} */
+                    (data).module,
+                  )
+                : undefined;
 
             if (info && newInfo) {
               Object.assign(info, newInfo);

diff --git a/src/loader.js b/src/loader.js
@@ -2,7 +2,10 @@ const path = require("path");
 
 const worker = require("./worker");
 const schema = require("./loader-options.json");
-const { isAbsoluteURL } = require("./utils.js");
+const {
+  isAbsoluteURL,
+  IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS,
+} = require("./utils.js");
 
 /** @typedef {import("schema-utils/declarations/validate").Schema} Schema */
 /** @typedef {import("webpack").Compilation} Compilation */
@@ -97,9 +100,13 @@ function processSizeQuery(transformers, widthQuery, heightQuery, unitQuery) {
  */
 async function loader(content) {
   // Avoid optimize twice
+  const imageMinimizerPluginInfo = this._module
+    ? IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS.get(this._module)
+    : undefined;
+
   if (
-    this._module?.buildMeta?.imageMinimizerPluginInfo?.minimized ||
-    this._module?.buildMeta?.imageMinimizerPluginInfo?.generated
+    imageMinimizerPluginInfo?.minimized ||
+    imageMinimizerPluginInfo?.generated
   ) {
     return content;
   }
@@ -267,12 +274,8 @@ async function loader(content) {
     }
   }
 
-  // TODO: search better API
   if (this._module) {
-    this._module.buildMeta = {
-      ...this._module.buildMeta,
-      imageMinimizerPluginInfo: output.info,
-    };
+    IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS.set(this._module, output.info);
   }
 
   callback(null, output.data);

diff --git a/src/utils.js b/src/utils.js
@@ -4,6 +4,8 @@ const path = require("path");
 /** @typedef {import("./index").SquooshOptions} SquooshOptions */
 /** @typedef {import("imagemin").Options} ImageminOptions */
 /** @typedef {import("webpack").WebpackError} WebpackError */
+/** @typedef {import("webpack").Module} Module */
+/** @typedef {import("webpack").AssetInfo} AssetInfo */
 
 /**
  * @template T
@@ -1289,6 +1291,9 @@ async function svgoMinify(original, minimizerOptions) {
   };
 }
 
+/** @type {WeakMap<Module, AssetInfo>} */
+const IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS = new WeakMap();
+
 module.exports = {
   throttleAll,
   isAbsoluteURL,
@@ -1302,4 +1307,5 @@ module.exports = {
   sharpMinify,
   sharpGenerate,
   svgoMinify,
+  IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS,
 };
diff --git a/types/index.d.ts b/types/index.d.ts
@@ -52,6 +52,7 @@ declare namespace ImageMinimizerPlugin {
     Asset,
     AssetInfo,
     Source,
+    Module,
     ImageminMinifyFunction,
     SquooshMinifyFunction,
     Rule,
@@ -95,6 +96,7 @@ type WebpackError = import("webpack").WebpackError;
 type Asset = import("webpack").Asset;
 type AssetInfo = import("webpack").AssetInfo;
 type Source = import("webpack").sources.Source;
+type Module = import("webpack").Module;
 type ImageminMinifyFunction = typeof imageminMinify;
 type SquooshMinifyFunction = typeof squooshMinify;
 type Rule = RegExp | string;

diff --git a/types/utils.d.ts b/types/utils.d.ts
@@ -2,6 +2,8 @@ export type WorkerResult = import("./index").WorkerResult;
 export type SquooshOptions = import("./index").SquooshOptions;
 export type ImageminOptions = import("imagemin").Options;
 export type WebpackError = import("webpack").WebpackError;
+export type Module = import("webpack").Module;
+export type AssetInfo = import("webpack").AssetInfo;
 export type Task<T> = () => Promise<T>;
 export type SvgoLib = typeof import("svgo");
 export type SvgoOptions = {
@@ -58,6 +60,8 @@ export function isAbsoluteURL(url: string): boolean;
 /** @typedef {import("./index").SquooshOptions} SquooshOptions */
 /** @typedef {import("imagemin").Options} ImageminOptions */
 /** @typedef {import("webpack").WebpackError} WebpackError */
+/** @typedef {import("webpack").Module} Module */
+/** @typedef {import("webpack").AssetInfo} AssetInfo */
 /**
  * @template T
  * @typedef {() => Promise<T>} Task
@@ -167,6 +171,8 @@ export function svgoMinify<T>(
   original: WorkerResult,
   minimizerOptions: T,
 ): Promise<WorkerResult | null>;
+/** @type {WeakMap<Module, AssetInfo>} */
+export const IMAGE_MINIMIZER_PLUGIN_INFO_MAPPINGS: WeakMap<Module, AssetInfo>;
 declare function squooshImagePoolSetup(): void;
 declare function squooshImagePoolTeardown(): Promise<void>;
 export {};