在现代 Web 应用中，为了提高用户体验，骨架屏已经逐渐成为了一种很流行的加载动画方式。通过在页面加载的过程中先呈现一部分页面骨架，而不是一开始就呈现空白，这样能让用户获得更好的体验。那么，在 Vue SPA 应用中如何进行骨架屏的优化呢？
1. 优化图片加载
通常情况下，骨架屏中的图片都可以使用相同的占位符进行替换。我们可以使用 vue-content-placeholder 等库来处理图片的占位符。这里我们以 vue-content-placeholder 为例：
-- -------------------- ---- -------
----------
-----
---- -----------------
-------------------- --
------
---- -------
---- ----------------
------
------
-----------
--------
------ ------------------ ---- -------------------------
------ ------- -
----------- -
------------------
--
------ -
------ -
--------- ------
--------- --
-
--
-------- -
----------- -
------------- - -------------------------------
------------- - ----
-
--
--------- -
----------------
-
-
---------在上面的示例中，我们使用 v-if 来切换图片加载前和加载完成后的状态，并在 vue-content-placeholder 组件中填充图片占位符。
2. 优化字体加载
在渲染骨架屏时，为了避免字体加载失败导致的 FOIT（Flash Of Invisible Text），我们可以使用 font-display 属性来控制字体加载的优先级。常见的取值有 auto、block、swap、fallback 和 optional。
-- -------------------- ---- ------- ---------- - ------------ ----- ------ ---- ---------------------------- ------------- ----- - -- ---- ------ ------------ -- ------- -------------------------------------------------------------------
在上面的示例中，我们将字体加载优先级设为 swap，意味着在字体加载完成前，浏览器使用默认的字体来渲染文本，这样避免了 FOIT 的问题。
3. 利用组件最小化加载
在 Vue 的单页应用中，通常都是在路由切换的时候加载相应的组件。但如果组件内部的资源（如样式和图片）过多过大，会导致组件加载时间过长，进而影响网页性能。为此，我们可以使用 Vue 的 v-lazy 指令来控制组件最小化加载。
<template v-lazy>
<div>
<!-- ... -->
</div>
</template>在上面的示例中，我们使用了 v-lazy 指令来控制组件最小化加载，这样可以让网页加载更快，获得更好的用户体验。
4. 优化数据获取和渲染
我们可以使用 Vue 提供的异步组件懒加载特性，让一部分数据在组件显示时才开始渲染。这有助于减少组件初始化时的网络请求和数据处理时间。
-- -------------------- ---- -------
------ ------- -
----------- -
--------------- -- -- --
---------- -------------------------------
-------- -----------------
------ ---------------
------ ----
-------- -----
--
-
-在上面的示例中，我们使用 import 函数来异步加载组件，并使用 loading 和 error 属性指定加载和错误时的渲染组件。
另外，我们可以使用 vue-content-loader 等库来为异步组件提供预先定义好的骨架屏。
<template>
<content-loader :width="40" :height="40">
<circle cx="20" cy="20" r="20" />
</content-loader>
</template>在上面的示例中，我们使用 vue-content-loader 库提供的 <circle> 元素来预先定义圆形骨架屏。这个库提供了多种骨架屏效果以及丰富的配置选项，可以通过 GitHub 查看更多详情。
总结
在 Vue SPA 应用中进行骨架屏优化，可以大幅提升用户体验并且降低页面加载的时间，同时也需要注意适当的优化图片加载、字体加载、组件最小化加载和数据获取等方面。我们可以使用各种各样的 Vue 生态库来快速构建高性能的骨架屏，也可以使用类似于 v-lazy 的指令来延迟组件渲染，以此来提升用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a90d3d48841e989455cd65