Переглянути джерело

优化登录页与主页背景视频加载

  视频开启时不再渲染静态背景大图(.bg-image 加 v-if),
  避免 JPG 与视频并行下载抢占带宽,加快视频起播;
  关闭视频时退化为静态图的行为保持不变。

  登录页 mounted 时按需预取主页背景视频(prefetch),
  仅在主页视频开启时注入,进入主页时直接命中缓存、体感秒开。
画安 1 день тому
батько
коміт
d6d4a3cd99
2 змінених файлів з 17 додано та 2 видалено
  1. 16 1
      src/views/Login.vue
  2. 1 1
      src/views/Main.vue

+ 16 - 1
src/views/Login.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="login-root">
 
-    <div class="bg-image"></div>
+    <div class="bg-image" v-if="!ui.loginBgVideo"></div>
     <video v-if="ui.loginBgVideo" class="bg-video" autoplay muted loop playsinline>
       <source src="@/assets/login/login-bg.mp4" type="video/mp4" />
     </video>
@@ -39,6 +39,8 @@
 import LoginForm from "@/components/ui/LoginForm.vue";
 import FullscreenToggle from "@/components/ui/FullscreenToggle.vue";
 import brand, { ui } from "@/utils/brand";
+// webpack 解析为带 hash 的真实 URL,用于在登录页预取主页背景视频
+import mainBgVideo from "@/assets/main/main-bg.mp4";
 
 export default {
   name: "LoginPage",
@@ -49,10 +51,23 @@ export default {
       ui,
     };
   },
+  mounted() {
+    this.prefetchMainBgVideo();
+  },
   methods: {
     onLoginSuccess() {
       this.$router.push('/main').catch(() => {});
     },
+    // Login→Main 为固定路径,提前预取主页背景视频,进入主页时即命中缓存。
+    // 仅在主页视频开启时预取,避免为关闭视频的部署浪费带宽。
+    prefetchMainBgVideo() {
+      if (!this.ui.mainBgVideo || !mainBgVideo) return;
+      const link = document.createElement("link");
+      link.rel = "prefetch";
+      link.as = "video";
+      link.href = mainBgVideo;
+      document.head.appendChild(link);
+    },
   },
 };
 </script>

+ 1 - 1
src/views/Main.vue

@@ -5,7 +5,7 @@
     </template>
 
     <template #background>
-      <div class="bg-image"></div>
+      <div class="bg-image" v-if="!ui.mainBgVideo"></div>
       <video v-if="ui.mainBgVideo" class="bg-video" autoplay muted loop playsinline>
         <source src="@/assets/main/main-bg.mp4" type="video/mp4" />
       </video>