feat: a ton of caching

src/v1/card.tsx

@@ -68,24 +68,29 @@ export function card(app: App) {
                   }),
                 ),
                 assets
-                  .load(
+                  .hook(
                     avatar.SideIconName.replace(
                       "AvatarIcon_Side",
                       "Gacha_AvatarImg",
                     ),
+                    (buf) => featherImage(buf, [0, 0.3, 0, 0]),
                   )
-                  .then(async (buf) => ({
+                  .then(async (data) => ({
                     src: "/avatar",
-                    data: await featherImage(buf, [0, 0.3, 0, 0]),
+                    data,
+                  })),
+                assets
+                  .fnCache("bg", () =>
+                    generateBackground({
+                      element: avatar.Element,
+                      width: 1218,
+                      height: 508,
+                    }).then((r) => r.canvas.toBuffer("image/webp")),
+                  )
+                  .then((data) => ({
+                    src: "/bg",
+                    data,
                   })),
-                generateBackground({
-                  element: avatar.Element,
-                  width: 1218,
-                  height: 508,
-                }).then((r) => ({
-                  src: "/bg",
-                  data: r.canvas.toBuffer("image/webp"),
-                })),
               ]);
               console.log(
                 `${Date.now() - start}ms - Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`,