基于 vue-skeleton-webpack-plugin 的骨架屏实战


Posted in Javascript onAugust 05, 2019

前言

目前正在做的项目,登录是需要跳转到别人的页面的,导致重定向很多,需要优化一下白屏时间,所以就用到了骨架屏,但是这次用的骨架屏不是自动生成的,还是自己敲的样式,一步步来吧,先从简单的用起 。

先上效果图:

基于 vue-skeleton-webpack-plugin 的骨架屏实战 

什么是骨架屏

骨架屏,英文 Skeleton screen ,是指在页面开始渲染之前的白屏时间内,先让用户看到即将要展现页面的“骨架”,页面渲染完成之后再将它替换掉,起到一个从 白屏 → 渲染完成 过程中的过渡作用,它可以有效减少用户的感知时间,让用户“感觉上”认为打开页面比较快(相比较于完整的白屏时间)。

实现

本文主要围绕一个开源的 Webpack 插件 vue-skeleton-webpack-plugin ,来实现在 Vue 项目中加入骨架屏。

由于项目对骨架屏的需求不同,相应的代码也会不一样。 本文所实现的骨架屏是 基于 Vue-cli 3.x 搭建的项目 ,根据的不同路由,显示不同的骨架屏,如需其他用法详见开源插件。

让我们开始吧:surfer:。

首先是安装插件:

npm install vue-skeleton-webpack-plugin

vue.config.js

安装完成后在 vue.config.js 中做如下配置:

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {
 configureWebpack: (config) => {
  config.plugins.push(new SkeletonWebpackPlugin({
   webpackConfig: {
    entry: {
     app: path.join(__dirname, './src/skeleton/skeleton.js')
    }
   },
   // SPA 下是压缩注入 HTML 的 JS 代码
   minimize: true,
   // 服务端渲染时是否需要输出信息到控制台
   quiet: true,
   // 根据路由显示骨架屏
   router: {
     mode: 'history',
     routes: [
      {
       path: '/',
       skeletonId: 'skeleton-home'
      },
      {
       path: '/message',
       skeletonId: 'skeleton-message'
      }
     ]
   }
  }
 },
 css: {
  // 使用 css 分离插件 mini-css-extract-plugin,不然骨架屏组件里的 <style> 不起作用,
  extract: true,
 }
}

其中 skeleton.js 是我们骨架屏的入口,我们过会再创建。先看来一下其中 router 这个配置项。

router的配置决定了我们各个路由路径所对应的骨架屏。

  • router.mode 填路由模式,两个值可选 history | hash.
  • router.routes 填路由数组,其中 path 对应着页面在 vue-router 中的 pathskeletonId 是骨架屏的 id ,后面马上会说明。

 skeleton.js

配置完成后,新建一个骨架屏的入口 skeleton.js。

// src/skeleton/skeleton.js
import Vue from 'vue'

// 引入的骨架屏组件
import skeletonHome from './skeleton/skeletonHome.vue'
import skeletonMessage from './skeleton/skeletonMessage.vue'

export default new Vue({
 components: {
  skeletonHome,
  skeletonMessage,
 },
 template: `
  <div>
   <skeletonHome id="skeleton-home" style="display:none"/>
   <skeletonMessage id="skeleton-message" style="display:none"/>
  </div>
 `
})

上面的代码中,引入的两个组件分别对应 首页(Home)消息页(Message) 的骨架屏,其中组件的 id 对应之前在 vue.config.jsskeletonId

贴上其中一个骨架屏组件的代码:

// skeletonMessage.vue
<template>
 <div class="skeleton-block">
  <div class="sk-loanList-header-bg"></div>
  <s-messageItem/>
  <s-messageItem/>
  <s-messageItem/>
  <s-messageItem/>
 </div>
</template>

<script>
import messageItem from './components/s-messageListItem'
export default {
 name: 'skeletonMessage',
 components: {
  's-messageItem': messageItem
 }
}
</script>

<style scoped>
.skeleton-block {
 width:100%;
 height: 100vh;
}
.sk-loanList-header-bg {
 height:88px;
 background:#2954D0;
}
</style>

其实就是很普通的一个 Vue 组件,在组件里写自己想要的骨架屏的样式即可,可复用的地方还可以再分成组件。 在路由里加上 skeletonMessage ,看一下效果:

基于 vue-skeleton-webpack-plugin 的骨架屏实战

至此,现在骨架屏已经准备就绪了,是不是很简单 。

效果展示

这边模拟一下移动端访问环境,先进入 Chrome DevTools 中的 Performance 进行设置。

基于 vue-skeleton-webpack-plugin 的骨架屏实战

运行 Performance:

基于 vue-skeleton-webpack-plugin 的骨架屏实战

效果:

基于 vue-skeleton-webpack-plugin 的骨架屏实战

从骨架屏替换成页面的过程中还是有闪一下的,目前还不知道这个是否可以优化,尝试中。

查看一下 Performance 中不同页面展现的时间:

基于 vue-skeleton-webpack-plugin 的骨架屏实战 

基于 vue-skeleton-webpack-plugin 的骨架屏实战

(ps:解释一下,我也不知道什么情况,运行完之后就是尼:horse:这么糊...)

可以看到在通过本地运行访问的情况下(本地访问较快),在进入页面后 221ms 页面先展示骨架屏,随后在 738ms 时完成页面的渲染。

这里如果不加骨架屏的话就是 738ms 的白屏时间,我们已经通过骨架屏优化了一些白屏时间:surfer:。

最后

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
自动最大化窗口的Javascript代码
May 22 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
Oct 25 Javascript
原生JS实现 MUI导航栏透明渐变效果
Nov 07 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
JS 自执行函数原理及用法
Aug 05 #Javascript
jQuery提示框插件SweetAlert用法分析
Aug 05 #jQuery
Nuxt.js实战和配置详解
Aug 05 #Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 #Javascript
前后端常见的几种鉴权方式(小结)
Aug 04 #Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 #Javascript
vue v-for 使用问题整理小结
Aug 04 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php中二维数组排序问题方法详解
2015/08/28 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
php xhprof使用实例详解
2019/04/15 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
滚动图片效果 jquery实现回旋滚动效果
2013/01/08 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python判断输入日期为第几天的实例
2018/11/13 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python实现爬取并分析电商评论
2020/06/19 Python
利用PyQt5+Matplotlib 绘制静态/动态图的实现代码
2020/07/13 Python
利用python 下载bilibili视频
2020/11/13 Python
python 实现数据库中数据添加、查询与更新的示例代码
2020/12/07 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
教师简历自我评价
2014/02/03 职场文书
党员承诺书格式
2014/05/21 职场文书