@xingwangzhe/stalux 1.35.1 → 1.35.3

package/src/components/stalux/posts/postContent.astro

@@ -47,61 +47,61 @@ const mdSourceUrl = exportMd ? `${Astro.url.pathname.replace(/\/$/, "")}.md` : "
         </h1>
         <div class="stalux-post-metadata">
             {props.date && (
-    <time
-        class="stalux-post-meta-item"
-        datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}
-    >
-        {t("post.publishTime")}
-        {props.date}
-    </time>
-)}
+                <time
+                    class="stalux-post-meta-item"
+                    datetime={timezone ? toMachineDateTime(props.date, timezone) : props.date}
+                >
+                    {t("post.publishTime")}
+                    {props.date}
+                </time>
+            )}
 
             {props.updated && (
-    <time
-        class="stalux-post-meta-item"
-        datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}
-    >
-        {t("post.updateTime")}
-        {props.updated}
-    </time>
-)}
+                <time
+                    class="stalux-post-meta-item"
+                    datetime={timezone ? toMachineDateTime(props.updated, timezone) : props.updated}
+                >
+                    {t("post.updateTime")}
+                    {props.updated}
+                </time>
+            )}
         </div>
         {(
-    <div class="stalux-post-page-stats">
-        {(props.readingMinutes ?? 0) > 0 && (
-            <span class="stalux-post-reading-time">
-                {t("post.readingTime")}
-                {props.readingMinutes && props.readingMinutes > 0
-                    ? props.readingMinutes < 1
-                        ? t("common.lessThanOneMinute")
-                        : t("common.minute", { n: props.readingMinutes })
-                    : ""}
-            </span>
+            <div class="stalux-post-page-stats">
+                {(props.readingMinutes ?? 0) > 0 && (
+                    <span class="stalux-post-reading-time">
+                        {t("post.readingTime")}
+                        {props.readingMinutes && props.readingMinutes > 0
+                            ? props.readingMinutes < 1
+                                ? t("common.lessThanOneMinute")
+                                : t("common.minute", { n: props.readingMinutes })
+                            : ""}
+                    </span>
+                )}
+                {(props.wordCount ?? 0) > 0 && (
+                    <span class="wordCount">
+                        {t("post.wordCount")}
+                        {props.wordCount}
+                    </span>
+                )}
+                <span id="vercount_container_page_pv">
+                    {t("post.viewCount")}
+                    <span id="vercount_value_page_pv">Loading...</span>
+                </span>
+            </div>
         )}
-        {(props.wordCount ?? 0) > 0 && (
-            <span class="wordCount">
-                {t("post.wordCount")}
-                {props.wordCount}
-            </span>
-        )}
-        <span id="vercount_container_page_pv">
-            {t("post.viewCount")}
-            <span id="vercount_value_page_pv">Loading...</span>
-        </span>
-    </div>
-)}
         {exportMd && (
-    <div class="stalux-post-source-link-row">
-        <a
-            class="stalux-post-source-link"
-            href={mdSourceUrl}
-            target="_blank"
-            rel="noopener noreferrer"
-        >
-            {t("post.viewSource")}
-        </a>
-    </div>
-)}
+            <div class="stalux-post-source-link-row">
+                <a
+                    class="stalux-post-source-link"
+                    href={mdSourceUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    {t("post.viewSource")}
+                </a>
+            </div>
+        )}
     </header>
 
     <ArticleSummary description={props.description} label={t("post.summary")} />

package/src/components/stalux/posts/postList.astro

@@ -14,9 +14,9 @@ const posts = props.posts ?? (await getCollection("posts", ({ data }) => !data.d
 <div data-stalux="postlist" class="stalux-post-list-container">
     <ul class="post-list">
         {posts.map((post, index) => (
-    <li>
-        <PostCard post={post} priority={index === 0} />
-    </li>
-))}
+            <li>
+                <PostCard post={post} priority={index === 0} />
+            </li>
+        ))}
     </ul>
 </div>

