Vue页面骨架屏注入方法


Posted in Javascript onMay 13, 2018

作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页面loading状态的展示,主流的主要有loading图和进度条两种。除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让SPA用上骨架屏呢?这就是这篇文章将要探讨的问题。

文章相关代码已经同步到 Github ,欢迎查阅~

一、何为骨架屏

简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。

Vue页面骨架屏注入方法 

这个技术在一些以内容为主的APP和网页应用较多,接下来我们以一个简单的Vue工程为例,一起探索如何在基于Vue的SPA项目中实现骨架屏。

二、分析Vue页面的内容加载过程

为了简单起见,我们使用 vue-cli 搭配 webpack-simple 这个模板来新建项目:

vue init webpack-simple vue-skeleton

这时我们便获得了一个最基本的Vue项目:

├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ └── main.js
├── index.html
└── webpack.conf.js

安装完了依赖以后,便可以通过 npm run dev 去运行这个项目了。但是,在运行项目之前,我们先看看入口的html文件里面都写了些什么。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>vue-skeleton</title>
 </head>
 <body>
 <div id="app"></div>
 <script src="/dist/build.js"></script>
 </body>
</html>

可以看到,DOM里

面有且仅有一个 div#app ,当js被执行完成之后,此 div#app 会被 整个替换掉 ,因此,我们可以来做一下实验,在此div里面添加一些内容:

<div id="app">
 <p>Hello skeleton</p>
 <p>Hello skeleton</p>
 <p>Hello skeleton</p>
</div>

打开chrome的开发者工具,在 Network 里面找到 throttle 功能,调节网速为“Slow 3G”,刷新页面,就能看到页面先是展示了三句“Hello skeleton”,待js加载完了才会替换为原本要展示的内容。

Vue页面骨架屏注入方法 

现在,我们对于如何在Vue页面实现骨架屏,已经有了一个很清晰的思路——在 div#app 内直接插入骨架屏相关内容即可。

三、易维护的方案

显然,手动在 div#app 里面写入骨架屏内容是不科学的,我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里,我们当然希望所谓的骨架屏也是一个 .vue 文件,它能够在构建时由工具自动注入到 div#app 里面。

首先,我们在 /src 目录下新建一个 Skeleton.vue 文件,其内容如下:

<template>
 <div class="skeleton page">
 <div class="skeleton-nav"></div>
 <div class="skeleton-swiper"></div>
 <ul class="skeleton-tabs">
 <li v-for="i in 8" class="skeleton-tabs-item"><span></span></li>
 </ul>
 <div class="skeleton-banner"></div>
 <div v-for="i in 6" class="skeleton-productions"></div>
 </div>
