首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 ，欢迎查阅~

Vue页面骨架屏注入方法

- Author -

mrr

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Javascript 遍历对象中的子对象
Jul 03 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jquery获取当前点击对象的value方法
Feb 28 Javascript
js选择并转移导航菜单示例代码
Aug 19 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
vue.js入门教程之基础语法小结
Sep 01 Javascript
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 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
ICOM(2) R71E(1) 胆机(1) DE1102(1) SONY600GR(1) DE1105(1) R72E(1) WR-800F(1) DE1107(3) R9700(1)
You might like
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP动态分页函数，PHP开发分页必备啦
2011/11/07 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP 使用memcached简单示例分享
2015/03/05 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JavaScript 字符串乘法
2009/08/20 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
PHPExcel中的一些常用方法汇总
2015/01/23 Javascript
js简单实现竖向tab选项卡的方法
2015/05/04 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
es6数值的扩展方法
2019/03/11 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
vue.js实现h5机器人聊天（测试版）
2020/07/16 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[02:16]2018年度CS GO最具人气选手-完美盛典
2018/12/16 DOTA
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
解决python opencv无法显示图片的问题
2018/10/28 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
tensorflow tf.train.batch之数据批量读取方式
2020/01/20 Python
python实现输入三角形边长自动作图求面积案例
2020/04/12 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
详解python的变量缓存机制
2021/01/24 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
美国名牌手表折扣网站：Jomashop
2020/05/22 全球购物
欧姆龙医疗欧洲有限公司：Omron Healthcare Europe B.V
2020/06/13 全球购物
班会关于环保演讲稿
2013/12/29 职场文书
给老师的一封建议书
2014/03/13 职场文书
英文请假条
2014/04/11 职场文书