基于 vue-skeleton-webpack-plugin 的骨架屏实战

时间 2019-11-06

标签基于 vue skeleton webpack plugin 骨架实战繁體版

原文原文链接

前言

目前正在作的项目，登陆是须要跳转到别人的页面的，致使重定向不少，须要优化一下白屏时间，因此就用到了骨架屏，可是此次用的骨架屏不是自动生成的，仍是本身敲的样式，一步步来吧，先从简单的用起🤝。css

先上效果图： vue

什么是骨架屏

骨架屏，英文 Skeleton screen，是指在页面开始渲染以前的白屏时间内，先让用户看到即将要展示页面的“骨架”，页面渲染完成以后再将它替换掉，起到一个从 白屏 → 渲染完成 过程当中的过渡做用，它能够有效减小用户的感知时间，让用户“感受上”认为打开页面比较快（相比较于完整的白屏时间）。webpack

实现

本文主要围绕一个开源的 Webpack 插件 vue-skeleton-webpack-plugin，来实如今 Vue 项目中加入骨架屏。git

因为项目对骨架屏的需求不一样，相应的代码也会不同。本文所实现的骨架屏是 基于 Vue-cli 3.x 搭建的项目，根据的不一样路由，显示不一样的骨架屏，如需其余用法详见开源插件。github

让咱们开始吧🏄。web

首先是安装插件：vue-router

npm install vue-skeleton-webpack-plugin
复制代码

vue.config.js

安装完成后在 vue.config.js 中作以下配置：npm

const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
module.exports = {
    configureWebpack: (config) => {
        config.plugins.push(new SkeletonWebpackPlugin({
            webpackConfig: {
                entry: {
                    app: path.join(__dirname, './src/skeleton/skeleton.js')
                }
            },
            // SPA 下是压缩注入 HTML 的 JS 代码
            minimize: true,
            // 服务端渲染时是否须要输出信息到控制台
            quiet: true,
            // 根据路由显示骨架屏
            router: {
                    mode: 'history',
                    routes: [
                        {
                            path: '/',
                            skeletonId: 'skeleton-home'
                        },
                        {
                            path: '/message',
                            skeletonId: 'skeleton-message'
                        }
                    ]
            }
        }
    },
    css: {
        // 使用 css 分离插件 mini-css-extract-plugin，否则骨架屏组件里的 <style> 不起做用，
        extract: true,
    }
}
复制代码

其中 skeleton.js 是咱们骨架屏的入口，咱们过会再建立。先看来一下其中 router 这个配置项。数组

router 的配置决定了咱们各个路由路径所对应的骨架屏。bash

router.mode 填路由模式，两个值可选 history | hash.
router.routes 填路由数组，其中 path 对应着页面在 vue-router 中的 path ，skeletonId 是骨架屏的 id，后面立刻会说明。

skeleton.js

配置完成后，新建一个骨架屏的入口 skeleton.js。

// src/skeleton/skeleton.js
import Vue from 'vue'

// 引入的骨架屏组件
import skeletonHome from './skeleton/skeletonHome.vue'
import skeletonMessage from './skeleton/skeletonMessage.vue'

export default new Vue({
    components: {
        skeletonHome,
        skeletonMessage,
    },
    template: `
        <div>
            <skeletonHome id="skeleton-home" style="display:none"/>
            <skeletonMessage id="skeleton-message" style="display:none"/>
        </div>
    `
})
复制代码

上面的代码中，引入的两个组件分别对应 首页（Home） 和 消息页（Message） 的骨架屏，其中组件的 id 对应以前在 vue.config.js 里 skeletonId 。

贴上其中一个骨架屏组件的代码：

// skeletonMessage.vue
<template>
    <div class="skeleton-block">
      <div class="sk-loanList-header-bg"></div>
      <s-messageItem/>
      <s-messageItem/>
      <s-messageItem/>
      <s-messageItem/>
    </div>
</template>

<script>
import messageItem from './components/s-messageListItem'
export default {
    name: 'skeletonMessage',
    components: {
        's-messageItem': messageItem
    }
}
</script>

<style scoped>
.skeleton-block {
    width:100%;
    height: 100vh;
}
.sk-loanList-header-bg {
    height:88px;
    background:#2954D0;
}
</style>
复制代码

其实就是很普通的一个 Vue 组件，在组件里写本身想要的骨架屏的样式便可，可复用的地方还能够再分红组件。在路由里加上 skeletonMessage ，看一下效果：