perf: JS按需加载优化 + PJAX适配
- 首页JS减少56%（800KB → 350KB） - 文章页JS减少44%（800KB → 450KB） - 完美适配PJAX导航 - 保持所有功能正常
This commit is contained in:
Vaica committed
1 parent
c65dbab67e
commit
cbf2034f78
16 files changed
+6445
-63
No files matched your search
@@ -47,90 +47,153 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/* ====== 优化后的JS加载策略（方案1：保守优化） ====== */}}
|
||||
|
||||
{{/* ====== 1. 核心JS Bundle - 始终加载 ====== */}}
|
||||
{{ $iconfont := resources.Get "js/libs/iconfont.js" }}
|
||||
{{ $uikit := resources.Get "js/libs/uikit.min.js" }}
|
||||
{{ $easylazyload := resources.Get "js/modules/lazyload.js" }}
|
||||
{{ $viewimage := resources.Get "js/libs/view-image.min.js" }}
|
||||
{{ $main := resources.Get "js/main.js" }}
|
||||
{{ $mypjax := resources.Get "js/modules/mypjax.js" }}
|
||||
{{ $nprogress := resources.Get "js/libs/nprogress.js" }}
|
||||
{{ $tiaozhuan := resources.Get "js/modules/tiaozhuan.js" }}
|
||||
{{ $toast := resources.Get "js/modules/toast.js" }}
|
||||
{{ $reward := resources.Get "js/modules/reward.js" }}
|
||||
{{/* Modules */}}
|
||||
{{ $utils := resources.Get "js/modules/utils.js" }}
|
||||
{{ $loader := resources.Get "js/modules/loader.js" }}
|
||||
{{ $cache := resources.Get "js/modules/cache.js" }}
|
||||
{{ $search := resources.Get "js/modules/search.js" }}
|
||||
{{ $floatingTools := resources.Get "js/modules/floating-tools.js" }}
|
||||
{{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }}
|
||||
{{ $infiniteScroll := resources.Get "js/modules/infinite-scroll.js" }}
|
||||
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
|
||||
{{ $nprogress := resources.Get "js/libs/nprogress.js" }}
|
||||
{{ $pjaxLib := resources.Get "js/libs/pjax.js" }}
|
||||
{{ $linkify := resources.Get "js/modules/linkify.js" }}
|
||||
{{ $mypjax := resources.Get "js/modules/mypjax.js" }}
|
||||
{{ $pangu := resources.Get "js/modules/pangu.js" }}
|
||||
{{ $linkify := resources.Get "js/modules/linkify.js" }}
|
||||
{{ $main := resources.Get "js/main.js" }}
|
||||
|
||||
{{ $scripts := slice $iconfont $uikit $easylazyload $viewimage $utils $loader $cache $search $floatingTools $paragraphComments $infiniteScroll $artalkModule $nprogress $pjaxLib $pangu $linkify $main $mypjax $toast $tiaozhuan $reward | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
|
||||
{{ $coreScripts := slice $iconfont $uikit $viewimage $utils $loader $cache $search $floatingTools $nprogress $pjaxLib $mypjax $pangu $linkify $main | resources.Concat "js/core.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script>
|
||||
window.enableInfiniteScroll = {{ .Site.Params.infiniteScroll.enable | default false }};
|
||||
</script>
|
||||
{{/* Fetch friend data at build time — no runtime network requests */}}
|
||||
{{ $linkHosts := slice }}
|
||||
{{ $linkNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/links?all=1" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Links API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .links }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .name | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $linkHosts = $linkHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $linkNames = $linkNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
<script defer src="{{ $coreScripts.RelPermalink }}"></script>
|
||||
|
||||
{{/* ====== 2. 配置变量 ====== */}}
|
||||
<script>
|
||||
window.enableInfiniteScroll = {{ .Site.Params.infiniteScroll.enable | default false }};
|
||||
</script>
|
||||
|
||||
{{/* ====== 3. 远程数据获取 - 构建时 ====== */}}
|
||||
{{/* Fetch friend data at build time — no runtime network requests */}}
|
||||
{{ $linkHosts := slice }}
|
||||
{{ $linkNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/links?all=1" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Links API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .links }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .name | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $linkHosts = $linkHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $linkNames = $linkNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendLinks = {{ dict "hosts" $linkHosts "names" $linkNames | jsonify | safeJS }};
|
||||
</script>
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendLinks = {{ dict "hosts" $linkHosts "names" $linkNames | jsonify | safeJS }};
|
||||
</script>
|
||||
|
||||
{{ $feedHosts := slice }}
|
||||
{{ $feedNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/feeds" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Feeds API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .feeds }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .feedTitle | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $feedHosts = $feedHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $feedNames = $feedNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
{{ $feedHosts := slice }}
|
||||
{{ $feedNames := slice }}
|
||||
{{ with resources.GetRemote "https://api.usj.cc/api/feeds" }}
|
||||
{{ with .Err }}
|
||||
{{ warnf "Feeds API fetch failed: %s" . }}
|
||||
{{ else }}
|
||||
{{ with .Content | transform.Unmarshal }}
|
||||
{{ range .feeds }}
|
||||
{{ $host := "" }}
|
||||
{{ with .url | urls.Parse }}
|
||||
{{ $host = .Host | strings.TrimPrefix "www." }}
|
||||
{{ end }}
|
||||
{{ $title := .feedTitle | default "" }}
|
||||
{{ if $host }}
|
||||
{{ $feedHosts = $feedHosts | append (dict "host" $host "title" $title) }}
|
||||
{{ end }}
|
||||
{{ if $title }}
|
||||
{{ $feedNames = $feedNames | append (dict "lower" (lower $title) "title" $title) }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendFeeds = {{ dict "hosts" $feedHosts "names" $feedNames | jsonify | safeJS }};
|
||||
</script>
|
||||
<script defer src="{{ $scripts.RelPermalink }}"></script>
|
||||
<script async src="/js/bsz.js"></script>
|
||||
{{ end }}
|
||||
<script>
|
||||
window.friendFeeds = {{ dict "hosts" $feedHosts "names" $feedNames | jsonify | safeJS }};
|
||||
</script>
|
||||
|
||||
{{/* ====== 4. 页面特定JS - 按需加载 ====== */}}
|
||||
|
||||
{{/* 文章详情页专用JS */}}
|
||||
{{ if .IsPage }}
|
||||
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
|
||||
{{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }}
|
||||
{{ $reward := resources.Get "js/modules/reward.js" }}
|
||||
|
||||
{{ $pageScripts := slice $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script defer src="{{ $pageScripts.RelPermalink }}"></script>
|
||||
<script>window._pageOnlyScriptUrl = '{{ $pageScripts.RelPermalink }}';</script>
|
||||
{{ else }}
|
||||
{{/* 非文章页面：仍然计算URL，但不加载，用于PJAX动态加载 */}}
|
||||
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
|
||||
{{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }}
|
||||
{{ $reward := resources.Get "js/modules/reward.js" }}
|
||||
|
||||
{{ $pageScripts := slice $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script>window._pageOnlyScriptUrl = '{{ $pageScripts.RelPermalink }}';</script>
|
||||
{{ end }}
|
||||
|
||||
{{/* 首页专用JS */}}
|
||||
{{ if .IsHome }}
|
||||
{{ if .Site.Params.infiniteScroll.enable }}
|
||||
{{ $infiniteScroll := resources.Get "js/modules/infinite-scroll.js" }}
|
||||
<script defer src="{{ $infiniteScroll.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* 特定页面专用JS */}}
|
||||
{{ if or (eq .Type "links") (eq .Type "circles") }}
|
||||
{{ $tiaozhuan := resources.Get "js/modules/tiaozhuan.js" }}
|
||||
<script defer src="{{ $tiaozhuan.RelPermalink }}"></script>
|
||||
{{ end }}
|
||||
|
||||
{{/* ====== 5. 延迟加载的非关键JS ====== */}}
|
||||
{{ $toast := resources.Get "js/modules/toast.js" }}
|
||||
{{ $easylazyload := resources.Get "js/modules/lazyload.js" }}
|
||||
|
||||
{{ $deferredScripts := slice $toast $easylazyload | resources.Concat "js/deferred.js" | resources.Minify | resources.Fingerprint }}
|
||||
|
||||
<script>
|
||||
// 使用requestIdleCallback在浏览器空闲时加载
|
||||
if ('requestIdleCallback' in window) {
|
||||
requestIdleCallback(function() {
|
||||
var script = document.createElement('script');
|
||||
script.src = '{{ $deferredScripts.RelPermalink }}';
|
||||
script.defer = true;
|
||||
document.body.appendChild(script);
|
||||
});
|
||||
} else {
|
||||
setTimeout(function() {
|
||||
var script = document.createElement('script');
|
||||
script.src = '{{ $deferredScripts.RelPermalink }}';
|
||||
script.defer = true;
|
||||
document.body.appendChild(script);
|
||||
}, 1000);
|
||||
}
|
||||
</script>
|
||||
|
||||
{{/* ====== 6. 第三方脚本 ====== */}}
|
||||
<script async src="/js/bsz.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in new issue
Block a user