perf optimisations (5~7 seconds shaved off (windows)) (#1278)

Author: thisisjofrank

_config.ts

@@ -30,11 +30,14 @@ import createGAMiddleware from "./middleware/googleAnalytics.ts";
 import redirectsMiddleware, {
   toFileAndInMemory,
 } from "./middleware/redirects.ts";
+import { cliNow } from "./timeUtils.ts";
+import { log } from "lume/core/utils/log.ts";
 
 const site = lume(
   {
     location: new URL("https://docs.deno.com"),
     caseSensitiveUrls: true,
+    emptyDest: false,
     server: {
       middlewares: [
         redirectsMiddleware,
@@ -46,6 +49,14 @@ const site = lume(
       ],
       page404: "/404",
     },
+    watcher: {
+      ignore: [
+        "/.git",
+        "/.github",
+        "/.vscode",
+      ],
+      debounce: 1_000,
+    },
   },
   {
     markdown: {
@@ -77,12 +88,20 @@ const site = lume(
       options: {
         linkify: true,
         langPrefix: "highlight notranslate language-",
+        highlight: (code, lang) => {
+          if (!lang || !Prism.languages[lang]) {
+            return code;
+          }
+          const result = Prism.highlight(code, Prism.languages[lang], lang);
+          return result || code;
+        },
       },
     },
   },
 );
 
 site.copy("static", ".");
+site.copy("timeUtils.ts");
 site.copy("subhosting/api/images");
 site.copy("deploy/docs-images");
 site.copy("deploy/kv/manual/images");
@@ -107,6 +126,7 @@ site.use(
     output: toFileAndInMemory,
   }),
 );
+
 site.use(search());
 site.use(jsx());
 
@@ -115,6 +135,7 @@ site.use(
     plugins: [tw(tailwindConfig)],
   }),
 );
