refactor: LRU cache images

packages/graphics/package.json

@@ -37,7 +37,8 @@
     "@pixi/text": "^5.3.6",
     "autoprefixer": "^9.8.6",
     "debug": "4.3.1",
-    "image-size": "^0.9.3"
+    "image-size": "^0.9.3",
+    "lru-cache": "^6.0.0"
   },
   "devDependencies": {
     "@neutrinojs/airbnb": "^9.4.0",

packages/graphics/src/resources/image.js

@@ -1,8 +1,17 @@
 import {Resource} from '@avocado/resource';
 import {imageSize} from 'image-size';
+import LRU from 'lru-cache';
+
+const cache = new LRU({
+  dispose: (url) => URL.revokeObjectURL(url),
+  max: 128,
+  maxAge: Infinity,
+});
 
 export class Image extends Resource {
 
+  #objectUrl;
+
   constructor() {
     super();
     this.texture = {
@@ -14,9 +23,6 @@ export class Image extends Resource {
 
   destroy() {
     if (!this.texture.isFake) {
-      if (this.objectUrl) {
-        URL.revokeObjectURL(this.objectUrl);
-      }
       this.texture.destroy();
     }
   }
@@ -25,14 +31,22 @@ export class Image extends Resource {
     return this.texture.height;
   }
 
-  async load(buffer) {
+  async load(buffer, uri) {
     if (buffer) {
       if ('client' === process.env.SIDE) {
         // eslint-disable-next-line global-require
         const {Texture} = require('@pixi/core');
-        this.objectUrl = URL.createObjectURL(new Blob([buffer]));
+        let url;
+        if (cache.has(uri)) {
+          url = cache.get(uri);
+        }
+        else {
+          url = URL.createObjectURL(new Blob([buffer]));
+          cache.set(uri, url);
+        }
+        this.#objectUrl = url;
         const native = window.document.createElement('img');
-        native.src = this.objectUrl;
+        native.src = this.#objectUrl;
         await new Promise((resolve, reject) => {
           native.addEventListener('error', reject);
           native.addEventListener('load', () => {

packages/resource/src/resource.js

@@ -32,7 +32,7 @@ export default class Resource extends decorate(Class) {
     const buffer = await this.read(uri);
     const resource = new this();
     resource.uri = uri;
-    await resource.load(buffer);
+    await resource.load(buffer, uri);
     return resource;
   }