基于 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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
三种方式获取XMLHttpRequest对象
Apr 21 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现简单计算器
Nov 22 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
Jun 29 Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
JS学习笔记之原型链和利用原型实现继承详解
May 29 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 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
追求程序速度,而不是编程的速度
2008/04/23 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
php自定文件保存session的方法
2014/12/10 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
php安装swoole扩展的方法
2015/03/19 PHP
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
jquery获取easyui日期控件的值实现方法
2016/11/09 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python切割图片的示例
2020/11/12 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
Hunkemöller瑞士网上商店:欧洲最大的内衣品牌之一
2018/12/03 全球购物
《一件运动衫》教学反思
2014/02/19 职场文书
党员教师工作决心书
2014/03/13 职场文书
党支部公开承诺书
2014/03/28 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
责任书范本
2014/08/25 职场文书
查摆问题整改措施
2014/10/24 职场文书
2014年路政工作总结
2014/12/10 职场文书
行政文员岗位职责
2015/02/04 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
你知道Java Spring的两种事务吗
2022/03/16 Java/Android
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