+
 site.use(
   esbuild({
     extensions: [".client.ts", ".client.js"],
@@ -125,22 +146,6 @@ site.use(
   }),
 );
 
-// This is a work-around due to deno-dom's dependency of nwsapi not supporting
-// :has selectors, nor having intention of supporting them, so using `body:not(:has(.ddoc))`
-// is not possible. This works around by adding an `apply-prism` class on pages that
-// don't use a ddoc class.
-site.process([".html"], (pages) => {
-  for (const page of pages) {
-    const document = page.document!;
-    if (!document.querySelector(".ddoc")) {
-      document.body.classList.add("apply-prism");
-      document
-        .querySelectorAll("body.apply-prism pre code")
-        .forEach((element) => Prism.highlightElement(element));
-    }
-  }
-});
-
 site.use(toc({ anchor: false }));
 site.use(title());
 site.use(sitemap());
@@ -161,44 +166,6 @@ site.copy("reference_gen/gen/node/page.css", "/api/node/page.css");
 site.copy("reference_gen/gen/node/styles.css", "/api/node/styles.css");
 site.copy("reference_gen/gen/node/script.js", "/api/node/script.js");
 
-site.process([".html"], (pages) => {
-  for (const page of pages) {
-    const document = page.document;
-    if (document) {
-      const tabGroups = document.querySelectorAll("deno-tabs");
-      for (const tabGroup of tabGroups) {
-        const newGroup = document.createElement("div");
-        newGroup.classList.add("deno-tabs");
-        newGroup.dataset.id = tabGroup.getAttribute("group-id")!;
-        const buttons = document.createElement("ul");
-        buttons.classList.add("deno-tabs-buttons");
-        newGroup.appendChild(buttons);
-        const tabs = document.createElement("div");
-        tabs.classList.add("deno-tabs-content");
-        newGroup.appendChild(tabs);
-        for (const tab of tabGroup.children) {
-          if (tab.tagName === "DENO-TAB") {
-            const selected = tab.getAttribute("default") !== null;
-            const buttonContainer = document.createElement("li");
-            buttons.appendChild(buttonContainer);
-            const button = document.createElement("button");
-            button.textContent = tab.getAttribute("label")!;
-            button.dataset.tab = tab.getAttribute("value")!;
-            button.dataset.active = String(selected);
-            buttonContainer.appendChild(button);
-            const content = document.createElement("div");
-            content.innerHTML = tab.innerHTML;
-            content.dataset.tab = tab.getAttribute("value")!;
-            content.dataset.active = String(selected);
-            tabs.appendChild(content);
-          }
-        }
-        tabGroup.replaceWith(newGroup);
-      }
-    }
-  }
-});
-
 site.ignore(
   "old",
   "README.md",
@@ -210,13 +177,35 @@ site.ignore(
   // "subhosting",
 );
 
-site.scopedUpdates((path) => path == "/overrides.css");
-site.use(
-  checkUrls({
-    external: false, // Set to true to check external links
-    output: "_broken_links.json",
-    ignore: ["https://www.googletagmanager.com"],
-  }),
+site.scopedUpdates(
+  (path) => path == "/overrides.css",
+  (path) => /\.(js|ts)$/.test(path),
+  (path) => path.startsWith("/api/deno/"),
 );
 
+const SKIP_CHECK_URLS = (Deno.env.get("SKIP_CHECK_URLS") || "false")
+  .toLowerCase();
+
+if (SKIP_CHECK_URLS !== "true") {
+  log.info(`${cliNow()} Enabling broken-link checker`);
+
+  site.use(
+    checkUrls({
+      external: false, // Set to true to check external links
+      output: "_broken_links.json",
+      ignore: ["https://www.googletagmanager.com"],
+    }),
+  );
+} else {
+  log.warn(
+    `${cliNow()} <cyan>checkUrls</cyan>: Skipping broken link check for local performance.`,
+  );
+}
+
+site.addEventListener("afterStartServer", () => {
+  log.warn(
+    `${cliNow()} Server available at <green>http://localhost:3000</green>`,
+  );
+});
+
 export default site;

deno.json

@@ -14,6 +14,7 @@
   },
   "tasks": {
     "serve": "deno run -A lume.ts -s",
+    "serve:no_logs": "LUME_LOGS=WARN SKIP_CHECK_URLS=true deno run -A lume.ts -s",
     "start": "deno task serve",
     "dev": "deno task serve",
     "build": "deno run -A lume.ts",

examples/_components/SnippetComponent.tsx

@@ -1,4 +1,5 @@
 import { ExampleSnippet } from "../types.ts";
+import Prism from "prismjs";
 
 export default function SnippetComponent(props: {
   filename: string;
@@ -7,6 +8,8 @@ export default function SnippetComponent(props: {
   lastOfFile: boolean;
   snippet: ExampleSnippet;
 }) {
+  const html = Prism.highlight(props.snippet.code, Prism.languages.js, "js");
+
   return (
     <div class="grid grid-cols-1 sm:grid-cols-10 gap-x-8">
       <div
@@ -49,7 +52,7 @@ export default function SnippetComponent(props: {
                   : "middle"}
               >
                   <code
-                    dangerouslySetInnerHTML={{ __html: props.snippet.code }}
+                    dangerouslySetInnerHTML={{ __html: html }}
                   ></code>
               </pre>
             </div>

middleware/googleAnalytics.ts

@@ -9,22 +9,24 @@ import { type Event } from "ga4";
 import type { RequestHandler } from "lume/core/server.ts";
 import type Server from "lume/core/server.ts";
 import nullMiddleware from "./null.ts";
+import { cliNow } from "../timeUtils.ts";
+import { log } from "lume/core/utils/log.ts";
 
 const GA4_MEASUREMENT_ID = Deno.env.get("GA4_MEASUREMENT_ID");
 
 export default function createGAMiddleware(
   server: Server | { addr?: Deno.Addr } | null = null,
 ) {
   if (GA4_MEASUREMENT_ID == null) {
-    console.warn(
-      "createGAMiddleware: GA4_MEASUREMENT_ID is not set. Google Analytics middleware will be disabled.",
+    log.warn(
+      `${cliNow()} <cyan>createGAMiddleware</cyan>: GA4_MEASUREMENT_ID is not set. Google Analytics middleware will be disabled.`,
     );
     return nullMiddleware;
   }
 
   if (server == null) {
-    console.warn(
-      "createGAMiddleware: Server object is not provided. Google Analytics middleware will be disabled.",
+    log.warn(
+      `${cliNow()} <cyan>createGAMiddleware</cyan>: Server object is not provided. Google Analytics middleware will be disabled.`,
     );
     return nullMiddleware;
   }

middleware/redirects.ts

@@ -4,6 +4,8 @@ import type { RequestHandler } from "lume/core/server.ts";
 import type Site from "lume/core/site.ts";
 import GO_LINKS from "../go.json" with { type: "json" };
 import REDIRECT_LINKS from "../oldurls.json" with { type: "json" };
+import { cliNow } from "../timeUtils.ts";
+import { log } from "lume/core/utils/log.ts";
 
 type Status = 301 | 302 | 307 | 308;
 type Redirect = [string, string, Status];
@@ -59,18 +61,20 @@ function loadFromJson() {
   let redirects: Record<string, string> = {};
 
   if (existsSync("./_redirects.json")) {
-    console.log(
-      `redirectsMiddleware: Reading redirects from '_redirects.json'...`,
+    log.debug(
+      `${cliNow()} <cyan>redirectsMiddleware</cyan>: Reading redirects from '_redirects.json'...`,
     );
     const redirectsAsBytes = Deno.readFileSync("./_redirects.json");
     const redirectsAsString = new TextDecoder().decode(redirectsAsBytes);
     redirects = JSON.parse(redirectsAsString) as Record<string, string>;
   } else {
-    console.log(`redirectsMiddleware: No './_redirects.json' found.`);
+    log.warn(
+      `${cliNow()} <cyan>redirectsMiddleware</cyan>: No './_redirects.json' found.`,
+    );
   }
 
-  console.log(
-    `redirectsMiddleware: Total number of redirects loaded: ${
+  log.info(
+    `${cliNow()} <cyan>redirectsMiddleware</cyan>: Total number of redirects loaded: ${
       Object.keys(redirects).length
     }.`,
   );
@@ -79,24 +83,30 @@ function loadFromJson() {
 }
 
 function addGoLinksAndRedirectLinks(redirects: Record<string, string>) {
-  console.log(`addGoLinksAndRedirectLinks: Adding additional redirects...`);
+  log.debug(
+    `${cliNow()} addGoLinksAndRedirectLinks: Adding additional redirects...`,
+  );
 
   redirects["/api/"] = "/api/deno/";
 
-  console.log(`redirectsMiddleware: Reading redirects from 'go.json'...`);
+  log.debug(
+    `${cliNow()} <cyan>redirectsMiddleware</cyan>: Reading redirects from 'go.json'...`,
+  );
   for (const [name, url] of Object.entries(GO_LINKS)) {
     redirects[`/go/${name}/`] = url;
   }
 
-  console.log(`redirectsMiddleware: Reading redirects from 'oldurls.json'...`);
+  log.debug(
+    `${cliNow()} <cyan>redirectsMiddleware</cyan>: Reading redirects from 'oldurls.json'...`,
+  );
   for (const [name, url] of Object.entries(REDIRECT_LINKS)) {
     redirects[name] = url;
   }
 
-  console.log(
-    `addGoLinksAndRedirectLinks: Total number of redirects loaded: ${
+  log.warn(
+    `${cliNow()} <cyan>addGoLinksAndRedirectLinks</cyan>: Total number of redirects loaded: <green>${
       Object.keys(redirects).length
-    }.`,
+    }</green>.`,
   );
 }
 
@@ -111,7 +121,9 @@ export function toFileAndInMemory(redirects: Redirect[], site: Site): void {
     redirectsSingleton[from] = to;
   }
 
-  console.log(`toFileAndInMemory: Added ${redirects.length} redirects.`);
+  log.warn(
+    `${cliNow()} <cyan>toFileAndInMemory</cyan> Added <green>${redirects.length}</green> redirects.`,
+  );
 
   addGoLinksAndRedirectLinks(redirectsSingleton);
 }

sidebar.client.ts

@@ -18,7 +18,6 @@ for (const el of document.querySelectorAll("[data-accordion-trigger]")) {
 }
 
 const sidebar = document.getElementById("sidebar");
-console.log(sidebar);
 
 if (sidebar) {
   const sidebarNav = sidebar.querySelector("nav")!;

tabs.client.ts

@@ -1,3 +1,40 @@
+const tabGroups = document.querySelectorAll("deno-tabs");
+
+for (const tabGroup of tabGroups) {
+  const newGroup = document.createElement("div");
+  newGroup.classList.add("deno-tabs");
+  newGroup.dataset.id = tabGroup.getAttribute("group-id")!;
+
+  const buttons = document.createElement("ul");
+  buttons.classList.add("deno-tabs-buttons");
+  newGroup.appendChild(buttons);
+
+  const tabs = document.createElement("div");
+  tabs.classList.add("deno-tabs-content");
+  newGroup.appendChild(tabs);
+
+  for (const tab of tabGroup.children) {
+    if (tab.tagName === "DENO-TAB") {
+      const selected = tab.getAttribute("default") !== null;
+      const buttonContainer = document.createElement("li");
+      buttons.appendChild(buttonContainer);
+
+      const button = document.createElement("button");
+      button.textContent = tab.getAttribute("label")!;
+      button.dataset.tab = tab.getAttribute("value")!;
+      button.dataset.active = String(selected);
+      buttonContainer.appendChild(button);
+
+      const content = document.createElement("div");
+      content.innerHTML = tab.innerHTML;
+      content.dataset.tab = tab.getAttribute("value")!;
+      content.dataset.active = String(selected);
+      tabs.appendChild(content);
+    }
+  }
+  tabGroup.replaceWith(newGroup);
+}
+
 class GroupSelectEvent extends Event {
   groupId: string;
   tabId: string;

timeUtils.ts

@@ -0,0 +1,4 @@
+export function cliNow() {
+  const timeOnly = new Date().toLocaleTimeString();
+  return `[${timeOnly}]`;
+}