package/src/components/stalux/posts/postToc.astro

@@ -36,22 +36,22 @@ const tocItems = headings
 >
     <h3 class="stalux-toc-title">{title}</h3>
     {tocItems.length > 0 ? (
-    <ul class="stalux-toc-list" transition:name="toc-content">
-        {tocItems.map((heading) => (
-            <li>
-                <a
-                    class={`stalux-toc-item ${({ 1: "stalux-toc-depth-1", 2: "stalux-toc-depth-2", 3: "stalux-toc-depth-3", 4: "stalux-toc-depth-4", 5: "stalux-toc-depth-5", 6: "stalux-toc-depth-6" } as Record<number, string>)[heading.depth] || ""} a-none`}
-                    href={`#${heading.slug}`}
-                    data-toc-link
-                >
-                    {heading.text}
-                </a>
-            </li>
-        ))}
-    </ul>
-) : (
-    <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
-)}
+        <ul class="stalux-toc-list" transition:name="toc-content">
+            {tocItems.map((heading) => (
+                <li>
+                    <a
+                        class={`stalux-toc-item ${({ 1: "stalux-toc-depth-1", 2: "stalux-toc-depth-2", 3: "stalux-toc-depth-3", 4: "stalux-toc-depth-4", 5: "stalux-toc-depth-5", 6: "stalux-toc-depth-6" } as Record<number, string>)[heading.depth] || ""} a-none`}
+                        href={`#${heading.slug}`}
+                        data-toc-link
+                    >
+                        {heading.text}
+                    </a>
+                </li>
+            ))}
+        </ul>
+    ) : (
+        <div class="stalux-toc-empty">{t("taxonomy.noToc")}</div>
+    )}
 </nav>
 
 <script src="../../../scripts/toc-scrollspy.ts"></script>

package/src/components/stalux/tags/tagsCloud.astro

@@ -24,26 +24,26 @@ const tagLinks = tagList.map((t) => ({
 <!-- 移动端：SSR 卡片 -->
 <div class="stalux-cloud-cards" id="tags-cards">
     {tagList.length > 0 ? (
-    tagGroups.map((group) => (
-        <div class="stalux-cloud-tag-group">
-            {group.map(({ name, count }) => (
-                <a
-                    href={`/tags/${name}/`}
-                    class="stalux-cloud-tag-card"
-                    data-stalux-card
-                    data-stalux-tag-card
-                    data-count={count}
-                    data-astro-prefetch
-                >
-                    <span class="stalux-cloud-tag-name">{name}</span>
-                    <span class="stalux-cloud-tag-count">{count}</span>
-                </a>
-            ))}
-        </div>
-    ))
-) : (
-    <div class="stalux-cloud-no-tags">{t("tags.noTags")}</div>
-)}
+        tagGroups.map((group) => (
+            <div class="stalux-cloud-tag-group">
+                {group.map(({ name, count }) => (
+                    <a
+                        href={`/tags/${name}/`}
+                        class="stalux-cloud-tag-card"
+                        data-stalux-card
+                        data-stalux-tag-card
+                        data-count={count}
+                        data-astro-prefetch
+                    >
+                        <span class="stalux-cloud-tag-name">{name}</span>
+                        <span class="stalux-cloud-tag-count">{count}</span>
+                    </a>
+                ))}
+            </div>
+        ))
+    ) : (
+        <div class="stalux-cloud-no-tags">{t("tags.noTags")}</div>
+    )}
 </div>
 
 <!-- 桌面端：Canvas 标签云 -->

package/src/components/stalux/words/wordCard.astro

@@ -23,32 +23,32 @@ const machineDate = date && timezone ? toMachineDateTime(date, timezone) : date;
         <Content />
     </div>
     {(date || source || sourceDate) && (
-    <footer class="stalux-word-footer">
-        {date ? (
-            <time class="stalux-word-date" datetime={machineDate}>
-                {date}
-            </time>
-        ) : (
-            <span />
-        )}
-        {(source || sourceDate) && (
-            <div class="stalux-word-source-meta">
-                {sourceDate && <span class="stalux-word-source-date">{sourceDate}</span>}
-                {source &&
-                    (link ? (
-                        <a
-                            href={link}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            class="stalux-word-source-link"
-                        >
-                            — {source}
-                        </a>
-                    ) : (
-                        <span class="stalux-word-source-text">— {source}</span>
-                    ))}
-            </div>
-        )}
-    </footer>
-)}
+        <footer class="stalux-word-footer">
+            {date ? (
+                <time class="stalux-word-date" datetime={machineDate}>
+                    {date}
+                </time>
+            ) : (
+                <span />
+            )}
+            {(source || sourceDate) && (
+                <div class="stalux-word-source-meta">
+                    {sourceDate && <span class="stalux-word-source-date">{sourceDate}</span>}
+                    {source &&
+                        (link ? (
+                            <a
+                                href={link}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                class="stalux-word-source-link"
+                            >
+                                — {source}
+                            </a>
+                        ) : (
+                            <span class="stalux-word-source-text">— {source}</span>
+                        ))}
+                </div>
+            )}
+        </footer>
+    )}
 </article>

