docs: use defer when possible for JS

twbs · Mar 18, 2024 · 5041ec5 · 5041ec5
1 parent fb42018
commit 5041ec5
Show file tree

Hide file tree

Showing 12 changed files with 20 additions and 10 deletions.
diff --git a/site/assets/js/stackblitz.js b/site/assets/js/stackblitz.js
@@ -41,7 +41,7 @@ const openBootstrapSnippet = (htmlSnippet, jsSnippet, classes) => {
     <link href="${cssCdn}" rel="stylesheet">
     <link href="https://getbootstrap.com/docs/${docsVersion}/assets/css/docs.css" rel="stylesheet">
     <title>Bootstrap Example</title>
-    <${'script'} src="${jsBundleCdn}"></${'script'}>
+    <${'script'} defer src="${jsBundleCdn}"></${'script'}>
   </head>
   <body class="p-3 m-0 border-0 ${classes}">
 

diff --git a/site/content/docs/5.3/examples/cheatsheet-rtl/index.html b/site/content/docs/5.3/examples/cheatsheet-rtl/index.html
@@ -5,6 +5,7 @@
   - "../cheatsheet/cheatsheet.rtl.css"
 extra_js:
   - src: "../cheatsheet/cheatsheet.js"
+    defer: true
 body_class: "bg-body-tertiary"
 direction: rtl
 ---

diff --git a/site/content/docs/5.3/examples/cheatsheet/index.html b/site/content/docs/5.3/examples/cheatsheet/index.html
@@ -5,6 +5,7 @@
   - "cheatsheet.css"
 extra_js:
   - src: "cheatsheet.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---
 

diff --git a/site/content/docs/5.3/examples/checkout-rtl/index.html b/site/content/docs/5.3/examples/checkout-rtl/index.html
@@ -6,6 +6,7 @@
   - "../checkout/checkout.css"
 extra_js:
   - src: "../checkout/checkout.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---
 

diff --git a/site/content/docs/5.3/examples/checkout/index.html b/site/content/docs/5.3/examples/checkout/index.html
@@ -5,6 +5,7 @@
   - "checkout.css"
 extra_js:
   - src: "checkout.js"
+    defer: true
 body_class: "bg-body-tertiary"
 ---
 

diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -7,7 +7,9 @@
 extra_js:
   - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"
     integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
   - src: "dashboard.js"
+    defer: true
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
@@ -6,7 +6,9 @@
 extra_js:
   - src: "https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.js"
     integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
+    defer: true
   - src: "dashboard.js"
+    defer: true
 ---
 
 <svg xmlns="http://www.w3.org/2000/svg" class="d-none">

diff --git a/site/content/docs/5.3/examples/offcanvas-navbar/index.html b/site/content/docs/5.3/examples/offcanvas-navbar/index.html
@@ -5,6 +5,7 @@
   - "offcanvas-navbar.css"
 extra_js:
   - src: "offcanvas-navbar.js"
+    defer: true
 body_class: "bg-body-tertiary"
 aliases: "/docs/5.3/examples/offcanvas/"
 ---

diff --git a/site/content/docs/5.3/examples/sidebars/index.html b/site/content/docs/5.3/examples/sidebars/index.html
@@ -5,6 +5,7 @@
   - "sidebars.css"
 extra_js:
   - src: "sidebars.js"
+    defer: true
 body_class: ""
 ---
 

diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html
@@ -67,7 +67,7 @@ <h1 class="bd-title mb-0" id="content">{{ .Title | markdownify }}</h1>
 {{ end }}
 {{ define "footer" }}
   {{ range .Page.Params.extra_js -}}
-    <script{{ with .async }} async{{ end }} src="{{ .src }}"></script>
+    <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"></script>
   {{- end -}}
   <div class="position-fixed" aria-hidden="true"><input type="text" tabindex="-1"></div>
 {{ end }}
diff --git a/site/layouts/_default/examples.html b/site/layouts/_default/examples.html
@@ -159,13 +159,13 @@
     {{ .Content }}
 
     {{- if hugo.IsProduction -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
     {{- else -}}
-      <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+      <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
     {{- end }}
 
     {{ range .Page.Params.extra_js -}}
-      <script{{ with .async }} async{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
+      <script{{ with .async }} async{{ end }}{{ with .defer }} defer{{ end }} src="{{ .src }}"{{ with .integrity }} {{ printf "integrity=%q" . | safeHTMLAttr }} crossorigin="anonymous"{{ end }}></script>
     {{- end -}}
   </body>
 </html>
diff --git a/site/layouts/partials/scripts.html b/site/layouts/partials/scripts.html
@@ -1,7 +1,7 @@
 {{ if hugo.IsProduction -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
+  <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.min.js" {{ printf "integrity=%q" .Site.Params.cdn.js_bundle_hash | safeHTMLAttr }}></script>
 {{ else -}}
-  <script src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
+  <script defer src="/docs/{{ .Site.Params.docs_version }}/dist/js/bootstrap.bundle.js"></script>
 {{- end }}
 
 {{- $esbuildOptions := dict "target" "es2019" -}}
@@ -12,11 +12,11 @@
 {{- end }}
 
 {{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
-<script src="{{ $applicationJs.RelPermalink }}"></script>
+<script defer src="{{ $applicationJs.RelPermalink }}"></script>
 
 {{- if (ne .Page.Layout "examples") -}}
 {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }}
-<script async src="{{ $searchJs.RelPermalink }}"></script>
+<script defer src="{{ $searchJs.RelPermalink }}"></script>
 {{- end -}}
 
 {{ if eq .Page.Layout "docs" -}}
@@ -29,5 +29,5 @@
 -}}
 {{- $esbuildOptions = merge $esbuildOptions (dict "params" $esbuildParams) -}}
 {{- $stackblitzJs := resources.Get "js/stackblitz.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/stackblitz.js") }}
-<script async src="{{ $stackblitzJs.RelPermalink }}"></script>
+<script defer src="{{ $stackblitzJs.RelPermalink }}"></script>
 {{- end -}}