perf: review-fixes (N+1, waterfalls, sanitize-cache, lazy strommix)
- blog-utils.resolvePostOverviewBlocks: parallel getPostBySlug via Promise.all + .catch(null) instead of sequential await loop. - blog-utils.resolveCalendarBlocks: same fix for calendar items. - [...slug] page load: SearchableText/Calendar/DeadlineBanner now run parallel after tagsMap (was strict waterfall). - sanitize-blocks: LRU cache keyed on raw html input — sanitize-html is ~ms/KB, the same content repeats across pages and cache hits. - cms.getNormalizedTranslations: WeakMap-memoised the per-request Object.entries normalize loop on top of the existing 5-min bundle TTL. - cms.cached: opt-in dev cache via DEV_CACHE_CMS=1 (default still off). - rusty-image.ensureTransformedImage: was async-wrapping a sync URL builder; made sync, removed awaits at call sites — saves microtasks. - BlockRenderer: lazy-load StrommixBlock (~220 KB) via dynamic import in the template — pages without the live-strommix widget no longer ship its bundle. Also: enabled Caddy zstd+gzip on windwiderstand.de vhost (server-side edit; verified `content-encoding: zstd` on response). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+61
-61
@@ -326,26 +326,22 @@ export async function loadPostsList(opts: {
|
||||
for (const post of posts) {
|
||||
const field = getPostImageField(post.postImage);
|
||||
if (field) {
|
||||
try {
|
||||
const url = await ensureTransformedImage(field.url, {
|
||||
width: 400,
|
||||
height: 267,
|
||||
fit: "cover",
|
||||
format: "webp",
|
||||
focalX: field.focal?.x,
|
||||
focalY: field.focal?.y,
|
||||
});
|
||||
const p = post as PostEntry & {
|
||||
_resolvedImageUrl?: string;
|
||||
_rawImageUrl?: string;
|
||||
_imageFocal?: { x: number; y: number } | null;
|
||||
};
|
||||
p._resolvedImageUrl = url;
|
||||
p._rawImageUrl = field.url;
|
||||
p._imageFocal = field.focal ?? null;
|
||||
} catch {
|
||||
/* image optional */
|
||||
}
|
||||
const url = ensureTransformedImage(field.url, {
|
||||
width: 400,
|
||||
height: 267,
|
||||
fit: "cover",
|
||||
format: "webp",
|
||||
focalX: field.focal?.x,
|
||||
focalY: field.focal?.y,
|
||||
});
|
||||
const p = post as PostEntry & {
|
||||
_resolvedImageUrl?: string;
|
||||
_rawImageUrl?: string;
|
||||
_imageFocal?: { x: number; y: number } | null;
|
||||
};
|
||||
p._resolvedImageUrl = url;
|
||||
p._rawImageUrl = field.url;
|
||||
p._imageFocal = field.focal ?? null;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
@@ -512,15 +508,14 @@ export async function resolvePostOverviewBlocks(
|
||||
.filter(Boolean);
|
||||
const limit =
|
||||
typeof item.numberItems === "number" ? item.numberItems : 9999;
|
||||
const resolved: PostEntry[] = [];
|
||||
for (const slug of slugs.slice(0, limit)) {
|
||||
const post = await getPostBySlug(slug, {
|
||||
locale: "de",
|
||||
resolve: ["all"],
|
||||
});
|
||||
if (post) resolved.push(post);
|
||||
}
|
||||
item.postsResolved = resolved;
|
||||
const settled = await Promise.all(
|
||||
slugs.slice(0, limit).map((slug) =>
|
||||
getPostBySlug(slug, { locale: "de", resolve: ["all"] }).catch(
|
||||
() => null,
|
||||
),
|
||||
),
|
||||
);
|
||||
item.postsResolved = settled.filter((p): p is PostEntry => !!p);
|
||||
}
|
||||
}
|
||||
if (Array.isArray(item.postsResolved)) {
|
||||
@@ -531,26 +526,22 @@ export async function resolvePostOverviewBlocks(
|
||||
for (const post of item.postsResolved as PostEntry[]) {
|
||||
const field = getPostImageField(post.postImage);
|
||||
if (field) {
|
||||
try {
|
||||
const url = await ensureTransformedImage(field.url, {
|
||||
width: 400,
|
||||
height: 267,
|
||||
fit: "cover",
|
||||
format: "webp",
|
||||
focalX: field.focal?.x,
|
||||
focalY: field.focal?.y,
|
||||
});
|
||||
const p = post as PostEntry & {
|
||||
_resolvedImageUrl?: string;
|
||||
_rawImageUrl?: string;
|
||||
_imageFocal?: { x: number; y: number } | null;
|
||||
};
|
||||
p._resolvedImageUrl = url;
|
||||
p._rawImageUrl = field.url;
|
||||
p._imageFocal = field.focal ?? null;
|
||||
} catch {
|
||||
// Bild optional
|
||||
}
|
||||
const url = ensureTransformedImage(field.url, {
|
||||
width: 400,
|
||||
height: 267,
|
||||
fit: "cover",
|
||||
format: "webp",
|
||||
focalX: field.focal?.x,
|
||||
focalY: field.focal?.y,
|
||||
});
|
||||
const p = post as PostEntry & {
|
||||
_resolvedImageUrl?: string;
|
||||
_rawImageUrl?: string;
|
||||
_imageFocal?: { x: number; y: number } | null;
|
||||
};
|
||||
p._resolvedImageUrl = url;
|
||||
p._rawImageUrl = field.url;
|
||||
p._imageFocal = field.focal ?? null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -602,19 +593,28 @@ export async function resolveCalendarBlocks(
|
||||
resolve: "items",
|
||||
});
|
||||
const raw = calendar?.items ?? rawItems;
|
||||
const resolved: CalendarItemData[] = [];
|
||||
for (const x of raw) {
|
||||
if (typeof x === "object" && x !== null && "terminZeit" in x && "title" in x) {
|
||||
resolved.push(x as CalendarItemData);
|
||||
} else {
|
||||
const islug = typeof x === "string" ? x : (x as { _slug?: string })?._slug;
|
||||
if (islug) {
|
||||
const entry = await getCalendarItemBySlug(islug, { locale: "de" });
|
||||
if (entry) resolved.push(entry);
|
||||
const settled = await Promise.all(
|
||||
raw.map(async (x): Promise<CalendarItemData | null> => {
|
||||
if (
|
||||
typeof x === "object" &&
|
||||
x !== null &&
|
||||
"terminZeit" in x &&
|
||||
"title" in x
|
||||
) {
|
||||
return x as CalendarItemData;
|
||||
}
|
||||
}
|
||||
}
|
||||
(item as { items?: CalendarItemData[] }).items = resolved;
|
||||
const islug =
|
||||
typeof x === "string" ? x : (x as { _slug?: string })?._slug;
|
||||
if (!islug) return null;
|
||||
const entry = await getCalendarItemBySlug(islug, { locale: "de" }).catch(
|
||||
() => null,
|
||||
);
|
||||
return entry ?? null;
|
||||
}),
|
||||
);
|
||||
(item as { items?: CalendarItemData[] }).items = settled.filter(
|
||||
(e): e is CalendarItemData => !!e,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+35
-1
@@ -95,7 +95,10 @@ async function cached<T>(
|
||||
key: string,
|
||||
fn: () => Promise<T>,
|
||||
): Promise<T> {
|
||||
if (import.meta.env.DEV) return fn();
|
||||
// Dev: Cache aus by default (sofortige Reflektion neuer CMS-Daten).
|
||||
// Mit DEV_CACHE_CMS=1 anschalten — sinnvoll wenn lokal gegen Prod-CMS
|
||||
// entwickelt wird, sonst werden Netzwerk-Roundtrips bei jedem Request fällig.
|
||||
if (import.meta.env.DEV && process.env.DEV_CACHE_CMS !== "1") return fn();
|
||||
const hit = cache.get(key);
|
||||
if (hit && hit.expires > Date.now()) return hit.value as T;
|
||||
const pending = inflight.get(key) as Promise<T> | undefined;
|
||||
@@ -847,6 +850,37 @@ export async function getTranslationBundleBySlug(
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Normalised key→string map for `event.locals.translations`. Cached on the
|
||||
* raw `strings` object identity so the per-request `Object.entries` loop runs
|
||||
* once per bundle reload (every 5 min) instead of every request.
|
||||
*/
|
||||
const normalizedTranslations = new WeakMap<object, Record<string, string>>();
|
||||
|
||||
export async function getNormalizedTranslations(
|
||||
slug: string,
|
||||
options?: { locale?: string },
|
||||
): Promise<Record<string, string>> {
|
||||
const bundle = await getTranslationBundleBySlug(slug, options);
|
||||
const strings = bundle?.strings;
|
||||
if (!strings || typeof strings !== "object") return {};
|
||||
const cached = normalizedTranslations.get(strings as object);
|
||||
if (cached) return cached;
|
||||
const out: Record<string, string> = {};
|
||||
for (const [key, val] of Object.entries(strings as Record<string, unknown>)) {
|
||||
const str =
|
||||
typeof val === "string"
|
||||
? val
|
||||
: typeof val === "object" && val !== null && "value" in val
|
||||
? (val as { value?: unknown }).value
|
||||
: (val as { text?: unknown })?.text ??
|
||||
(val as { label?: unknown })?.label;
|
||||
if (typeof str === "string") out[key] = str;
|
||||
}
|
||||
normalizedTranslations.set(strings as object, out);
|
||||
return out;
|
||||
}
|
||||
|
||||
/** Kalender-Eintrag (calendar) – aus OpenAPI-Spec. */
|
||||
export type CalendarEntry = components["schemas"]["calendar"];
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@
|
||||
import OpnFormBlock from "./blocks/OpnFormBlock.svelte";
|
||||
import InternalComponentBlock from "./blocks/InternalComponentBlock.svelte";
|
||||
import DeadlineBannerBlock from "./blocks/DeadlineBannerBlock.svelte";
|
||||
import StrommixBlock from "./blocks/StrommixBlock.svelte";
|
||||
import WindkarteBlock from "./blocks/WindkarteBlock.svelte";
|
||||
import type { Translations } from "$lib/translations";
|
||||
import type {
|
||||
@@ -93,7 +92,11 @@
|
||||
{:else if type === "deadline_banner"}
|
||||
<DeadlineBannerBlock block={block as DeadlineBannerBlockData} />
|
||||
{:else if type === "live_strommix"}
|
||||
<StrommixBlock block={block as LiveStrommixBlockData} />
|
||||
<!-- Lazy: ~220 KB Block-Bundle nur laden wenn Seite das Widget tatsächlich hat -->
|
||||
{#await import("./blocks/StrommixBlock.svelte") then m}
|
||||
{@const Comp = m.default}
|
||||
<Comp block={block as LiveStrommixBlockData} />
|
||||
{/await}
|
||||
{:else if type === "wind_map"}
|
||||
<WindkarteBlock block={block as WindMapBlockData} />
|
||||
{:else}
|
||||
|
||||
@@ -108,7 +108,7 @@ export function getTransformUrl(url: string, params: RustyImageTransformParams =
|
||||
}
|
||||
|
||||
/** Alias für Kompatibilität (z. B. rustyastro / Layout). */
|
||||
export async function ensureTransformedImage(url: string, params: RustyImageTransformParams = {}): Promise<string> {
|
||||
export function ensureTransformedImage(url: string, params: RustyImageTransformParams = {}): string {
|
||||
return getCmsImageUrl(url, params);
|
||||
}
|
||||
|
||||
|
||||
@@ -62,8 +62,30 @@ const HTML_BLOCK_OPTIONS: sanitizeHtml.IOptions = {
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Pro-Block-Hash-Cache: sanitize-html ist teuer (~ms pro KB), das CMS
|
||||
* liefert dasselbe Markup wieder und wieder. Key = raw input, Value =
|
||||
* sanitised output. Größe geclippt (LRU-ähnlich via Map-Insertion-Order).
|
||||
*/
|
||||
const SANITIZE_CACHE = new Map<string, string>();
|
||||
const SANITIZE_CACHE_MAX = 500;
|
||||
|
||||
export function sanitizeUntrustedHtml(html: string): string {
|
||||
return sanitizeHtml(html, HTML_BLOCK_OPTIONS);
|
||||
const cached = SANITIZE_CACHE.get(html);
|
||||
if (cached !== undefined) {
|
||||
// Move to end (most-recently-used).
|
||||
SANITIZE_CACHE.delete(html);
|
||||
SANITIZE_CACHE.set(html, cached);
|
||||
return cached;
|
||||
}
|
||||
const out = sanitizeHtml(html, HTML_BLOCK_OPTIONS);
|
||||
SANITIZE_CACHE.set(html, out);
|
||||
if (SANITIZE_CACHE.size > SANITIZE_CACHE_MAX) {
|
||||
// Evict oldest.
|
||||
const oldest = SANITIZE_CACHE.keys().next().value;
|
||||
if (oldest !== undefined) SANITIZE_CACHE.delete(oldest);
|
||||
}
|
||||
return out;
|
||||
}
|
||||
|
||||
type Block = { _type?: string; html?: unknown } & Record<string, unknown>;
|
||||
|
||||
Reference in New Issue
Block a user