最近做网页优化,发现页面会有一段白屏时间,给人的体验就是网页会有一闪而出的感觉,也就是我们常说的闪屏,查了一些资料,发现实现思路都是异曲同工的,就是在页面节点还没加载之前,先插一段静态网页,节点加载了再去掉这段静态代码,显示数据渲染出来界面。一般需要加骨架屏的界面,是一些动态加载数据的界面,因为数据没出来,会有一段比较长的白屏时间会给用户网加载慢的感觉。加了骨架屏,用会觉得网页加载比较快,属于一种视觉欺骗的手段吧。

下面来讲讲 vue-cli3 添骨架屏方法。

为节省时间成本,我没有自己去造轮子,而是选择了一个现成的轮子 vue-skeleton-webpack-plugin,骨架屏的实现步骤如下:

1、安装轮子的包:yarn add vue-skeleton-webpack-plugin

2、webpack 中引入该插件(vue.config.js),具体的配置项可以去看看该插件的说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');

configureWebpack: {
plugins: [
new SkeletonWebpackPlugin({
webpackConfig: {
entry: {
app: path.join(__dirname, './src/common/skeleton.js'),
},
},
minimize: true,
quiet: true,
router: {
mode: 'hash',
routes: [
{
path: '/',
skeletonId: 'skeleton-home',
},
{
path: '/home',
skeletonId: 'skeleton-home',
},
],
},
}),
],
},

3、添加一个骨架组件,skeleton.js 中引入

1
2
3
4
5
6
7
8
9
import Vue from "vue";
import Skeleton from "../components/skeletonPage.vue";

export default new Vue({
components: {
Skeleton
},
render: h => h(Skeleton)
});

4、因为在 vue-cli 里默认样式是不分离的,打包出来的骨架屏会没有样式,所以需要设置一下样式分离:

1
2
3
css: {
extract: true,
},

5、因为 vue-cli 脚手架打包出来的样式是带 tag 的,骨架的样式依然不可用,这里我是先启用样式分离,编译出 css ,然后手动去掉 tag,放到 public/index 里,再关闭样式分离,这样骨架屏就正常了。

6、按照文档做了上面这些,会发现骨架屏还是无效的,还需要修改一下 main.js 的组件挂载方式

1
2
3
4
5
6
7
8
9
10
11
12
13
const app = new Vue({
router,
components: {
App
},
render: h => h(App)
});

window.mountApp = () => {
app.$mount("#app");
};

window.mountApp();

7、此外需要注意:

  • App.vue 文件引用组件的方式不要用 router-view,改用直接引入组件

  • 首屏的组件不要懒加载,不然会有闪屏的问题

  • 目前只测试了单页应用,多页面的应用还未尝试,有待探索