前言
目前正在做的項目，登錄是需要跳轉到別人的頁面的，導致重定向很多，需要優化一下白屏時間，所以就用到了骨架屏，但是這次用的骨架屏不是自動生成的，還是自己敲的樣式，一步步來吧，先從簡單的用起 。
先上效果圖：
什么是骨架屏
骨架屏，英文 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的配置決定了我們各個路由路徑所對應的骨架屏。
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 ，看一下效果：
至此，現在骨架屏已經準備就緒了，是不是很簡單 。
效果展示
這邊模擬一下移動端訪問環境，先進入 Chrome DevTools 中的 Performance 進行設置。
運行 Performance：
效果：
從骨架屏替換成頁面的過程中還是有閃一下的，目前還不知道這個是否可以優化，嘗試中。
查看一下 Performance 中不同頁面展現的時間：
（ps：解釋一下，我也不知道什么情況，運行完之后就是尼:horse:這么糊...）
可以看到在通過本地運行訪問的情況下（本地訪問較快），在進入頁面后 221ms 頁面先展示骨架屏，隨后在 738ms 時完成頁面的渲染。
這里如果不加骨架屏的話就是 738ms 的白屏時間，我們已經通過骨架屏優化了一些白屏時間:surfer:。
最后
vue-skeleton-webpack-plugin 是較為初級的骨架屏方案，相信大家也可以馬上想到許多缺點。
比如：
由于在本人的項目中使用到了 postcss-px2rem 自動 px 轉 rem，所以避開了一些缺點。
其他方法
此外還有許多使用骨架屏的方法：
page-skeleton-webpack-plugin 餓了么開源的自動生成骨架屏生成插件。
用 base64 的圖片做骨架屏，就讓 UI 在出設計稿的時候順便把骨架屏也給畫了😂。
參考：
http://www.49028c.com/article/166912.htm
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
