Vue 3 + Vite落地页项目中大型媒体文件的处理方案咨询

一、本地存src目录的利弊 #

• 好处：
  • 和项目代码一起打包部署，同域名加载无跨域问题，不用额外配置。
  • 小流量项目不用折腾云存储，省运维成本和精力。
• 坏处：
  • 40MB的媒体文件会让项目包体暴增，构建、上传部署的速度明显变慢，CI/CD流程耗时更长。
  • 同域名加载大文件会占用主站带宽，用户量突增时可能抢占JS/CSS等核心资源的带宽，导致首屏加载延迟。
  • 无法利用智能地域分发，不同地区用户的视频加载速度差异较大。

二、云存储（AWS/云服务商OSS等）的利弊 #

• 好处：
  • 自带CDN加速，用户可从就近节点获取视频，加载速度大幅提升，尤其是跨地域用户体验优化明显。
  • 主项目包体瞬间缩小，构建部署效率更高，CI/CD流程更顺畅。
  • 媒体文件带宽与主站隔离，不会影响核心资源加载优先级，用户体验更稳定。
  • 按流量计费，初期用户量少的时候成本极低，适合小项目起步阶段。
• 坏处：
  • 需要配置跨域规则，确保视频能在你的落地页域名下正常播放，避免浏览器跨域拦截。
  • 不要用YouTube嵌入，平台自带水印和推荐视频会破坏落地页纯净性，且无法精准控制静音、无控制栏这类背景视频需要的体验。

三、推荐方案 #

优先选云存储+CDN #

将不同分辨率的视频上传到云存储，开启CDN加速，设置好允许落地页域名访问的跨域规则。在Vue组件中根据设备屏幕尺寸动态加载对应视频：

<template>
  <video autoplay muted loop playsinline preload="metadata">
    <!-- 用压缩后的WebP图当封面，视频加载前显示 -->
    <img src="/path/to/cover.webp" alt="视频封面">
    <source :src="currentVideoSrc" type="video/mp4">
  </video>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const currentVideoSrc = ref('')

function setVideoSrc() {
  const width = window.innerWidth
  if (width >= 3840) {
    currentVideoSrc.value = 'https://你的CDN域名/4k-video.mp4'
  } else if (width >= 1920) {
    currentVideoSrc.value = 'https://你的CDN域名/desktop-video.mp4'
  } else if (width >= 768) {
    currentVideoSrc.value = 'https://你的CDN域名/tablet-video.mp4'
  } else {
    currentVideoSrc.value = 'https://你的CDN域名/mobile-video.mp4'
  }
}

onMounted(() => {
  setVideoSrc()
  window.addEventListener('resize', setVideoSrc)
})

onUnmounted(() => {
  window.removeEventListener('resize', setVideoSrc)
})
</script>

• preload="metadata"仅加载视频元数据，无需等待整个视频下载完成即可播放，平衡加载速度与带宽消耗。
• 添加WebP封面图，避免视频加载前出现空白，提升首屏体验。

小流量测试阶段的折中方案 #

如果暂时不想使用云存储，可将视频放到项目的public目录（不要放在src目录），Vite打包时会直接复制到dist目录，不会进行额外处理。同样采用上述动态加载逻辑，但需注意服务器带宽限制，用户量增多时可能出现加载卡顿。

四、额外优化点 #

• 进一步压缩视频：使用H.265编码（主流浏览器均支持），或适当降低码率，在画质可接受的前提下缩小体积。
• 配置缓存策略：在云存储或服务器上为视频设置Cache-Control头，比如max-age=86400，让用户第二次访问时直接读取本地缓存，无需重新下载。

内容的提问来源于stack exchange，提问作者Igor Ponso