基于 vue-skeleton-webpack-plugin 的骨架屏實戰

2019-11-19 11:04:38

字體：大中小

來源：轉載

供稿：網友

前言

目前正在做的項目，登錄是需要跳轉到別人的頁面的，導致重定向很多，需要優化一下白屏時間，所以就用到了骨架屏，但是這次用的骨架屏不是自動生成的，還是自己敲的樣式，一步步來吧，先從簡單的用起。

先上效果圖：

什么是骨架屏

骨架屏，英文 Skeleton screen ，是指在頁面開始渲染之前的白屏時間內，先讓用戶看到即將要展現頁面的“骨架”，頁面渲染完成之后再將它替換掉，起到一個從 白屏 → 渲染完成 過程中的過渡作用，它可以有效減少用戶的感知時間，讓用戶“感覺上”認為打開頁面比較快（相比較于完整的白屏時間）。

實現

本文主要圍繞一個開源的 Webpack 插件 vue-skeleton-webpack-plugin ，來實現在 Vue 項目中加入骨架屏。

由于項目對骨架屏的需求不同，相應的代碼也會不一樣。本文所實現的骨架屏是 基于 Vue-cli 3.x 搭建的項目 ，根據的不同路由，顯示不同的骨架屏，如需其他用法詳見開源插件。

讓我們開始吧:surfer:。

首先是安裝插件：

npm install vue-skeleton-webpack-plugin

vue.config.js

安裝完成后在 vue.config.js 中做如下配置：

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的配置決定了我們各個路由路徑所對應的骨架屏。

router.mode 填路由模式，兩個值可選 history | hash.
router.routes 填路由數組，其中 path 對應著頁面在 vue-router 中的 path ， skeletonId 是骨架屏的 id ，后面馬上會說明。

skeleton.js

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

// src/skeleton/skeleton.jsimport 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 ，看一下效果：