peskyadmin/DAM-static-site
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added lazy loading for css and js

Browse Source
This commit is contained in:
somrat sorkar 2023-10-14 10:16:12 +06:00
parent 0c9aef3e0f
commit 0235da7caa
3 changed files with 58 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
exampleSite/hugo.toml
View File

@ -122,31 +122,45 @@ notAlternative = true
# CSS Plugins
[[params.plugins.css]]
link = "plugins/swiper/swiper-bundle.css"
lazy = false
[[params.plugins.css]]
link = "plugins/glightbox/glightbox.css"
lazy = true
[[params.plugins.css]]
link = "plugins/font-awesome/v6/brands.css"
lazy = true
[[params.plugins.css]]
link = "plugins/font-awesome/v6/solid.css"
lazy = true
[[params.plugins.css]]
link = "plugins/font-awesome/v6/icons.css"
lazy = true
# JS Plugins
[[params.plugins.js]]
link = "js/search.js"
lazy = false
[[params.plugins.js]]
link = "plugins/swiper/swiper-bundle.js"
lazy = false
[[params.plugins.js]]
link = "plugins/glightbox/glightbox.js"
lazy = true
[[params.plugins.js]]
link = "js/gallery-slider.js"
lazy = true
[[params.plugins.js]]
link = "js/accordion.js"
lazy = true
[[params.plugins.js]]
link = "js/tab.js"
lazy = true
[[params.plugins.js]]
link = "js/modal.js"
lazy = true
[[params.plugins.js]]
link = "plugins/cookie.js"
lazy = true
[[params.plugins.js]]
link = "plugins/youtube-lite.js"
lazy = true

22
layouts/partials/essentials/script.html
View File

@ -1,5 +1,6 @@
<!-- JS Plugins + Main script -->
{{ $scripts := slice }}
{{ $scriptsLazy := slice }}
{{ range site.Params.plugins.js }}
{{ if findRE "^http" .link }}
<script
@ -7,24 +8,39 @@
type="application/javascript"
{{ .attributes | safeHTMLAttr }}></script>
{{ else }}
{{ $scripts = $scripts | append (resources.Get .link) }}
{{ if not .lazy }}
{{ $scripts = $scripts | append (resources.Get .link) }}
{{ else }}
{{ $scriptsLazy = $scriptsLazy | append (resources.Get .link) }}
{{ end }}
{{ end }}
{{ end }}
<!-- main script -->
{{ $scripts = $scripts | append (resources.Get "js/main.js") }}
{{ $scripts = $scripts | resources.Concat "js/script.js" }}
{{ $scripts = $scripts | resources.Concat "js/scripts.js" }}
{{ $scriptsLazy = $scriptsLazy | resources.Concat "js/scripts-lazy.js" }}
{{ if hugo.IsProduction }}
{{ $scripts = $scripts | minify | fingerprint }}
{{ $scriptsLazy = $scriptsLazy | minify | fingerprint }}
{{ end }}
{{/* scripts */}}
<script
crossorigin="anonymous"
integrity="{{ $scripts.Data.Integrity }}"
src="{{ $scripts.RelPermalink }}"></script>
{{/* scripts lazy */}}
<script
crossorigin="anonymous"
integrity="{{ $scriptsLazy.Data.Integrity }}"
src="{{ $scriptsLazy.RelPermalink }}"
defer></script>
<!-- progressive web app -->
{{ partialCached "pwa.html" . }}

29
layouts/partials/essentials/style.html
View File

@ -31,6 +31,7 @@
<!-- plugins + stylesheet -->
{{ $styles := slice }}
{{ $stylesLazy := slice }}
{{ range site.Params.plugins.css }}
{{ if findRE "^http" .link }}
<link
@ -40,20 +41,40 @@
href="{{ .link | relURL }}"
{{ .attributes | safeHTMLAttr }} />
{{ else }}
{{ $styles = $styles | append (resources.Get .link) }}
{{ if not .lazy }}
{{ $styles = $styles | append (resources.Get .link) }}
{{ else }}
{{ $stylesLazy = $stylesLazy | append (resources.Get .link) }}
{{ end }}
{{ end }}
{{ end }}
{{ $styles := $styles | append (resources.Get "scss/main.scss" | toCSS) }}
{{ $styles := $styles | resources.Concat "css/style.css" }}
{{/* main style */}}
{{ $styles = $styles | append (resources.Get "scss/main.scss" | toCSS) }}
{{ $styles = $styles | resources.Concat "css/style.css" }}
{{ $styles = $styles | resources.PostCSS }}
{{ $stylesLazy = $stylesLazy | resources.Concat "css/style-lazy.css" }}
{{ $stylesLazy = $stylesLazy | resources.PostCSS }}
{{ if hugo.IsProduction }}
{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint | resources.PostProcess }}
{{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . | minify | fingerprint | resources.PostProcess }}
{{ else }}
{{ $styles = $styles | resources.ExecuteAsTemplate "css/style.css" . }}
{{ $stylesLazy = $stylesLazy | resources.ExecuteAsTemplate "css/style-lazy.css" . }}
{{ end }}
{{/* styles */}}
<link
href="{{ $styles.RelPermalink }}"
integrity="{{ $styles.Data.Integrity }}"
rel="stylesheet" />
{{/* styles lazy */}}
<link
rel="stylesheet"
href="{{ $stylesLazy.RelPermalink }}"
integrity="{{ $stylesLazy.Data.Integrity }}"
media="print"
onload="this.media='all'; this.onload=null;" />