vue骨架屏实现方式(转载,作者:jrainlau)
Vue 页面骨架屏注入实践
作者:jrainlau
segmentfault.com/a/1190000014832185
作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页面loading状态的展示,主流的主要有loading图和进度条两种。除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让SPA用上骨架屏呢?这就是这篇文章将要探讨的问题。
文章相关代码已经同步到Github,欢迎查阅~
一、何为骨架屏
简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。
这个技术在一些以内容为主的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页面实现骨架屏,已经有了一个很清晰的思路——在 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
字符串的功能,来完成骨架屏的注入,流程如下:
四、方案实现
根据流程图,我们还需要在根目录新建一个 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.entry.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骨架屏实现方式(转载,作者:jrainlau)相关推荐
- vue骨架屏以及seo优化
参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...
- (亲测)vue-cli项目添加骨架屏多种方式,自动生成骨架屏
vue-cli项目首页加载缓慢想要使用骨架屏效果,经过几天的踩坑,这里学习并记录一下vue项目自动生成骨架屏方法. 添加骨架屏,其优势在于: 写于HTML文件中,独立于Vue框架,节省了JS加载时间+ ...
- vue骨架屏、时间选择器、轮播图。。你想要的这里全都有
骨架屏.时间选择器.轮播图..你想要的这里全都有,没有就补.补.补 项目伊始,秉承能自己写就不用额外install的原则,提取了一些项目中时常要用到的公用组件.插件和样式,github地址:https ...
- Vue中实现骨架屏的多种方式
vue-cli项目首页加载缓慢想要使用骨架屏效果,经过几天的实践,这里学习并记录一下vue项目自动生成骨架屏方法. 前言:骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展 ...
- Vue页面骨架屏(一)
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
- vue 浏览器调试 样式如何定位样式_Vue项目骨架屏注入实践和方法总结
相比于早些年前后端代码紧密耦合.后端工程师还得写前端代码的时代,如今已发展到前后端分离,这种开发方式大大提升了前后端项目的可维护性与开发效率,让前后端工程师关注于自己的主业.然而在带来便利的同时,也带 ...
- 骨架屏技术讲解以及如何在Vue中实现骨架屏
骨架屏技术讲解以及如何在Vue中实现骨架屏 写在前面 骨架屏是什么 如何实现(原理分析) 一个生动的例子 实现方式(具体实现) 方案一.在模版中来实现骨架屏 方案二.使用一个Base64的图片来作为骨 ...
- vue中获取到的为什么图片地址会自动拼接上localhost:8080_前端骨架屏自动生成方案(很实用!收藏)...
来源:花满楼 https://zhuanlan.zhihu.com/p/74403911 什么是骨架屏? 什么是骨架屏呢?骨架屏(Skeleton Screen)是指在页面数据加载完成前,先给用户展示 ...
- 骨架屏 之 Vue SSR(快捷简易版本解决方案)
一. 骨架屏简介 简单来说, 骨架屏就是填充了背景等特效的真实页面手稿轮廓图. 它可以是精确/粗略的描述了页面各个元素大小,形状,位置占位的一种页面真实数据渲染加载前的排版. 目的是加载页面过程中给用 ...
最新文章
- 20+个可重复使用的jQuery代码片段
- Eclipse调试Java的10个技巧【转】
- HTTP的同源策略与跨域资源共享(CORS)机制
- 传阿里旗下蚂蚁集团拟上市集资300亿美元,最快9月IPO
- Apk文件结构, Dex反编译
- 省赛热身赛之Median
- 前馈神经网络中的前馈_前馈神经网络在基于趋势的交易中的有效性(1)
- linux: 批量修改文件夹及文件夹下文件的名字
- 「雕爷学编程」Arduino动手做(24)——水位传感器模块
- Request header field content-type is not allowed by Access-Control-Allow-Headers(请求头设置问题)
- html文档元素两部分,html元素
- 【LaTeX】矢量图转为pdf格式(为了将高清矢量图插入LaTeX)
- 微分方程matlab绘图,用matlab解微分方程组并作图
- Android源码 app预制带so和assets文件的aar包(sdk)
- 邮箱传大文件怎样快_5款好用的企业邮箱推荐
- 【Linux 内核 内存管理】内存映射相关数据结构 ③ ( vm_area_struct 结构体成员分析 | shared 成员 | anon_vma_chain 成员 | anon_vma 成员 )
- js获取最大整数的方法
- c# 画刻度尺(支持缩放)
- 为什么说选择云服务器更有优势?
- 进阶无人驾驶—百度Apollo规划技术介绍
热门文章
- java 自定义配置文件,读取配置
- 来啊,来魔改啊,人生重开模拟器一键托管上线
- linux 系统起别名
- mie散射 matlab,基于MATLAB与LabVIEW的 Mie散射参数分析系统
- oracle 表名拼接_oracle_根据表名拼装语句
- 《通信统一架构OPC UA实践》 - 阅读笔记 1 工业4.0基础与OPC UA的实践
- Python语法解析器PLY——lex and yacc in Python - 娄振林专栏 - 博客频道 - CSDN.NET
- Linux动态查看时间
- 会计电算化的过程 实质上是用计算机,湖北会计电算化理论试题1
- 【SAP-MM】可以先开发票再收货吗?