Use defer to load styles

A new feature coming in next Hugo. See gohugoio/hugo#12587
bep · Jun 21, 2024 · 744c036 · 744c036
1 parent 4ce5197
commit 744c036
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 26 deletions.
diff --git a/.hugo_build.lock b/.hugo_build.lock
diff --git a/hugo.toml b/hugo.toml
@@ -5,25 +5,19 @@ disableKinds = ["page", "section", "taxonomy", "term"]
 [module]
   [module.hugoVersion]
     extended = false
-    min      = "0.112.0"
+    min      = "0.128.0"
   [[module.mounts]]
     source = "assets"
     target = "assets"
   [[module.mounts]]
-    source = "hugo_stats.json"
-    target = "assets/watching/hugo_stats.json"
-
-[build]
-  writeStats = true
-  [[build.cachebusters]]
-    source = "assets/watching/hugo_stats\\.json"
-    target = "styles\\.css"
-  [[build.cachebusters]]
-    source = "(postcss|tailwind)\\.config\\.js"
-    target = "css"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(js|ts|jsx|tsx)"
-    target = "js"
-  [[build.cachebusters]]
-    source = "assets/.*\\.(.*)$"
-    target = "$1"
+    source       = "hugo_stats.json"
+    target       = "assets/notwatching/hugo_stats.json"
+    disableWatch = true
+[build.buildStats]
+  enable = true
+[[build.cachebusters]]
+  source = "assets/notwatching/hugo_stats\\.json"
+  target = "styles\\.css"
+[[build.cachebusters]]
+  source = "(postcss|tailwind)\\.config\\.js"
+  target = "css"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -1,19 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>
       {{ .Title }}
     </title>
     <meta name="description" content="{{ .Description }}" />
-    {{/* styles */}}
-    {{ $options := dict "inlineImports" true }}
-    {{ $styles := resources.Get "css/styles.css" }}
-    {{ $styles = $styles | resources.PostCSS $options }}
-    {{ if hugo.IsProduction }}
-      {{ $styles = $styles | minify | fingerprint | resources.PostProcess }}
+    {{ with (templates.Defer (dict "key" "styles" "data" "foo")) }}
+      {{ warnf "deferred: %s" . }}
+      {{ $options := dict "inlineImports" true }}
+      {{ $styles := resources.Get "css/styles.css" }}
+      {{ $styles = $styles | resources.PostCSS $options }}
+      {{ if hugo.IsProduction }}
+        {{ $styles = $styles | minify | fingerprint }}
+      {{ end }}
+      <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
     {{ end }}
-    <link href="{{ $styles.RelPermalink }}" rel="stylesheet" />
+
   </head>
   <body class="my-10">
     <div class="container px-4 lg:mx-auto">