package/src/components/stalux/words/wordList.astro

@@ -21,24 +21,24 @@ const sorted = [...entries].sort((a, b) => {
 
 <ul class="stalux-word-list-list">
     {sorted.map((entry) => {
-    const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
-    return (
-        <li class="stalux-word-list-item">
-            {hash ? (
-                <a
-                    href={hash}
-                    class="a-none"
-                    data-word-hash={hash}
-                    aria-label={`Jump to ${entry.data.abbrlink}`}
-                >
+        const hash = entry.data.abbrlink ? `#word-${entry.data.abbrlink}` : undefined;
+        return (
+            <li class="stalux-word-list-item">
+                {hash ? (
+                    <a
+                        href={hash}
+                        class="a-none"
+                        data-word-hash={hash}
+                        aria-label={`Jump to ${entry.data.abbrlink}`}
+                    >
+                        <WordCard entry={entry} timezone={timezone} />
+                    </a>
+                ) : (
                     <WordCard entry={entry} timezone={timezone} />
-                </a>
-            ) : (
-                <WordCard entry={entry} timezone={timezone} />
-            )}
-        </li>
-    );
-})}
+                )}
+            </li>
+        );
+    })}
 </ul>
 
 <script src="../../../scripts/word-list.ts"></script>

package/src/index.ts

@@ -19,6 +19,7 @@ import {
     readdirSync,
     readFileSync,
 } from "node:fs";
+import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 import partytown from "@astrojs/partytown";
@@ -30,6 +31,7 @@ import { fontProviders } from "astro/config";
 // pagefind 是 ESM-only 包，需要在模块顶层导入
 // 因为 astro:build:done 钩子中 Vite module runner 已关闭，无法动态 import
 import { createIndex as pagefindCreateIndex } from "pagefind";
+import { parse } from "parse5";
 import { parse as parseYaml } from "yaml";
 import type { StaluxOptions } from "./config";
 import { expressiveCode } from "./expressive-code";
@@ -38,10 +40,12 @@ import {
     clearPageFontSubsets,
     readLinkedStylesheetText,
     resolveFontInputs,
-    writePageFontSubset,
+    writePageFontSubsetAsync,
 } from "./internal/font-slices";
-import { addLocalImageDimensions } from "./internal/image-dimensions";
+import { findHtmlImages } from "./internal/html-images";
+import { addLocalImageDimensions, type ImageDimensions } from "./internal/image-dimensions";
 import { createInjectedRoutes } from "./internal/injected-routes";