</template>
<style>
.skeleton {
 position: relative;
 height: 100%;
 overflow: hidden;
 padding: 15px;
 box-sizing: border-box;
 background: #fff;
}
.skeleton-nav {
 height: 45px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-swiper {
 height: 160px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-tabs {
 list-style: none;
 padding: 0;
 margin: 0 -15px;
 display: flex;
 flex-wrap: wrap;
}
.skeleton-tabs-item {
 width: 25%;
 height: 55px;
 box-sizing: border-box;
 text-align: center;
 margin-bottom: 15px;
}
.skeleton-tabs-item span {
 display: inline-block;
 width: 55px;
 height: 55px;
 border-radius: 55px;
 background: #eee;
}
.skeleton-banner {
 height: 60px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-productions {
 height: 20px;
 margin-bottom: 15px;
 background: #eee;
}
</style>

接下来,再新建一个 skeleton.entry.js 入口文件:

import Vue from 'vue'
import Skeleton from './Skeleton.vue'
export default new Vue({
 components: {
 Skeleton
 },
 template: '<skeleton />'
})

在完成了骨架屏的准备之后,就轮到一个关键插件 vue-server-renderer 登场了。该插件本用于服务端渲染,但是在这个例子里,我们主要利用它能够把 .vue 文件处理成 html 和 css 字符串的功能,来完成骨架屏的注入,流程如下:

Vue页面骨架屏注入方法 

四、方案实现

根据流程图,我们还需要在根目录新建一个 webpack.skeleton.conf.js 文件,以专门用来进行骨架屏的构建。

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = {
 target: 'node',
 entry: {
 skeleton: './src/skeleton.js'
 },
 output: {
 path: path.resolve(__dirname, './dist'),
 publicPath: '/dist/',
 filename: '[name].js',
 libraryTarget: 'commonjs2'
 },
 module: {
 rules: [
 {
 test: /\.css$/,
 use: [
 'vue-style-loader',
 'css-loader'
 ]
 },
 {
 test: /\.vue$/,
 loader: 'vue-loader'
 }
 ]
 },
 externals: nodeExternals({
 whitelist: /\.css$/
 }),
 resolve: {
 alias: {
 'vue$': 'vue/dist/vue.esm.js'
 },
 extensions: ['*', '.js', '.vue', '.json']
 },
 plugins: [
 new VueSSRServerPlugin({
 filename: 'skeleton.json'
 })
 ]
}

可以看到,该配置文件和普通的配置文件基本完全一致,主要的区别在于其 target: 'node' ,配置了 externals ,以及在 plugins 里面加入了 VueSSRServerPlugin 。在 VueSSRServerPlugin 中,指定了其输出的json文件名。我们可以通过运行下列指令,在 /dist 目录下生成一个 skeleton.json 文件:

webpack --config ./webpack.skeleton.conf.js

这个文件在记载了骨架屏的内容和样式,会提供给 vue-server-renderer 使用。

接下来,在根目录下新建一个 skeleton.js ,该文件即将被用于往 index.html 内插入骨架屏。

const fs = require('fs')
const { resolve } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
// 读取`skeleton.json`,以`index.html`为模板写入内容
const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
 template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')
})
// 把上一步模板完成的内容写入(替换)`index.html`
renderer.renderToString({}, (err, html) => {
 fs.writeFileSync('index.html', html, 'utf-8')
})

注意,作为模板的 html 文件,需要在被写入内容的位置添加 <!--vue-ssr-outlet--> 占位符,本例子在 div#app 里写入:

<div id="app">
 <!--vue-ssr-outlet-->
</div>

接下来,只要运行 node skeleton.js ,就可以完成骨架屏的注入了。运行效果如下:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>vue-skeleton</title>
 <style data-vue-ssr-id="742d88be:0">
.skeleton {
 position: relative;
 height: 100%;
 overflow: hidden;
 padding: 15px;
 box-sizing: border-box;
 background: #fff;
}
.skeleton-nav {
 height: 45px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-swiper {
 height: 160px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-tabs {
 list-style: none;
 padding: 0;
 margin: 0 -15px;
 display: flex;
 flex-wrap: wrap;
}
.skeleton-tabs-item {
 width: 25%;
 height: 55px;
 box-sizing: border-box;
 text-align: center;
 margin-bottom: 15px;
}
.skeleton-tabs-item span {
 display: inline-block;
 width: 55px;
 height: 55px;
 border-radius: 55px;
 background: #eee;
}
.skeleton-banner {
 height: 60px;
 background: #eee;
 margin-bottom: 15px;
}
.skeleton-productions {
 height: 20px;
 margin-bottom: 15px;
 background: #eee;
}
</style></head>
 <body>
 <div id="app">
 <div data-server-rendered="true" class="skeleton page"><div class="skeleton-nav"></div> <div class="skeleton-swiper"></div> <ul class="skeleton-tabs"><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li></ul> <div class="skeleton-banner"></div> <div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div></div>
 </div>
 <script src="/dist/build.js"></script>
 </body>
</html>

可以看到,骨架屏的样式通过 <style></style> 标签直接被插入,而骨架屏的内容也被放置在 div#app 之间。当然,我们还可以进一步处理,把这些内容都压缩一下。改写 skeleton.js ,在里面添加 html-minifier :
...

+ const htmlMinifier = require('html-minifier')
...
renderer.renderToString({}, (err, html) => {
+ html = htmlMinifier.minify(html, {
+ collapseWhitespace: true,
+ minifyCSS: true
+ })
 fs.writeFileSync('index.html', html, 'utf-8')
})

来看看效果:

Vue页面骨架屏注入方法 

效果非常不错!至此,Vue页面接入骨架屏已经完全实现了。

如果还有任何更好的实现思路,也欢迎和我探讨,有机会我也会总结基于 React 的骨架屏注入实践,敬请期待!

文章相关代码已经同步到Github ,欢迎查阅~

Javascript 相关文章推荐
Jquery中dialog属性小记
Sep 03 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
Jan 09 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
JavaScript中数组去除重复的三种方法
Apr 22 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
BootstrapValidator验证用户名已存在(ajax)
Nov 08 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
浅谈在node.js进入文件目录的问题
May 13 #Javascript
解决node修改后需频繁手动重启的问题
May 13 #Javascript
垃圾回收器的相关知识点总结
May 13 #Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 #Javascript
深入理解js 中async 函数的含义和用法
May 13 #Javascript
如何更好的编写js async函数
May 13 #Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 #jQuery
You might like
拼音码表的生成
2006/10/09 PHP
php Memcache 中实现消息队列
2009/11/24 PHP
php中session_id()函数详细介绍,会话id生成过程及session id长度
2015/09/23 PHP
php面向对象值单例模式
2016/05/03 PHP
详解Yii2 之 生成 URL 的方法
2017/06/16 PHP
PHP strripos函数用法总结
2019/02/11 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
基于jquery的bankInput银行卡账号格式化
2012/08/22 Javascript
Angularjs中如何使用filterFilter函数过滤
2016/02/06 Javascript
深入解析JavaScript中函数的Currying柯里化
2016/03/19 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
使用python3构建文件传输的方法
2019/02/13 Python
Python 仅获取响应头, 不获取实体的实例
2019/08/21 Python
python绘制雷达图实例讲解
2021/01/03 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
副厂长岗位职责
2014/02/02 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
2014年双拥工作总结
2014/11/21 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server