Use defer when possible for JS

twbs · Mar 12, 2024 · e6f9a98 · e6f9a98
1 parent 56739ba
commit e6f9a98
Show file tree

Hide file tree

Showing 11 changed files with 17 additions and 7 deletions.
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,7 +12,7 @@
 {{- end }}
 
 {{- $applicationJs := resources.Get "js/application.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/application.js") }}
-<script src="{{ $applicationJs.Permalink | relURL }}"></script>
+<script defer src="{{ $applicationJs.Permalink | relURL }}"></script>
 
 {{- if (ne .Page.Layout "examples") -}}
 {{- $searchJs := resources.Get "js/search.js" | js.Build $esbuildOptions | resources.Copy (path.Join $targetDocsJSPath "/assets/js/search.js") }}