Add encoding/decoding times to console

This intentionally excludes time of loading corresponding modules, and only measures actual processing.

While this is not perfect as it's not integrated in the UI (cc @jakearchibald), it gives at least some way to measure performance of different codecs and their integrations on particular files.

src/codecs/processor-worker/index.ts

@@ -2,13 +2,18 @@ import { expose } from 'comlink';
 import { isHqx } from '../resize/processor-meta';
 import { clamp } from '../util';
 
+function timed<T>(name: string, func: () => Promise<T>) {
+  console.time(name);
+  return func().finally(() => console.timeEnd(name));
+}
+
 async function mozjpegEncode(
   data: ImageData, options: import('../mozjpeg/encoder-meta').EncodeOptions,
 ): Promise<ArrayBuffer> {
   const { encode } = await import(
     /* webpackChunkName: "process-mozjpeg-enc" */
     '../mozjpeg/encoder');
-  return encode(data, options);
+  return timed('mozjpegEncode', () => encode(data, options));
 }
 
 async function quantize(
@@ -17,7 +22,7 @@ async function quantize(
   const { process } = await import(
     /* webpackChunkName: "process-imagequant" */
     '../imagequant/processor');
-  return process(data, opts);
+  return timed('quantize', () => process(data, opts));
 }
 
 async function rotate(
@@ -27,7 +32,7 @@ async function rotate(
     /* webpackChunkName: "process-rotate" */
     '../rotate/processor');
 
-  return rotate(data, opts);
+  return timed('rotate', () => rotate(data, opts));
 }
 
 async function resize(
@@ -43,13 +48,13 @@ async function resize(
     const ratio = Math.max(widthRatio, heightRatio);
     if (ratio <= 1) return data;
     const factor = clamp(Math.ceil(ratio), { min: 2, max: 4 }) as 2|3|4;
-    return hqx(data, { factor });
+    return timed('hqx', () => hqx(data, { factor }));
   }
   const { resize } = await import(
     /* webpackChunkName: "process-resize" */
     '../resize/processor');
 
-  return resize(data, opts);
+  return timed('resize', () => resize(data, opts));
 }
 
 async function optiPngEncode(
@@ -58,7 +63,7 @@ async function optiPngEncode(
   const { compress } = await import(
     /* webpackChunkName: "process-optipng" */
     '../optipng/encoder');
-  return compress(data, options);
+  return timed('optiPngEncode', () => compress(data, options));
 }
 
 async function webpEncode(
@@ -67,14 +72,14 @@ async function webpEncode(
   const { encode } = await import(
     /* webpackChunkName: "process-webp-enc" */
     '../webp/encoder');
-  return encode(data, options);
+  return timed('webpEncode', () => encode(data, options));
 }
 
 async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
   const { decode } = await import(
     /* webpackChunkName: "process-webp-dec" */
     '../webp/decoder');
-  return decode(data);
+  return timed('webpDecode', () => decode(data));
 }
 
 const exports = {