Apply caching to webpack loader

simonihmig · Sep 24, 2024 · d068941 · d068941
1 parent 2c5ed95
commit d068941
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 21 deletions.
diff --git a/packages/build-utils/src/resize.ts b/packages/build-utils/src/resize.ts
@@ -1,6 +1,6 @@
 import type { ImageType } from '@responsive-image/core';
 import type { ImageConfig } from 'imagetools-core';
-import { readFile, writeFile } from 'node:fs/promises';
+import { mkdir, readFile, writeFile } from 'node:fs/promises';
 import type { Metadata } from 'sharp';
 import type {
   ImageLoaderChainedResult,
@@ -33,12 +33,11 @@ export async function generateResizedImage(
     let cacheFile: string | undefined = undefined;
 
     if (options.cache && input.hash) {
-      cacheFile = getCacheFilename(
-        input,
-        config,
-        format,
-        options.cacheDir ?? './node_modules/.cache',
-      );
+      const cacheDir = options.cacheDir ?? './node_modules/.cache';
+
+      cacheFile = getCacheFilename(input, config, format, cacheDir);
+
+      await mkdir(cacheDir, { recursive: true });
 
       try {
         const buffer = await readFile(cacheFile);

diff --git a/packages/vite-plugin/src/resize.ts b/packages/vite-plugin/src/resize.ts
@@ -4,7 +4,6 @@ import {
   generateResizedImage,
   getImagetoolsConfigs,
 } from '@responsive-image/build-utils';
-import { mkdir } from 'node:fs/promises';
 import { join } from 'node:path';
 import type { Plugin } from 'vite';
 import type { Options } from './types';
@@ -24,14 +23,6 @@ export default function resizePlugin(
       cacheDir = join(config.cacheDir, '.responsive-image');
     },
 
-    async buildStart() {
-      if (!cacheDir) {
-        throw new Error('Expected cacheDir to exist.');
-      }
-
-      await mkdir(cacheDir, { recursive: true });
-    },
-
     async transform(code, id) {
       const input = getInput(this, id);
 

diff --git a/packages/webpack/src/loader.ts b/packages/webpack/src/loader.ts
@@ -2,11 +2,16 @@ import {
   type ImageLoaderChainedResult,
   normalizeInput,
 } from '@responsive-image/build-utils';
+import { getWebpackOptions } from './utils';
+import { LoaderContext } from 'webpack';
+import { Options } from './types';
 
 export default function loader(
+  this: LoaderContext<Partial<Options>>,
   input: Buffer | ImageLoaderChainedResult,
 ): ImageLoaderChainedResult {
-  const data = normalizeInput(input);
+  const options = getWebpackOptions(this);
+  const data = normalizeInput(input, { generateHash: options.cache });
 
   return data;
 }

diff --git a/packages/webpack/src/resize.ts b/packages/webpack/src/resize.ts
@@ -45,7 +45,7 @@ async function process(
     );
 
     const images = await Promise.all(
-      configs.map((config) => generateResizedImage(sharp, config)),
+      configs.map((config) => generateResizedImage(data, config, options)),
     );
 
     return {

diff --git a/packages/webpack/src/types.ts b/packages/webpack/src/types.ts
@@ -5,6 +5,7 @@ export interface WebpackLoaderOptions {
   webPath?: string;
   outputPath: string;
   lqip?: LqipOptions;
+  cache: boolean;
 }
 
 export type Options = WebpackLoaderOptions & ImageOptions;
diff --git a/packages/webpack/src/utils.ts b/packages/webpack/src/utils.ts
@@ -8,6 +8,7 @@ import {
 export const defaultWebpackOptions = {
   name: '[name]-[width]w-[hash].[ext]',
   outputPath: 'images',
+  cache: true,
 };
 
 export const webpackOptionKeys = [

diff --git a/packages/webpack/tests/index.test.ts b/packages/webpack/tests/index.test.ts
@@ -83,7 +83,7 @@ test('custom loader options are supported', async () => {
   const output = stats.modules?.[0]?.modules?.[0]?.source;
   expect(sanitizeOutput(output)).toMatchSnapshot();
 
-  const imageAssets = stats.modules![0]!.assets!;
+  const imageAssets = stats.modules![0]!.assets!.toSorted();
   expect(imageAssets).toEqual(['images/test-100.png', 'images/test-200.png']);
 
   for (const image of imageAssets) {
@@ -106,7 +106,7 @@ test('custom query params are supported', async () => {
   const output = stats.modules?.[0]?.modules?.[0]?.source;
   expect(sanitizeOutput(output)).toMatchSnapshot();
 
-  const imageAssets = stats.modules![0]!.assets!;
+  const imageAssets = stats.modules![0]!.assets!.toSorted();
   expect(imageAssets).toEqual([
     'images/image-100w.png',
     'images/image-200w.png',
@@ -131,7 +131,7 @@ test('imagetools params are supported', async () => {
   const output = stats.modules?.[0]?.modules?.[0]?.source;
   expect(sanitizeOutput(output)).toMatchSnapshot();
 
-  const imageAssets = stats.modules![0]!.assets!;
+  const imageAssets = stats.modules![0]!.assets!.toSorted();
   expect(imageAssets).toEqual([
     'images/image-100w.png',
     'images/image-200w.png',