Lazy imports

.eleventy.js

@@ -1,7 +1,4 @@
-import { minify } from "html-minifier";
-
 import { createRequire } from "node:module";
-import { readFileSync } from "fs";
 
 const require = createRequire(import.meta.url);
 const collectionControl = require("./src/_data/collectionsControl.json");
@@ -51,13 +48,13 @@ export default function (eleventyConfig) {
         "./src/pages/garden/node/Assets/*": "assets",
     });
 
-    eleventyConfig.addTransform("html", function (content) {
+    eleventyConfig.addTransform("html", async function (content) {
         if (
             this.page.outputPath &&
             this.page.outputPath.endsWith(".html") &&
             process.env.ELEVENTY_ENV == "production"
         ) {
-            return minify(content, {
+            return (await import("html-minifier")).minify(content, {
                 useShortDoctype: true,
                 removeComments: true,
                 collapseWhitespace: true,

conf/templating/javascript.js

@@ -1,5 +1,3 @@
-import { minify as minifyTs } from "terser";
-import { build as esbuild } from "esbuild";
 import textInject from "../../utils/text-inject.js";
 
 function evalInContext(js, context) {
@@ -17,7 +15,9 @@ export default function javascript(eleventyConfig) {
         compile: async function (inputContent, inputPath) {
             return async (data) => {
                 let result = (
-                    await esbuild({
+                    await (
+                        await import("esbuild")
+                    ).build({
                         entryPoints: [inputPath],
                         define: {},
                         //format: "esm",
@@ -30,7 +30,9 @@ export default function javascript(eleventyConfig) {
                 if (process.env.ELEVENTY_ENV === "production") {
                     // @ts-ignore
                     result = (
-                        await minifyTs(result, {
+                        await (
+                            await import("terser")
+                        ).minify(result, {
                             module: true,
                             ecma: 2017,
                             compress: {

conf/templating/markdown/index.js

@@ -12,34 +12,34 @@ import slugify from "../../../utils/slugify.js";
 
 import iterator from "markdown-it-for-inline";
 
-import Shiki from "@shikijs/markdown-it";
 import { transformerNotationDiff } from "@shikijs/transformers";
 import { gruvBoxDarkHard } from "./highlight.js";
-import { inject } from "./widgets/widgets.js";
 
 const proxy = (tokens, idx, options, env, self) =>
     self.renderToken(tokens, idx, options);
 
-const shiki = await Shiki({
-    langs: [
-        "html",
-        "css",
-        "scss",
-        "javascript",
-        "typescript",
-        "json",
-        "yaml",
-        "shell",
-        "graphql",
-        "rust",
-        "swift",
-        "regex",
-        "toml",
-        "liquid",
-    ],
-    theme: gruvBoxDarkHard,
-    transformers: [transformerNotationDiff()],
-});
+async function shiki() {
+    return (await import("@shikijs/markdown-it")).default({
+        langs: [
+            "html",
+            "css",
+            "scss",
+            "javascript",
+            "typescript",
+            "json",
+            "yaml",
+            "shell",
+            "graphql",
+            "rust",
+            "swift",
+            "regex",
+            "toml",
+            "liquid",
+        ],
+        theme: gruvBoxDarkHard,
+        transformers: [transformerNotationDiff()],
+    });
+}
 
 let options = {
     html: true,
@@ -204,7 +204,9 @@ export function markdownTemplate(eleventyConfig) {
                 }
                 result = markdownIt.render(result, data);
                 if (result.includes("___")) {
-                    result = await inject(result);
+                    result = await (
+                        await import("./widgets/widgets.js")
+                    ).inject(result);
                 }
                 return result;
             };

conf/templating/scss.js

@@ -1,4 +1,3 @@
-import * as sass from "sass";
 import postcss from "postcss";
 import path from "path";
 import postcsso from "postcss-csso";
@@ -11,10 +10,13 @@ export default function scss(eleventyConfig) {
         compile: async function (inputContent, inputPath) {
             if (inputPath.split("/").at(-1).startsWith("_")) return;
 
-            let { css, loadedUrls } = sass.compileString(inputContent, {
-                loadPaths: [path.parse(inputPath).dir || "."],
-                sourceMap: false,
-            });
+            let { css, loadedUrls } = (await import("sass")).compileString(
+                inputContent,
+                {
+                    loadPaths: [path.parse(inputPath).dir || "."],
+                    sourceMap: false,
+                },
+            );
 
             this.addDependencies(inputPath, loadedUrls);
 

src/og.11ty.js

@@ -1,6 +1,3 @@
-import { svg } from "../utils/ogHelpers.js";
-import { Resvg } from "@resvg/resvg-js";
-
 export default class Og {
     data() {
         return {
@@ -25,7 +22,9 @@ export default class Og {
         };
     }
     async render(page) {
-        let svgd = await svg({
+        let svgd = await (
+            await import("../utils/ogHelpers.js")
+        ).svg({
             title: page.entry.data.title,
             desc: page.entry.data.description,
             date: page.entry.data.date?.toLocaleDateString(),
@@ -35,7 +34,7 @@ export default class Og {
     }
 }
 
-function renderSvg(svgd) {
+async function renderSvg(svgd) {
     /**
      * @type {import("@resvg/resvg-js").ResvgRenderOptions}
      */
@@ -44,6 +43,8 @@ function renderSvg(svgd) {
             loadSystemFonts: false,
         },
     };
-    const png = new Resvg(svgd, options).render().asPng();
+    const png = new (await import("@resvg/resvg-js")).Resvg(svgd, options)
+        .render()
+        .asPng();
     return png;
 }