1 问题描述
在 Vue3 项目中，有时候会出现图片视频加载缓慢、首屏加载白屏的问题
2 原因分析
通常是由以下原因导致的：
图片或视频格式不当：如果图片或视频格式选择不当，比如选择了无损压缩格式，可能会导致文件大小过大，从而影响加载速度。
页面中同时加载了大量的图片和视频，导致请求次数过多，网络传输速度受限，从而影响页面加载速度。
页面中的图片和视频没有进行优化处理，比如没有进行压缩、没有使用 CDN 加速等。
页面的 HTML、CSS、JavaScript 代码没有进行优化，比如没有使用 webpack 进行打包、没有使用代码分割技术等，导致页面加载时间过长。
页面中的图片和视频没有使用懒加载技术，导致页面一次性加载过多的资源，从而导致页面加载速度变慢。
网络状况不佳，比如网络延迟、带宽受限等，都可能导致图片和视频加载缓慢。
服务器响应时间过长：如果服务器响应时间过长，会导致页面请求资源的时间变慢，从而影响页面加载速度。
使用了不稳定的第三方库：如果使用了不稳定的第三方库或者组件，可能会导致页面加载速度变慢。
浏览器缓存策略不当：如果浏览器缓存策略设置不当，可能会导致浏览器重复请求资源，从而影响页面加载速度。
网络安全策略较为严格：如果网络安全策略较为严格，可能会导致浏览器请求资源时遇到一些限制，从而影响页面加载速度。
因此，在开发 Vue3 项目时，需要注意对图片和视频进行优化处理，减少请求次数，使用懒加载技术，优化代码等，来提升页面加载速度，避免出现加载缓慢、首屏加载白屏的问题。
3 解决方案
图片和视频加载缓慢、导致首屏加载白屏的问题，通常可以从以下几个方面入手来解决：
- 图片和视频的优化
- 懒加载
- 骨架屏
- 代码优化
3.1 图片和视频的优化
可以通过图片压缩、视频压缩等技术来减小文件大小，从而提高加载速度。同时，还可以通过 CDN 加速来加快资源加载速度。
可以从以下几个方法入手：
- 压缩图片或视频
- 选择合适的图片或视频格式
- 使用图片或视频 CDN 加速
- 使用懒加载技术
3.1.1 压缩图片或视频
可以使用图片或视频压缩工具，将文件大小压缩至合适的大小。对于图片，可以使用在线图片压缩工具或者 Photoshop 等图片编辑软件进行压缩；对于视频，可以使用视频压缩软件，如 HandBrake 等进行压缩。
压缩工具推荐
以下是几个常用的在线图片压缩工具：
- TinyPNG（tinypng.com）
TinyPNG 是一个免费的在线图片压缩工具，可以将 PNG 和 JPEG 格式的图片压缩至合适的大小，而且不会影响图片质量。
- Compressor.io（compressor.io）
Compressor.io 是一个免费的在线图片压缩工具，可以压缩 JPEG、PNG、SVG 和 GIF 等格式的图片。它可以将图片压缩至较小的大小，而且不会影响图片质量。
- Kraken（kraken.io）
Kraken 是一个在线图片优化和压缩服务，可以将 JPEG、PNG 和 GIF 等格式的图片压缩至最小的文件大小。Kraken 还提供了 API 接口，可以方便地集成到项目中。
- ImageOptim（imageoptim.com）
ImageOptim 是一个免费的图片优化工具，它可以自动压缩 JPEG、PNG 和 GIF 等格式的图片，并且可以自动删除图片中的元数据和不必要的信息，从而减小文件大小。
3.1.2 选择合适的图片或视频格式
选择合适的图片或视频格式也可以减小文件大小。例如，对于图片，可以选择 JPEG 或者 WebP 格式，对于视频，可以选择 H.264 或者 H.265 格式。
3.1.3 使用图片或视频 CDN 加速
可以使用图片或视频 CDN 加速，将图片或视频资源分布在全球各地的 CDN 节点上，从而加快资源的传输速度，提高页面加载速度。
3.1.4 使用懒加载技术
可以使用懒加载技术，将图片或视频的加载延迟到用户需要访问它们时再加载，从而减少页面一次性请求过多的资源，提高页面加载速度。
3.2 懒加载
使用懒加载技术，可以将图片和视频的加载延迟到用户需要访问它们时再加载，从而减少页面一次性加载过多的资源，提高首屏加载速度。
以下是使用懒加载技术实现图片和视频懒加载的方法：
使用 Intersection Observer API
使用 Intersection Observer API
Intersection Observer API 是一种新的浏览器 API，可以监听指定元素是否进入了视口，从而触发回调函数。
可以通过监听图片或视频元素是否进入了视口，从而触发加载图片或视频的操作。
使用示例
当然可以，下面是一个使用 Intersection Observer API 实现图片懒加载的 Vue 3 示例：
在组件中引入 Intersection Observer API
在 Vue 3 中，可以通过在组件中使用
onMounted钩子函数来引入 Intersection Observer API：<template> <img v-for="image in images" :key="image.id" :src="image.placeholder" :data-src="image.src" alt=""> </template> <script> import { onMounted } from 'vue'; export default { name: 'LazyLoadImages', data() { return { images: [ { id: 1, src: 'path/to/image1.jpg', placeholder: 'path/to/placeholder1.jpg' }, { id: 2, src: 'path/to/image2.jpg', placeholder: 'path/to/placeholder2.jpg' }, // ... ] }; }, setup() { onMounted(() => { // 创建 IntersectionObserver 实例 const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { const lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.removeAttribute('data-src'); observer.unobserve(lazyImage); } }); }); // 监听图片元素 const lazyImages = document.querySelectorAll('img[data-src]'); lazyImages.forEach(image => { observer.observe(image); }); }); } }; </script>在上面的示例中，通过
onMounted钩子函数创建了 IntersectionObserver 实例，并在其中监听了所有带有 "data-src" 属性的图片元素。当图片元素进入视口时，我们通过
isIntersecting属性判断图片是否进入了视口，如果进入了视口就将 "data-src" 属性的值赋给 "src" 属性，从而加载图片资源，同时移除 "data-src" 属性，避免重复加载。最后，通过
unobserve方法停止监听图片元素。这样，就成功地使用 Intersection Observer API 实现了图片的懒加载。
使用第三方库
除了使用 Intersection Observer API，还可以使用一些第三方库来实现图片和视频的懒加载，
如 LazyLoad、Lozad.js、LazyLoad-xt 等。这些库可以更快速地实现懒加载效果，并提供了更多的配置选项，例如触发懒加载的条件、动画效果等。具体使用方法可以参考它们的官方文档。
使用示例
当然可以，以下是一个使用 LazyLoad 库实现图片懒加载的 Vue 3 示例：
安装和引入 LazyLoad 库
在终端中安装 LazyLoad 库：
npm install lazyload --save然后，在 Vue 3 组件中引入 LazyLoad 库：
<template> <img v-for="image in images" :key="image.id" :src="image.placeholder" data-src="image.src" alt=""> </template> <script> import LazyLoad from 'lazyload'; export default { name: 'LazyLoadImages', data() { return { images: [ { id: 1, src: 'path/to/image1.jpg', placeholder: 'path/to/placeholder1.jpg' }, { id: 2, src: 'path/to/image2.jpg', placeholder: 'path/to/placeholder2.jpg' }, // ... ] }; }, mounted() { // 初始化 LazyLoad const lazyLoadInstance = new LazyLoad({ elements_selector: 'img[data-src]', threshold: 0, // 配置选项 }); // 手动触发加载 lazyLoadInstance.update(); } }; </script>在上面的示例中，
先通过
npm install命令安装了 LazyLoad 库，并在组件中引入了该库。然后，在组件的
mounted钩子函数中初始化了 LazyLoad 并传入了图片元素的选择器，以及其它一些配置选项。最后，通过
update方法手动触发图片的加载。
这样，就成功地使用 LazyLoad 库实现了图片的懒加载。
除了图片懒加载，LazyLoad 库还可以用于懒加载视频、背景图等资源。具体使用方法可以参考 LazyLoad 的官方文档。
3.3 骨架屏
骨架屏（Skeleton Screen）是一种页面加载优化的技术，可以在页面加载过程中显示一个简单的灰色框架，代替还未加载的内容。骨架屏可以提高用户体验，让用户感觉页面加载速度更快，同时也可以减少用户的焦虑感。
在 Vue 3 中，可以使用一些第三方库来实现骨架屏效果，例如 vue-skeleton-webpack-plugin、vue-content-loader、vue-loading-skeleton 等。
3.3.1 如何在Vue 3中使用vue-content-loader实现骨架屏效果？
vue-content-loader是一个 Vue.js 组件库，可以帮助我们实现骨架屏效果。它提供了多种预定义的 SVG 形状，可以快速生成骨架屏模板，并且可以自定义颜色、大小、动画等。以下是在 Vue 3 中使用
vue-content-loader实现骨架屏效果的步骤：
3.3.1.1 安装和导入 vue-content-loader
在终端中使用 npm 安装
vue-content-loader：npm install vue-content-loader然后在需要使用的组件中导入
SkeletonLoader组件：import { SkeletonLoader } from 'vue-content-loader';
3.3.1.2 创建骨架屏模板
在模板中使用
SkeletonLoader组件，并通过type属性指定要使用的 SVG 形状。例如，要使用矩形形状可以这样写：<template> <div> <SkeletonLoader :width="300" :height="200" type="rect" /> </div> </template>
3.3.1.3 自定义骨架屏模板
可以通过
vue-content-loader提供的属性来自定义骨架屏模板的颜色、大小、动画等。例如，要改变矩形形状的颜色和大小可以这样写：<template> <div> <SkeletonLoader :width="300" :height="200" type="rect" :rect="{ rx: 5, ry: 5 }" :speed="1" :primaryColor="'#f3f3f3'" :secondaryColor="'#ecebeb'" /> </div> </template>在上面的代码中，我们通过
rect属性设置了矩形的圆角半径，通过speed属性设置了动画速度，通过primaryColor和secondaryColor属性设置了骨架屏的颜色。
以上就是在 Vue 3 中使用
vue-content-loader实现骨架屏效果的基本步骤。需要注意的是，vue-content-loader组件库提供了多种预定义的 SVG 形状，你可以根据需求选择合适的形状，并通过属性来自定义骨架屏的样式和动画。
3.3.2 使用 vue-skeleton-webpack-plugin 实现骨架屏的示例
vue-skeleton-webpack-plugin是一个 Webpack 插件，可以帮助我们在打包过程中生成骨架屏模板，并自动注入到 HTML 文件中。以下是使用
vue-skeleton-webpack-plugin实现骨架屏的示例：
3.3.2.1 安装和配置 vue-skeleton-webpack-plugin
在终端中使用 npm 安装
vue-skeleton-webpack-plugin：npm install vue-skeleton-webpack-plugin然后在 Vue 项目的
vue.config.js文件中添加以下配置：const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin'); module.exports = { configureWebpack: { plugins: [ new VueSkeletonWebpackPlugin({ webpackConfig: { entry: { app: './src/skeleton.js' // 指定骨架屏入口文件 } }, insertAfter: '<div id="app"></div>', // 骨架屏注入位置 minimize: true, quiet: true }) ] } };在上面的示例中，我们指定了骨架屏的入口文件为
./src/skeleton.js，并通过insertAfter属性指定了注入位置。
3.3.2.2 创建骨架屏模板
在项目中创建骨架屏模板，可以使用
vue-content-loader或其他骨架屏工具来生成模板。例如，创建了一个
Skeleton.vue组件来定义骨架屏模板：<template> <div> <SkeletonLoader :width="300" :height="200" type="rect" :rect="{ rx: 5, ry: 5 }" :speed="1" :primaryColor="'#f3f3f3'" :secondaryColor="'#ecebeb'" /> </div> </template> <script> import { SkeletonLoader } from 'vue-content-loader'; export default { name: 'Skeleton', components: { SkeletonLoader } }; </script>
3.3.2.3 创建骨架屏入口文件
在项目中创建骨架屏入口文件
skeleton.js，用于生成骨架屏模板。例如，在
skeleton.js中创建了一个 Vue 实例，使用Skeleton组件作为根组件：import Vue from 'vue'; import Skeleton from './components/Skeleton.vue'; new Vue({ render: h => h(Skeleton) }).$mount('#app');在上面的代码中，通过
render函数将Skeleton组件渲染到 DOM 中的#app元素上。
3.3.2.4 注入骨架屏模板到 HTML 文件中
在 HTML 文件中，使用
vue-skeleton-webpack-plugin提供的Skeleton标签来注入骨架屏模板。例如，在
public/index.html文件中添加以下代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My App</title> </head> <body> <Skeleton></Skeleton> <div id="app"></div> </body> </html>在上面的代码中，我们在
Skeleton标签中注入了骨架屏模板，并将真实内容放在app标签中。
3.3.2.5 打包项目并查看效果
在终端中运行以下命令打包项目：
npm run build打包完成后，打开生成的
index.html文件，即可看到骨架屏效果。在加载真实内容之前，页面会显示骨架屏模板，提升用户体验。
3.4 代码优化
在代码优化时，需要综合考虑多个方面，包括性能、可读性、可维护性等。
下面是一些常见的代码优化方式及其结果问题：
- 懒加载/按需加载
- 缓存机制
- 代码压缩和合并
- 其他优化方式
3.4.1 懒加载/按需加载
懒加载/按需加载是指将页面或模块的加载推迟到需要时再进行，以减少初始加载时间和网络请求次数，提高页面性能。然而，在使用懒加载/按需加载时，可能会出现以下问题：
- 首次加载时，用户可能需要等待更长时间才能看到页面内容。
- 如果按需加载的模块过多，可能会出现过多的网络请求，导致页面加载速度变慢。
- 懒加载/按需加载的代码可能会增加复杂度，降低代码的可读性和可维护性。
3.4.2 缓存机制
缓存机制是指将一些静态资源（如图片、CSS、JS 等）缓存在客户端，以减少网络请求次数，提高页面性能。然而，在使用缓存机制时，可能会出现以下问题：
- 如果缓存时间过长，可能会导致用户无法看到最新的内容。
- 如果缓存时间过短，可能会导致用户频繁地重新请求资源，降低页面性能。
- 缓存机制可能会对服务器和客户端产生额外的负担，增加服务器和客户端的开销。
3.4.3 代码压缩和合并
代码压缩和合并是指将多个 JS 或 CSS 文件压缩为一个文件，并将其中的空格、注释等无关字符删除，以减小文件大小，提高页面性能。然而，在使用代码压缩和合并时，可能会出现以下问题：
- 如果压缩和合并的文件过大，可能会导致文件下载时间过长，影响页面性能。
- 代码压缩和合并可能会增加复杂度，降低代码的可读性和可维护性。
- 如果压缩和合并的文件不够灵活，可能会导致无法对不同的页面进行定制和优化。
3.4.4 其他优化方式
除了上述方式外，还有一些其他的代码优化方式，如使用更高效的算法或数据结构、减少重绘和回流、优化图片大小和格式等。这些优化方式的效果和问题也各不相同，需要根据具体情况进行选择和评估。
综上所述，代码优化需要综合考虑多个方面，不能只追求性能，还要注意代码的可读性和可维护性，以确保代码质量和用户体验的均衡。
3.4.5 示例
下面是一个代码优化前后的示例对比：
假设有一个需求，需要在页面上显示一组商品列表，每个商品包含图片、标题、描述、价格等信息。
可以使用 Vue.js 来实现该需求，如下所示：
<template> <div> <h2>商品列表</h2> <ul> <li v-for="(item, index) in items" :key="index"> <img :src="item.image" :alt="item.title"> <h3>{ { item.title }}</h3> <p>{ { item.description }}</p> <span>￥{ { item.price }}</span> </li> </ul> </div> </template> <script> export default { data() { return { items: [] }; }, created() { fetch('https://api.example.com/products') .then(response => response.json()) .then(data => { this.items = data; }); } }; </script>在上面的代码中，使用了 Vue.js 的模板语法来创建商品列表，并通过
fetch方法从后端 API 获取商品数据。然而，在实际应用中，该代码存在一些性能问题，可以进行优化。
下面是一个针对该代码的优化方案：
<template> <div> <h2>商品列表</h2> <ul> <li v-for="(item, index) in items" :key="index"> <img :src="item.image" :alt="item.title"> <h3>{ { item.title }}</h3> <p>{ { item.description }}</p> <span>￥{ { item.price }}</span> </li> </ul> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [], loading: true }; }, async created() { try { const response = await axios.get('https://api.example.com/products'); this.items = response.data; } catch (error) { console.error(error); } finally { this.loading = false; } } }; </script>在上面的优化方案中，使用了以下优化方式：
- 使用
axios替换fetch，以提高网络请求的稳定性和可读性。- 将
created钩子函数改为异步函数，并使用async/await语法简化异步代码，以提高代码可读性。- 添加
loading变量，用于在数据加载完成前显示加载动画，以提高用户体验。通过以上优化，可以提高代码的性能、可读性和可维护性，从而提高应用的质量和用户体验。
3.5 如何设置浏览器缓存策略以提高页面加载速度？
设置浏览器缓存策略可以减少浏览器重复请求资源，从而提高页面加载速度。可以通过在 HTTP 响应头中设置缓存策略来实现。
以下是一些常见的缓存策略设置方法：
- 设置强缓存
- 设置协商缓存
3.5.1 设置强缓存
强缓存是指浏览器在一定时间内直接从本地缓存中获取资源，而不需要向服务器发送请求。可以通过设置 "Expires" 或者 "Cache-Control" 响应头来设置强缓存时间，如下所示：
- Expires：设置过期时间，例如 "Expires: Wed, 21 Oct 2023 07:28:00 GMT"
- Cache-Control：设置缓存策略，例如 "Cache-Control: max-age=3600"，表示资源在 3600 秒内有效。
3.5.2 设置协商缓存
协商缓存是指浏览器在过期时间后，向服务器发送请求，服务器会根据资源的 ETag 或者 Last-Modified 等信息，判断资源是否发生变化。如果资源没有发生变化，服务器会返回 304 状态码，告诉浏览器可以直接使用本地缓存。可以通过设置 "Last-Modified" 和 "ETag" 响应头来设置协商缓存，如下所示：
- Last-Modified：表示资源的最后修改时间，例如 "Last-Modified: Wed, 21 Oct 2023 07:28:00 GMT"
- ETag：表示资源的唯一标识符，例如 "ETag: W/1234567890"
注意，设置缓存策略时需要根据具体情况进行设置，过长的缓存时间可能会导致资源更新不及时，而过短的缓存时间则可能会影响页面加载速度。建议根据实际情况进行调整。
