做爲與用戶聯繫最爲密切的前端開發者,用戶體驗是最值得關注的問題。關於頁面loading狀態的展現,主流的主要有loading圖和進度條兩種。除此以外,愈來愈多的APP採用了「骨架屏」的方式去展現未加載內容,給予了用戶面目一新的體驗。隨着SPA在前端界的逐漸流行,首屏加載的問題也在困擾着開發者們。那麼有沒有一個辦法,也能讓SPA用上骨架屏呢?這就是這篇文章將要探討的問題。css
文章相關代碼已經同步到 Github,歡迎查閱~
簡單來講,骨架屏就是在頁面內容未加載完成的時候,先使用一些圖形進行佔位,待內容加載完成以後再把它替換掉。html
這個技術在一些之內容爲主的APP和網頁應用較多,接下來咱們以一個簡單的Vue工程爲例,一塊兒探索如何在基於Vue的SPA項目中實現骨架屏。前端
爲了簡單起見,咱們使用vue-cli
搭配webpack-simple
這個模板來新建項目:vue
vue init webpack-simple vue-skeleton
這時咱們便得到了一個最基本的Vue項目:node
. ├── package.json ├── src │ ├── App.vue │ ├── assets │ └── main.js ├── index.html └── webpack.conf.js
安裝完了依賴之後,即可以經過npm run dev
去運行這個項目了。可是,在運行項目以前,咱們先看看入口的html文件裏面都寫了些什麼。webpack
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>vue-skeleton</title> </head> <body> <div id="app"></div> <script src="/dist/build.js"></script> </body> </html>
能夠看到,DOM裏面有且僅有一個div#app
,當js被執行完成以後,此div#app
會被整個替換掉,所以,咱們能夠來作一下實驗,在此div裏面添加一些內容:git
<div id="app"> <p>Hello skeleton</p> <p>Hello skeleton</p> <p>Hello skeleton</p> </div>
打開chrome的開發者工具,在Network
裏面找到throttle
功能,調節網速爲「Slow 3G」,刷新頁面,就能看到頁面先是展現了三句「Hello skeleton」,待js加載完了纔會替換爲本來要展現的內容。github
如今,咱們對於如何在Vue頁面實現骨架屏,已經有了一個很清晰的思路——在div#app
內直接插入骨架屏相關內容便可。web
顯然,手動在div#app
裏面寫入骨架屏內容是不科學的,咱們須要一個擴展性強且自動化的易維護方案。既然是在Vue項目裏,咱們固然但願所謂的骨架屏也是一個.vue
文件,它可以在構建時由工具自動注入到div#app
裏面。chrome
首先,咱們在/src
目錄下新建一個Skeleton.vue
文件,其內容以下:
<template> <div class="skeleton page"> <div class="skeleton-nav"></div> <div class="skeleton-swiper"></div> <ul class="skeleton-tabs"> <li v-for="i in 8" class="skeleton-tabs-item"><span></span></li> </ul> <div class="skeleton-banner"></div> <div v-for="i in 6" class="skeleton-productions"></div> </div> </template> <style> .skeleton { position: relative; height: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; background: #fff; } .skeleton-nav { height: 45px; background: #eee; margin-bottom: 15px; } .skeleton-swiper { height: 160px; background: #eee; margin-bottom: 15px; } .skeleton-tabs { list-style: none; padding: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; } .skeleton-tabs-item { width: 25%; height: 55px; box-sizing: border-box; text-align: center; margin-bottom: 15px; } .skeleton-tabs-item span { display: inline-block; width: 55px; height: 55px; border-radius: 55px; background: #eee; } .skeleton-banner { height: 60px; background: #eee; margin-bottom: 15px; } .skeleton-productions { height: 20px; margin-bottom: 15px; background: #eee; } </style>
接下來,再新建一個skeleton.entry.js
入口文件:
import Vue from 'vue' import Skeleton from './Skeleton.vue' export default new Vue({ components: { Skeleton }, template: '<skeleton />' })
在完成了骨架屏的準備以後,就輪到一個關鍵插件vue-server-renderer
登場了。該插件本用於服務端渲染,可是在這個例子裏,咱們主要利用它可以把.vue
文件處理成html
和css
字符串的功能,來完成骨架屏的注入,流程以下:
根據流程圖,咱們還須要在根目錄新建一個webpack.skeleton.conf.js
文件,以專門用來進行骨架屏的構建。
const path = require('path') const webpack = require('webpack') const nodeExternals = require('webpack-node-externals') const VueSSRServerPlugin = require('vue-server-renderer/server-plugin') module.exports = { target: 'node', entry: { skeleton: './src/skeleton.entry.js' }, output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: '[name].js', libraryTarget: 'commonjs2' }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ] }, { test: /\.vue$/, loader: 'vue-loader' } ] }, externals: nodeExternals({ whitelist: /\.css$/ }), resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, plugins: [ new VueSSRServerPlugin({ filename: 'skeleton.json' }) ] }
能夠看到,該配置文件和普通的配置文件基本徹底一致,主要的區別在於其target: 'node'
,配置了externals
,以及在plugins
裏面加入了VueSSRServerPlugin
。在VueSSRServerPlugin
中,指定了其輸出的json文件名。咱們能夠經過運行下列指令,在/dist
目錄下生成一個skeleton.json
文件:
webpack --config ./webpack.skeleton.conf.js
這個文件在記載了骨架屏的內容和樣式,會提供給vue-server-renderer
使用。
接下來,在根目錄下新建一個skeleton.js
,該文件即將被用於往index.html
內插入骨架屏。
const fs = require('fs') const { resolve } = require('path') const createBundleRenderer = require('vue-server-renderer').createBundleRenderer // 讀取`skeleton.json`,以`index.html`爲模板寫入內容 const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), { template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8') }) // 把上一步模板完成的內容寫入(替換)`index.html` renderer.renderToString({}, (err, html) => { fs.writeFileSync('index.html', html, 'utf-8') })
注意,做爲模板的
html
文件,須要在被寫入內容的位置添加<!--vue-ssr-outlet-->
佔位符,本例子在div#app
裏寫入:<div id="app"> <!--vue-ssr-outlet--> </div>
接下來,只要運行node skeleton.js
,就能夠完成骨架屏的注入了。運行效果以下:
<html lang="en"> <head> <meta charset="utf-8"> <title>vue-skeleton</title> <style data-vue-ssr-id="742d88be:0"> .skeleton { position: relative; height: 100%; overflow: hidden; padding: 15px; box-sizing: border-box; background: #fff; } .skeleton-nav { height: 45px; background: #eee; margin-bottom: 15px; } .skeleton-swiper { height: 160px; background: #eee; margin-bottom: 15px; } .skeleton-tabs { list-style: none; padding: 0; margin: 0 -15px; display: flex; flex-wrap: wrap; } .skeleton-tabs-item { width: 25%; height: 55px; box-sizing: border-box; text-align: center; margin-bottom: 15px; } .skeleton-tabs-item span { display: inline-block; width: 55px; height: 55px; border-radius: 55px; background: #eee; } .skeleton-banner { height: 60px; background: #eee; margin-bottom: 15px; } .skeleton-productions { height: 20px; margin-bottom: 15px; background: #eee; } </style></head> <body> <div id="app"> <div data-server-rendered="true" class="skeleton page"><div class="skeleton-nav"></div> <div class="skeleton-swiper"></div> <ul class="skeleton-tabs"><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li></ul> <div class="skeleton-banner"></div> <div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div></div> </div> <script src="/dist/build.js"></script> </body> </html>
能夠看到,骨架屏的樣式經過<style></style>
標籤直接被插入,而骨架屏的內容也被放置在div#app
之間。固然,咱們還能夠進一步處理,把這些內容都壓縮一下。改寫skeleton.js
,在裏面添加html-minifier
:
... + const htmlMinifier = require('html-minifier') ... renderer.renderToString({}, (err, html) => { + html = htmlMinifier.minify(html, { + collapseWhitespace: true, + minifyCSS: true + }) fs.writeFileSync('index.html', html, 'utf-8') })
來看看效果:
效果很是不錯!至此,Vue頁面接入骨架屏已經徹底實現了。
本文實現了一套最簡單的Vue頁面骨架屏注入實踐,若是想看更復雜一些的例子,能夠參考《爲vue項目添加骨架屏》這篇文章,本文的許多思路也是受其啓發,很是值得閱讀。
若是還有任何更好的實現思路,也歡迎和我探討,有機會我也會總結基於React
的骨架屏注入實踐,敬請期待!
文章相關代碼已經同步到 Github,歡迎查閱~