基于vue-skeleton-webpack-plugin的骷髅屏实战

前言

对于目前正在做的项目，登录需要跳转到别人的页面，导致重定向很多。需要优化白屏时间，所以使用骨架屏。不过这次用的骨架屏不是自动生成的，而是自己打字的风格。一步一步，从简单的开始。

首先，效果图：

什么是骨架屏幕

骨架屏，英文Skeleton screen，是指页面开始渲染前的白屏时间，其中用户首先看到要显示页面的“骨架”，然后在页面渲染完成后进行替换，起到从白屏到渲染完成的过渡作用。它可以有效减少用户的感知时间，让用户“感觉”到打开页面的速度更快(相比完整的白屏时间)。

实现

本文使用开源的Webpack插件Vue-skeleton-webpack-plugin为Vue项目添加骨架屏幕。

由于骨架屏的要求不同，对应的代码也会不同。本文实现的骨架屏是一个基于Vue-cli 3.x的项目，根据不同的路线显示不同的骨架屏。其他用途请参考开源插件。

我们开始吧。表面：

首先是安装插件：

npm安装vue-skeleton-web pack-plugin vue . config . js

安装后在vue.config.js中进行以下配置：

const SkeletonWebpackPlugin=require(' vue-skeleton-web pack-plugin ')模块. exports={ configurewebpack k :(config)={ config . plugins . push(new SkeletonWebpackPlugin({ webpackconfig : { entry : { app : path . join(_ dirname，/src/骨骼/骨骼。JS')}}，//spa是压缩注入HTML的JS代码minimize:true，//渲染时服务器是否需要向控制台输出信息quiet: true，//根据路由，显示骨架屏幕router: {mode:' history '、route: [{path3360'/'、骨架id:' skeleton-home'}、{path3360'/message '。skeleton id : ' skeleton-message ' }]}} }，css : {//使用CSS将插件mini-css-extract-plugin分开，否则skeleton screen组件中的样式将不起作用，extract3360为true，} }其中skeleton.js是我们的skeleton screen的入口，我们稍后会创建它。我们先来看配置项路由器。

路由器配置决定了每条路由路径对应的骨架屏幕。

Router.mode充满了路由模式，可以从history | hash中选择两个值。router.routes填写路由数组，其中path对应vue-router中页面的路径，skeletonId是skeleton screen的Id，后面会解释。骷髅. js

配置完成后，创建一个新的框架屏幕portal skeleton.js

//src/skeleton/skeleton.js从“vue”导入vue//import skeleton screen component从“home”导入骨架。/skeleton/skeleton home.vue“从导入骨架消息”。/skeletonMessage . Vue ' export default new Vue({ components 3360 { skeleton Home，skeleton Message，}，template : ` div skeleton Home id=' skeleton-Home ' style=' display : none '/skeleton Message id=' skeleton-Message ' style=' display : none '/div ` })在上面的代码中，引入的两个组件分别对应主页和消息页面的骨架屏幕，组件的id对应.

粘贴一个骨架屏幕组件的代码：

//skeletonmessage . vuetemplate div class=' skeleton-block ' div class=' sk-loan list-header-BG '/div s-messageItem/s-messageItem/s-messageItem/s-messageItem//div/templatescriptimport messageItem from '。/components/s-messageListItem ' export default { name : ' skeletonMessage '，components 3360 { ' s-messageItem ' : messageItem } }/script style scoped . skeleton-block { width :100%；高度： 100 VH；}.sk-LoanList-header-BG { height :88 px；背景# 2954D0}/style其实是一个非常常见的Vue组件。只需在组件中编写所需的骨架屏幕样式。可重用的地方可以细分为组件。向路线添加骨架消息以查看效果：

现在骨架屏已经准备好了，不是很简单吗？

效果显示

在这里模拟移动访问环境，在Chrome DevTools中输入Performance先进行设置。

运行性能：

效果：

用页面替换骨架屏幕的过程中还是有一闪而过。目前不知道这个能不能优化，正在努力。

检查性能中不同页面的显示时间：

(ps:解释一下，不知道怎么回事。跑完步后，马：变得很软.)

可以看到，在通过本地操作访问的情况下(本地访问更快)，进入页面后221ms在页面上显示骨架屏幕，然后738 ms呈现页面。

如果这里不加骨架屏，就是738ms白屏时间。我们通过骨架屏幕优化了一些白屏时间：秒。

最后的

Vue-skeleton-webpack-plugin是一个比较初级的骨架屏幕方案，相信大家马上就能想到很多缺点。例如：

您需要手动编写骨架屏幕的样式。不同尺寸骨架屏幕样式的响应。界面更改后，需要手动修改对应的骨架画面。在我的项目中，postss-px2mrem自动将px转换为rem，避免了一些缺点。

其他方法

此外，还有许多使用骨架屏幕的方法：

页面-框架-网络包-插件饿了。自动生成骨架屏幕的开源插件。

使用base64图片作为骨架屏幕，在制作设计稿时让UI顺便画出骨架屏幕。

参考：https://www.jb51.net/article/166912.htm

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。