+import { createPageOutputCache } from "./internal/page-output-cache";
 import { createRuntimeCacheKey } from "./internal/runtime-cache-key";
 import {
     appendUniquePlugin,
@@ -49,11 +53,7 @@ import {
     prepareSatteriProcessor,
 } from "./internal/satteri-config";
 import { createViteAliases } from "./internal/vite-aliases";
-import {
-    applyHtmlImageLoadingPolicy,
-    featureFlagsHast,
-    featureFlagsMdast,
-} from "./plugins/feature-flags";
+import { featureFlagsHast, featureFlagsMdast } from "./plugins/feature-flags";
 import { temml } from "./plugins/satteri-temml";
 import { describeError } from "./utils/diagnostics";
 
@@ -386,53 +386,127 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 // Astro's Markdown image transform drops arbitrary lazy-loading hints
                 // added during HAST processing. Reapply the policy to emitted HTML.
                 const htmlFiles = await fs.readdir(outDir, { recursive: true });
+                const sourceDir = fileURLToPath(new URL(".", import.meta.url));
+                const resolveModule = createRequire(import.meta.url).resolve;
+                const parserEntry = resolveModule("parse5");
+                const nativeEntry = resolveModule("@xingwangzhe/cjk-font-split-native");
+                const outputCache = await createPageOutputCache(
+                    path.resolve("node_modules/.astro/stalux-page-output"),
+                    [
+                        ...[
+                            "index.ts",
+                            "internal/font-slices.ts",
+                            "internal/image-dimensions.ts",
+                            "internal/html-images.ts",
+                            "internal/page-output-cache.ts",
+                            "internal/style-names.generated.ts",
+                            "plugins/feature-flags.ts",
+                            "../package.json",
+                        ].map((entry) => path.join(sourceDir, entry)),
+                        path.join(path.dirname(nativeEntry), "package.json"),
+                        path.resolve(path.dirname(parserEntry), "../package.json"),
+                    ],
+                    pageFontData?.fontBuffer,
+                    htmlFiles
+                        .filter((entry) => /\.(?:css|png|jpe?g|gif|webp)$/iu.test(entry))
+                        .map((entry) => path.join(outDir, entry)),
+                );
+                let cacheHits = 0;
                 let optimizedImagePages = 0;
                 let pageFontPages = 0;
                 if (pageFontData) await fs.mkdir(pageFontData.outputDir, { recursive: true });
                 if (pageFontData) await fs.mkdir(pageFontData.cacheDir, { recursive: true });
                 const referencedPageFonts = new Set<string>();
                 const linkedCssTextCache = new Map<string, string>();
-                for (const entry of htmlFiles) {
-                    if (typeof entry !== "string" || !entry.endsWith(".html")) continue;
+                const dimensionsCache = new Map<string, Promise<ImageDimensions | undefined>>();
+                const pageEntries = htmlFiles.filter((entry) => entry.endsWith(".html"));
+                const processPage = async (entry: string) => {
                     const output = path.join(outDir, entry);
                     const before = await fs.readFile(output, "utf8");
                     const withoutPageFont = before.replace(
                         /<style data-stalux-page-font>[\s\S]*?<\/style>/gi,
                         "",
                     );
-                    const withImageDimensions = await addLocalImageDimensions(
-                        withoutPageFont,
-                        outDir,
-                    );
-                    let after = applyHtmlImageLoadingPolicy(withImageDimensions);
+                    const cached = await outputCache.get(entry, withoutPageFont);
+                    if (cached) {
+                        if (cached.font && pageFontData) {
+                            if (!referencedPageFonts.has(cached.font.filename)) {
+                                copyFileSync(
+                                    cached.font.sourcePath,
+                                    path.join(pageFontData.outputDir, cached.font.filename),
+                                );
+                            }
+                            referencedPageFonts.add(cached.font.filename);
+                            pageFontPages++;
+                        }
+                        if (cached.html !== before) {
+                            await fs.writeFile(output, cached.html);
+                            optimizedImagePages++;
+                        }
+                        cacheHits++;
+                        return;
+                    }
+                    let cachedFont: { filename: string; sourcePath: string } | undefined;
+                    const dependencies = new Set<string>();
+                    const document = parse(withoutPageFont, { sourceCodeLocationInfo: true });
+                    const images = findHtmlImages(withoutPageFont, document);
+                    let after = await addLocalImageDimensions(withoutPageFont, outDir, {
+                        images,
+                        cache: dimensionsCache,
+                        loadingPolicy: true,
+                        dependencies,
+                    });
                     if (pageFontData) {
                         const linkedStylesheetText = readLinkedStylesheetText(
                             after,
                             output,
                             outDir,
                             linkedCssTextCache,
+                            document,
+                            dependencies,
                         );
-                        const pageFont = writePageFontSubset(
+                        const pageFont = await writePageFontSubsetAsync(
                             after,
                             pageFontData.fontBuffer,
                             pageFontData.cacheDir,
                             "/_astro/fonts/",
                             linkedStylesheetText,
+                            "",
+                            document,
                         );
                         if (pageFont) {
                             after = pageFont.html;
                             pageFontPages++;
+                            cachedFont = {
+                                filename: pageFont.filename,
+                                sourcePath: pageFont.sourcePath,
+                            };
+                            if (!referencedPageFonts.has(pageFont.filename)) {
+                                copyFileSync(
+                                    pageFont.sourcePath,
+                                    path.join(pageFontData.outputDir, pageFont.filename),
+                                );
+                            }
                             referencedPageFonts.add(pageFont.filename);
-                            copyFileSync(
-                                pageFont.sourcePath,
-                                path.join(pageFontData.outputDir, pageFont.filename),
-                            );
                         }
                     }
                     if (after !== before) {
                         await fs.writeFile(output, after);
                         optimizedImagePages++;
                     }
+                    await outputCache.set(
+                        entry,
+                        withoutPageFont,
+                        {
+                            html: after,
+                            font: cachedFont,
+                        },
+                        [...dependencies],
+                    );
+                };
+                // Bound I/O concurrency without retaining the entire site's HTML in memory.
+                for (let offset = 0; offset < pageEntries.length; offset += 4) {
+                    await Promise.all(pageEntries.slice(offset, offset + 4).map(processPage));
                 }
                 if (pageFontData) {
                     clearPageFontSubsets(pageFontData.outputDir, referencedPageFonts);
@@ -441,11 +515,15 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                 logger.info(
                     `generated page-specific body font subsets for ${pageFontPages} HTML pages`,
                 );
+                logger.info(
+                    `HTML postprocessing ${(performance.now() - started).toFixed(1)}ms; cache ${cacheHits}/${htmlFiles.filter((entry) => entry.endsWith(".html")).length}`,
+                );
 
                 // 后处理：Pagefind 搜索索引。启用时任何失败都必须让构建失败，
                 // 避免发布一个页面正常但搜索已损坏的产物。
                 if (opt.pagefind) {
                     logger.info("Running Pagefind indexer...");
+                    const pagefindStarted = performance.now();
 
                     try {
                         const { index, errors } = await pagefindCreateIndex();
@@ -466,7 +544,7 @@ export function stalux(options: StaluxOptions = {}): AstroIntegration[] {
                         });
 
                         logger.info(
-                            `indexed ${page_count} pages → ${outputPath} (${(performance.now() - started).toFixed(1)}ms)`,
+                            `indexed ${page_count} pages → ${outputPath} (${(performance.now() - pagefindStarted).toFixed(1)}ms)`,
                         );
                     } catch (error) {
                         logger.error(`Pagefind indexing failed: ${describeError(error)}`);

package/src/internal/font-slices.ts

@@ -18,7 +18,7 @@ import { styleNames } from "./style-names.generated.ts";
 import { existsSync, readdirSync, readFileSync, unlinkSync } from "node:fs";
 import { dirname, join, resolve, sep } from "node:path";
 import { fileURLToPath, pathToFileURL } from "node:url";
-import { subsetFont } from "@xingwangzhe/cjk-font-split-native";
+import { FontSubsetter } from "@xingwangzhe/cjk-font-split-native";
 import type { AstroIntegrationLogger } from "astro";
 import { type DefaultTreeAdapterMap, parse } from "parse5";
 
@@ -46,6 +46,8 @@ const PAGE_SLICE_OUT_DIR = "node_modules/.astro/stalux-page-fonts";
  */
 export const RESERVED_GLYPHS = "0123456789";
 
+const preparedFonts = new WeakMap<Buffer, FontSubsetter>();
+
 // ---------------------------------------------------------------------------
 // Types
 // ---------------------------------------------------------------------------
@@ -164,10 +166,12 @@ export function readLinkedStylesheetText(
     pagePath: string,
     outputDir: string,
     cache = new Map<string, string>(),
+    document = parse(html),
+    dependencies?: Set<string>,
 ): string {
     const root = resolve(outputDir);
     const links: string[] = [];
-    collectStylesheetLinks(parse(html), links);
+    collectStylesheetLinks(document, links);
     const content: string[] = [];
     for (const href of links) {
         if (/^(?:[a-z][a-z\d+.-]*:|\/\/|data:)/iu.test(href)) continue;
@@ -180,14 +184,15 @@ export function readLinkedStylesheetText(
             continue;
         }
         if (cssPath !== root && !cssPath.startsWith(`${root}${sep}`)) continue;
+        dependencies?.add(cssPath);
         if (!cache.has(cssPath)) {
             try {
-                cache.set(cssPath, readFileSync(cssPath, "utf8"));
+                cache.set(cssPath, cssGeneratedText(readFileSync(cssPath, "utf8")));
             } catch {
                 cache.set(cssPath, "");
             }
         }
-        content.push(cssGeneratedText(cache.get(cssPath) ?? ""));
+        content.push(cache.get(cssPath) ?? "");
     }
     return content.join(" ");
 }
@@ -256,8 +261,40 @@ export function writePageFontSubset(
     publicUrlPrefix = "/_astro/fonts/",
     linkedStylesheetText = "",
     extraChars = "",
+    document = parse(html),
 ): PageFontSubset | undefined {
-    const document = parse(html);
+    const input = preparePageFont(html, fontBuffer, linkedStylesheetText, extraChars, document);
+    if (!input) return undefined;
+    return renderPageFont(
+        html,
+        publicUrlPrefix,
+        input.chars,
+        input.prepared.subset(input.chars.join(""), cacheDir),
+    );
+}
+
+export async function writePageFontSubsetAsync(
+    html: string,
+    fontBuffer: Buffer,
+    cacheDir: string,
+    publicUrlPrefix = "/_astro/fonts/",
+    linkedStylesheetText = "",
+    extraChars = "",
+    document = parse(html),
+): Promise<PageFontSubset | undefined> {
+    const input = preparePageFont(html, fontBuffer, linkedStylesheetText, extraChars, document);
+    if (!input) return undefined;
+    const result = await input.prepared.subsetAsync(input.chars.join(""), cacheDir);
+    return renderPageFont(html, publicUrlPrefix, input.chars, result);
+}
+
+function preparePageFont(
+    html: string,
+    fontBuffer: Buffer,
+    linkedStylesheetText: string,
+    extraChars: string,
+    document: DefaultTreeAdapterMap["document"],
+) {
     const body = findBody(document);
     if (!body) return undefined;
 
@@ -274,7 +311,20 @@ export function writePageFontSubset(
     );
     if (chars.length === 0) return undefined;
 
-    const result = subsetFont(fontBuffer, chars.join(""), cacheDir);
+    let prepared = preparedFonts.get(fontBuffer);
+    if (!prepared) {
+        prepared = new FontSubsetter(fontBuffer);
+        preparedFonts.set(fontBuffer, prepared);
+    }
+    return { chars, prepared };
+}
+
+function renderPageFont(
+    html: string,
+    publicUrlPrefix: string,
+    chars: string[],
+    result: { hash: string; path: string; cacheHit: boolean },
+): PageFontSubset {
     const filename = `page-${result.hash}.woff2`;
 
     const rel = `${publicUrlPrefix}${filename}`;