mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-18 17:47:30 +01:00
VIbe-code some optimizations
This commit is contained in:
Thomas Camlong
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"$schema": "https://biomejs.dev/schemas/2.2.4/schema.json",
|
||||
"$schema": "https://biomejs.dev/schemas/2.3.5/schema.json",
|
||||
"vcs": {
|
||||
"enabled": true,
|
||||
"clientKind": "git",
|
||||
|
||||
@@ -13,7 +13,8 @@
|
||||
"ci": "biome check --write",
|
||||
"backend:start": "cd backend && ./pocketbase serve",
|
||||
"backend:download": "cd backend && curl -L -o pocketbase.zip https://github.com/pocketbase/pocketbase/releases/download/v0.30.0/pocketbase_0.30.0_darwin_arm64.zip && unzip pocketbase.zip && rm pocketbase.zip && rm CHANGELOG.md && rm LICENSE.md",
|
||||
"seed": "bun run seed-db.ts"
|
||||
"seed": "bun run seed-db.ts",
|
||||
"benchmark:og": "bun run scripts/benchmark-og-images.tsx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.2.1",
|
||||
|
||||
419
web/scripts/benchmark-og-images.tsx
Normal file
419
web/scripts/benchmark-og-images.tsx
Normal file
@@ -0,0 +1,419 @@
|
||||
import { readFile } from "node:fs/promises";
|
||||
import { join } from "node:path";
|
||||
import { ImageResponse } from "next/og";
|
||||
import React from "react";
|
||||
import { METADATA_URL } from "../src/constants";
|
||||
import type { IconFile } from "../src/types/icons";
|
||||
|
||||
// Standalone cached functions for benchmarking (no Next.js dependencies)
|
||||
let iconsDataCache: IconFile | null = null;
|
||||
const iconFileCache = new Map<string, Buffer | null>();
|
||||
let preloadDone = false;
|
||||
|
||||
async function getAllIconsStandalone(): Promise<IconFile> {
|
||||
if (iconsDataCache) {
|
||||
return iconsDataCache;
|
||||
}
|
||||
const response = await fetch(METADATA_URL);
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch icons: ${response.statusText}`);
|
||||
}
|
||||
iconsDataCache = (await response.json()) as IconFile;
|
||||
return iconsDataCache;
|
||||
}
|
||||
|
||||
async function preloadAllIconsStandalone(): Promise<void> {
|
||||
if (preloadDone) {
|
||||
return;
|
||||
}
|
||||
const startTime = Date.now();
|
||||
const iconsData = await getAllIconsStandalone();
|
||||
const iconNames = Object.keys(iconsData);
|
||||
const pngDir = join(process.cwd(), `../png`);
|
||||
|
||||
console.log(`[Preload] Loading ${iconNames.length} icons into memory...`);
|
||||
|
||||
const loadPromises = iconNames.map(async (iconName) => {
|
||||
if (iconFileCache.has(iconName)) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const iconPath = join(pngDir, `${iconName}.png`);
|
||||
const buffer = await readFile(iconPath);
|
||||
iconFileCache.set(iconName, buffer);
|
||||
} catch (_error) {
|
||||
iconFileCache.set(iconName, null);
|
||||
}
|
||||
});
|
||||
|
||||
await Promise.all(loadPromises);
|
||||
const duration = Date.now() - startTime;
|
||||
const loadedCount = Array.from(iconFileCache.values()).filter(
|
||||
(v) => v !== null,
|
||||
).length;
|
||||
console.log(
|
||||
`[Preload] Loaded ${loadedCount}/${iconNames.length} icons in ${duration}ms (${(loadedCount / duration).toFixed(2)} icons/ms)\n`,
|
||||
);
|
||||
preloadDone = true;
|
||||
}
|
||||
|
||||
async function readIconFileStandalone(
|
||||
iconName: string,
|
||||
): Promise<Buffer | null> {
|
||||
if (iconFileCache.has(iconName)) {
|
||||
return iconFileCache.get(iconName)!;
|
||||
}
|
||||
try {
|
||||
const iconPath = join(process.cwd(), `../png/${iconName}.png`);
|
||||
const buffer = await readFile(iconPath);
|
||||
iconFileCache.set(iconName, buffer);
|
||||
return buffer;
|
||||
} catch (_error) {
|
||||
iconFileCache.set(iconName, null);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
const size = {
|
||||
width: 1200,
|
||||
height: 630,
|
||||
};
|
||||
|
||||
async function generateOGImage(
|
||||
icon: string,
|
||||
iconsData: Record<string, unknown>,
|
||||
totalIcons: number,
|
||||
index: number,
|
||||
profileTimings: Map<string, number[]>,
|
||||
) {
|
||||
const stepTimings: Record<string, number> = {};
|
||||
let stepStart: number;
|
||||
|
||||
stepStart = Date.now();
|
||||
const formattedIconName = icon
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ");
|
||||
stepTimings.formatName = Date.now() - stepStart;
|
||||
|
||||
stepStart = Date.now();
|
||||
const iconData = await readIconFileStandalone(icon);
|
||||
stepTimings.readFile = Date.now() - stepStart;
|
||||
|
||||
stepStart = Date.now();
|
||||
const iconUrl = iconData
|
||||
? `data:image/png;base64,${iconData.toString("base64")}`
|
||||
: null;
|
||||
stepTimings.base64 = Date.now() - stepStart;
|
||||
|
||||
stepStart = Date.now();
|
||||
const imageResponse = await new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
fontFamily: "Inter, system-ui, sans-serif",
|
||||
overflow: "hidden",
|
||||
backgroundColor: "white",
|
||||
backgroundImage:
|
||||
"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
|
||||
backgroundSize: "100px 100px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -100,
|
||||
left: -100,
|
||||
width: 400,
|
||||
height: 400,
|
||||
borderRadius: "50%",
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
||||
filter: "blur(80px)",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -150,
|
||||
right: -150,
|
||||
width: 500,
|
||||
height: 500,
|
||||
borderRadius: "50%",
|
||||
background:
|
||||
"linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
||||
filter: "blur(100px)",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: "60px",
|
||||
gap: "70px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 320,
|
||||
height: 320,
|
||||
borderRadius: 32,
|
||||
background: "white",
|
||||
boxShadow:
|
||||
"0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
||||
padding: 30,
|
||||
flexShrink: 0,
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
{iconUrl ? (
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 260,
|
||||
height: 260,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
color: "#94a3b8",
|
||||
textAlign: "center",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{formattedIconName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
gap: 28,
|
||||
maxWidth: 650,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 64,
|
||||
fontWeight: 800,
|
||||
color: "#0f172a",
|
||||
lineHeight: 1.1,
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
Download {formattedIconName} icon for free
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 32,
|
||||
fontWeight: 500,
|
||||
color: "#64748b",
|
||||
lineHeight: 1.4,
|
||||
position: "relative",
|
||||
paddingLeft: 16,
|
||||
borderLeft: "4px solid #94a3b8",
|
||||
}}
|
||||
>
|
||||
Amongst {totalIcons} other high-quality dashboard icons
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
{["SVG", "PNG", "WEBP"].map((format) => (
|
||||
<div
|
||||
key={format}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#f1f5f9",
|
||||
color: "#475569",
|
||||
border: "2px solid #e2e8f0",
|
||||
borderRadius: 12,
|
||||
padding: "8px 16px",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
|
||||
}}
|
||||
>
|
||||
{format}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 80,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "#ffffff",
|
||||
borderTop: "2px solid rgba(0, 0, 0, 0.05)",
|
||||
zIndex: 20,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 24,
|
||||
fontWeight: 600,
|
||||
color: "#334155",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#3b82f6",
|
||||
marginRight: 4,
|
||||
}}
|
||||
/>
|
||||
dashboardicons.com
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
...size,
|
||||
},
|
||||
);
|
||||
stepTimings.imageResponse = Date.now() - stepStart;
|
||||
|
||||
for (const [step, timing] of Object.entries(stepTimings)) {
|
||||
if (!profileTimings.has(step)) {
|
||||
profileTimings.set(step, []);
|
||||
}
|
||||
profileTimings.get(step)!.push(timing);
|
||||
}
|
||||
|
||||
return imageResponse;
|
||||
}
|
||||
|
||||
async function benchmark() {
|
||||
console.log("Starting OG image generation benchmark...\n");
|
||||
|
||||
const startTime = Date.now();
|
||||
|
||||
console.log("Fetching icons data...");
|
||||
const iconsData = await getAllIconsStandalone();
|
||||
const iconNames = Object.keys(iconsData);
|
||||
const totalIcons = iconNames.length;
|
||||
const testIcons = iconNames.slice(0, 100);
|
||||
|
||||
await preloadAllIconsStandalone();
|
||||
|
||||
console.log(`Testing with ${testIcons.length} icons\n`);
|
||||
|
||||
const times: number[] = [];
|
||||
const profileTimings = new Map<string, number[]>();
|
||||
|
||||
for (let i = 0; i < testIcons.length; i++) {
|
||||
const icon = testIcons[i];
|
||||
const iconStartTime = Date.now();
|
||||
|
||||
try {
|
||||
await generateOGImage(icon, iconsData, totalIcons, i, profileTimings);
|
||||
const iconEndTime = Date.now();
|
||||
const duration = iconEndTime - iconStartTime;
|
||||
times.push(duration);
|
||||
|
||||
if ((i + 1) % 10 === 0) {
|
||||
const avgTime = times.slice(-10).reduce((a, b) => a + b, 0) / 10;
|
||||
console.log(
|
||||
`Generated ${i + 1}/${testIcons.length} images (avg: ${avgTime.toFixed(2)}ms per image)`,
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Failed to generate image for ${icon}:`, error);
|
||||
}
|
||||
}
|
||||
|
||||
const endTime = Date.now();
|
||||
const totalDuration = endTime - startTime;
|
||||
const avgTime = times.reduce((a, b) => a + b, 0) / times.length;
|
||||
const minTime = Math.min(...times);
|
||||
const maxTime = Math.max(...times);
|
||||
|
||||
console.log("\n" + "=".repeat(50));
|
||||
console.log("Benchmark Results");
|
||||
console.log("=".repeat(50));
|
||||
console.log(`Total images generated: ${testIcons.length}`);
|
||||
console.log(`Total time: ${(totalDuration / 1000).toFixed(2)}s`);
|
||||
console.log(`Average time per image: ${avgTime.toFixed(2)}ms`);
|
||||
console.log(`Min time: ${minTime.toFixed(2)}ms`);
|
||||
console.log(`Max time: ${maxTime.toFixed(2)}ms`);
|
||||
console.log(
|
||||
`Images per second: ${((testIcons.length / totalDuration) * 1000).toFixed(2)}`,
|
||||
);
|
||||
console.log("\n" + "-".repeat(50));
|
||||
console.log("Performance Breakdown (per image):");
|
||||
console.log("-".repeat(50));
|
||||
for (const [step, timings] of profileTimings.entries()) {
|
||||
const avg = timings.reduce((a, b) => a + b, 0) / timings.length;
|
||||
const min = Math.min(...timings);
|
||||
const max = Math.max(...timings);
|
||||
const total = timings.reduce((a, b) => a + b, 0);
|
||||
const percentage = (
|
||||
(total / times.reduce((a, b) => a + b, 0)) *
|
||||
100
|
||||
).toFixed(1);
|
||||
console.log(
|
||||
` ${step.padEnd(15)}: avg ${avg.toFixed(2)}ms | min ${min.toFixed(2)}ms | max ${max.toFixed(2)}ms | ${percentage}%`,
|
||||
);
|
||||
}
|
||||
console.log("=".repeat(50));
|
||||
}
|
||||
|
||||
benchmark().catch(console.error);
|
||||
@@ -135,9 +135,7 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
||||
}
|
||||
}
|
||||
|
||||
const iconUrl = iconDataBuffer
|
||||
? `data:image/png;base64,${iconDataBuffer.toString("base64")}`
|
||||
: `https://placehold.co/600x400?text=${formattedIconName}`
|
||||
const iconUrl = iconDataBuffer ? `data:image/png;base64,${iconDataBuffer.toString("base64")}` : null
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
@@ -242,18 +240,39 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
{iconUrl ? (
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 260,
|
||||
height: 260,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
color: "#94a3b8",
|
||||
textAlign: "center",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{formattedIconName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
||||
@@ -1,14 +1,12 @@
|
||||
import { readFile } from "node:fs/promises"
|
||||
import { join } from "node:path"
|
||||
import { ImageResponse } from "next/og"
|
||||
import { getAllIcons } from "@/lib/api"
|
||||
import { preloadAllIcons, readIconFile } from "@/lib/icon-cache"
|
||||
|
||||
export const revalidate = false
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const iconsData = await getAllIcons()
|
||||
if (process.env.CI_MODE === "false") {
|
||||
// This is meant to speed up the build process in local development
|
||||
return Object.keys(iconsData)
|
||||
.slice(0, 5)
|
||||
.map((icon) => ({
|
||||
@@ -49,27 +47,18 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
||||
)
|
||||
}
|
||||
|
||||
await preloadAllIcons()
|
||||
|
||||
const iconsData = await getAllIcons()
|
||||
const totalIcons = Object.keys(iconsData).length
|
||||
const index = Object.keys(iconsData).indexOf(icon)
|
||||
|
||||
// Format the icon name for display
|
||||
const formattedIconName = icon
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")
|
||||
|
||||
// Read the icon file from local filesystem
|
||||
let iconData: Buffer | null = null
|
||||
try {
|
||||
const iconPath = join(process.cwd(), `../png/${icon}.png`)
|
||||
console.log(`Generating opengraph image for ${icon} (${index + 1} / ${totalIcons}) from path ${iconPath}`)
|
||||
iconData = await readFile(iconPath)
|
||||
} catch (_error) {
|
||||
console.error(`Icon ${icon} was not found locally`)
|
||||
}
|
||||
|
||||
// Convert the image data to a data URL or use placeholder
|
||||
const iconData = await readIconFile(icon)
|
||||
const iconUrl = iconData ? `data:image/png;base64,${iconData.toString("base64")}` : null
|
||||
|
||||
return new ImageResponse(
|
||||
@@ -154,18 +143,39 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={iconUrl || `https://placehold.co/600x400?text=${formattedIconName}`}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
{iconUrl ? (
|
||||
<img
|
||||
src={iconUrl}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 260,
|
||||
height: 260,
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
fontSize: 48,
|
||||
fontWeight: 700,
|
||||
color: "#94a3b8",
|
||||
textAlign: "center",
|
||||
wordBreak: "break-word",
|
||||
}}
|
||||
>
|
||||
{formattedIconName}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Text content */}
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import { unstable_cache } from "next/cache"
|
||||
import { cache } from "react"
|
||||
import { METADATA_URL } from "@/constants"
|
||||
import { ApiError } from "@/lib/errors"
|
||||
import type { AuthorData, IconFile, IconWithName } from "@/types/icons"
|
||||
|
||||
/**
|
||||
* Fetches all icon data from the metadata.json file
|
||||
* Uses fetch with revalidate for caching
|
||||
* Raw fetch function for icon data (without caching)
|
||||
*/
|
||||
export async function getAllIcons(): Promise<IconFile> {
|
||||
async function fetchAllIconsRaw(): Promise<IconFile> {
|
||||
try {
|
||||
const response = await fetch(METADATA_URL)
|
||||
const response = await fetch(METADATA_URL, {
|
||||
next: { revalidate: 3600 },
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new ApiError(`Failed to fetch icons: ${response.statusText}`, response.status)
|
||||
@@ -25,6 +27,24 @@ export async function getAllIcons(): Promise<IconFile> {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Cached version using unstable_cache for build-time caching
|
||||
* Revalidates every hour (3600 seconds)
|
||||
*/
|
||||
const getAllIconsCached = unstable_cache(async () => fetchAllIconsRaw(), ["all-icons"], {
|
||||
revalidate: 3600,
|
||||
tags: ["icons"],
|
||||
})
|
||||
|
||||
/**
|
||||
* Fetches all icon data from the metadata.json file
|
||||
* Uses React cache() for request-level memoization and unstable_cache for build-level caching
|
||||
* This prevents duplicate fetches within the same request and across builds
|
||||
*/
|
||||
export const getAllIcons = cache(async (): Promise<IconFile> => {
|
||||
return getAllIconsCached()
|
||||
})
|
||||
|
||||
/**
|
||||
* Gets a list of all icon names.
|
||||
*/
|
||||
@@ -122,7 +142,7 @@ async function fetchAuthorData(authorId: number) {
|
||||
}
|
||||
}
|
||||
|
||||
const authorDataCache: Record<number, AuthorData> = {};
|
||||
const authorDataCache: Record<number, AuthorData> = {}
|
||||
|
||||
/**
|
||||
* Cached version of fetchAuthorData
|
||||
@@ -135,12 +155,12 @@ const authorDataCache: Record<number, AuthorData> = {};
|
||||
*/
|
||||
export async function getAuthorData(authorId: number): Promise<AuthorData> {
|
||||
if (authorDataCache[authorId]) {
|
||||
return authorDataCache[authorId];
|
||||
return authorDataCache[authorId]
|
||||
}
|
||||
|
||||
const data = await fetchAuthorData(authorId);
|
||||
authorDataCache[authorId] = data;
|
||||
return data;
|
||||
const data = await fetchAuthorData(authorId)
|
||||
authorDataCache[authorId] = data
|
||||
return data
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -10,6 +10,3 @@ export class ApiError extends Error {
|
||||
this.status = status
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
76
web/src/lib/icon-cache.ts
Normal file
76
web/src/lib/icon-cache.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
import { readFile } from "node:fs/promises"
|
||||
import { join } from "node:path"
|
||||
import { cache } from "react"
|
||||
import { getAllIcons } from "./api"
|
||||
|
||||
/**
|
||||
* In-memory cache for icon files during build/request
|
||||
* This persists across multiple calls within the same build process
|
||||
*/
|
||||
const iconFileCache = new Map<string, Buffer | null>()
|
||||
let preloadPromise: Promise<void> | null = null
|
||||
let isPreloaded = false
|
||||
|
||||
/**
|
||||
* Preloads all icon files into memory
|
||||
* This should be called once at the start of the build process
|
||||
*/
|
||||
export async function preloadAllIcons(): Promise<void> {
|
||||
if (isPreloaded || preloadPromise) {
|
||||
return preloadPromise || Promise.resolve()
|
||||
}
|
||||
|
||||
preloadPromise = (async () => {
|
||||
const startTime = Date.now()
|
||||
const iconsData = await getAllIcons()
|
||||
const iconNames = Object.keys(iconsData)
|
||||
const pngDir = join(process.cwd(), `../png`)
|
||||
|
||||
console.log(`[Icon Cache] Preloading ${iconNames.length} icons into memory...`)
|
||||
|
||||
const loadPromises = iconNames.map(async (iconName) => {
|
||||
if (iconFileCache.has(iconName)) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
const iconPath = join(pngDir, `${iconName}.png`)
|
||||
const buffer = await readFile(iconPath)
|
||||
iconFileCache.set(iconName, buffer)
|
||||
} catch (_error) {
|
||||
iconFileCache.set(iconName, null)
|
||||
}
|
||||
})
|
||||
|
||||
await Promise.all(loadPromises)
|
||||
const duration = Date.now() - startTime
|
||||
const loadedCount = Array.from(iconFileCache.values()).filter((v) => v !== null).length
|
||||
console.log(
|
||||
`[Icon Cache] Preloaded ${loadedCount}/${iconNames.length} icons in ${duration}ms (${(loadedCount / duration).toFixed(2)} icons/ms)`,
|
||||
)
|
||||
isPreloaded = true
|
||||
})()
|
||||
|
||||
return preloadPromise
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads an icon PNG file from the filesystem
|
||||
* Uses React cache() for request-level memoization
|
||||
* Uses in-memory Map for build-level caching
|
||||
* If preloaded, returns immediately from cache
|
||||
*/
|
||||
export const readIconFile = cache(async (iconName: string): Promise<Buffer | null> => {
|
||||
if (iconFileCache.has(iconName)) {
|
||||
return iconFileCache.get(iconName)!
|
||||
}
|
||||
|
||||
try {
|
||||
const iconPath = join(process.cwd(), `../png/${iconName}.png`)
|
||||
const buffer = await readFile(iconPath)
|
||||
iconFileCache.set(iconName, buffer)
|
||||
return buffer
|
||||
} catch (_error) {
|
||||
iconFileCache.set(iconName, null)
|
||||
return null
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user