骨架屏在Vue中的简单实现

为什么需要骨架屏？骨架屏其实是一项非常不错的优化，可以有效减少pwa项目在渲染dom过程中的白屏时间，相对于loading来说好处在于能让用户感受到项目是在逐步加载，对于用户的感知会显得更加流畅

我们在打开facebook的时候也可以看到这玩意儿，尽管他们很早就用上了

实现

首先先来说明一下我们使用的插件vue-skeleton-webpack-plugin，是lavas的webpack相关插件
大体分为3步:

创建骨架屏vue文件
创建skeleton的实例
在webpack的配置文件中导入skeleton实例

首先我们需要写一个能让webpack去渲染的一个骨架屏模板，就是skeleton.vue,样式可以自己想，这里就直接拿官方的demo来用了

//skeleton.vue
<template>
  <div class="skeleton-wrapper">
    <section class="skeleton-block">
      <!-- eslint-disable vue/max-len -->
    </section>
  </div>
</template>

<script>
export default {
  name: 'Skeleton',
};
</script>

<style scoped>
.skeleton-block {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
</style>

创建skeleton实例文件，导入刚刚的文件

import Vue from 'vue';
import Skeleton from './Skeleton.vue';

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

最后，在vue.config.js里面，用插件去引用实例

//这里要先把插件安装好
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
let option = {
  configureWebpack: {
    plugins: [
      //对应插件
      new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            //入口文件路径
            app: path.join(__dirname, './src/skeleton.entry.js'),
          },
        },
        //quiet 选填，在服务端渲染时是否需要输出信息到控制台
        quiet: true,
        //minimize 选填 SPA 下是否需要压缩注入 HTML 的 JS 代码
        minmize: true
      })
    ]
  },
}

反正直接照着官方库中的examples写就完了，很详细了(逃

踩过的坑

这里要说明一下，在vue-cli下，实际上vue-skeleton-webpack-plugin这个插件在非线上环境下是有坑的,skeleton的样式会渲染不出来，在官方库的issues当中已经明确被标为bug了，具体的可以看这里

参考链接

Vue项目骨架屏注入实践 — 介绍了大概的概念和几种注入方式
Vue项目骨架屏注入实践 — 腾讯老哥在思否的一篇文章，将服务端注入放到了前端来处理，使用了vue-server-renderer插件
lavas的webpack相关 — lavas是一套vue的pwa解决方案，但是我们只需要使用到相关的一个插件来完成我们想要的

updated at 2021-03-10

技术 # 前端 # vue

骨架屏在Vue中的简单实现

实现

踩过的坑

参考链接

Comments