Vue頁面骨架屏

小公尺**：

vue專案中的入口index.html只有簡單的內容：

我們在div#root中加入模擬骨架屏，在chrome開發者工具調整網速：

這裡是骨架屏

由此可知，將骨架屏內容直接插入div#root中即可實現骨架屏。
我們需要骨架屏也是乙個單獨的.vue檔案，因此我們需要用到vue-server-renderer。對vue服務端渲染有所了解的同學一定知道，這個外掛程式能夠將vue專案在node端打包成乙個bundle，然後由bundle生成對應的html。
首先是生成專案：
.

├── build
│ ├── webpack.config.client.js
│ └── webpack.config.server.js
├── src
│ └── views
│ ├── index
│ │ └── index.vue
│ ├── skeleton
│ │ └── skeleton.vue
│ ├── index.js
│ └── skeleton-entry.js
├── index.html
└── skeleton.js
└── package.json
vue的服務端渲染一般會用vue-server-renderer將整個專案在node端打包成乙份bundle，而這裡我們只要乙份有骨架屏的html，所以會有乙個單獨的骨架屏入口檔案skeleton-entry.js,乙個骨架屏打包webpack配置webpack.config.server.js，而skeleton.js作用是將webpack打包出來的bundle寫入到index.html中。

import vue from 'vue'

import skeleton from './views/skeleton/skeleton.vue'
export default new vue(,
template: ''
})
const path = require('path')

const = require('vue-loader')
const vuessrserverplugin = require('vue-server-renderer/server-plugin')
module.exports = ,
module: ,]},
externals: object.keys(require('../package.json').dependencies),
resolve: 
},plugins: [
new vueloaderplugin(),
new vuessrserverplugin()
]}
其中骨架屏的webpack配置因為是node端，所以需要target: 'node'librarytarget: 'commonjs2'。在vuessrserverplugin中，指定了其輸出的json檔名。當執行webpack會在/server-dist目錄下生成乙個skeleton.json檔案,這個檔案記載了骨架屏的內容和樣式，會提供給vue-server-renderer使用。

const fs = require('fs')

const path = require('path')
const createbundlerenderer = require('vue-server-renderer').createbundlerenderer
// 讀取`skeleton.json`，以`index.html`為模板寫入內容
const renderer = createbundlerenderer(path.join(__dirname, './server-dist/skeleton.json'), )
// 把上一步模板完成的內容寫入（替換）`index.html`
renderer.rendertostring({}, (err, html) => )
注意，作為模板的html檔案，需要在被寫入內容的位置新增佔位符，本例子在div#root裡寫入：


最後執行node skeleton就能實現vue的骨架屏。

最終的index.html:

看下效果：

效果還是闊以的。
更多關於vue-server-renderer內容請戳vue-ssr
文章相關**已經同步到

github，歡迎查閱~
 
Vue單頁面骨架屏實踐
骨架屏的作用主要是在網路請求較慢時，提供基礎佔位，當資料載入完成，恢復資料展示。這樣給使用者一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。這裡主要通過 為大家展示如何一步步做出這樣乙個骨架屏 本元件庫骨架屏的實現也是基...
Vue專案骨架屏注入實踐
由此引申出一系列的優化方法，骨架屏也因此被提出。fcp優化 在 google 提出的以使用者為中心的四個頁面效能衡量指標中，fp fcp可能是開發者們最熟悉的了 為了優化首屏渲染時間這個指標，減少白屏時間，前端仔們想了很多辦法 加速或減少http請求損耗 使用cdn載入公用庫，使用強快取和協商快取，...
骨架屏使用
骨架屏又稱佔位骨架屏，它是代替菊花圖的一種新型載入提示，具體樣式如下所示 目前 github 上主要實現思路有兩個，2.在布局檔案中，自定義乙個view對每個view進行包裹，具體實現庫有skeleton android 下面主要講第一種思路的實現，替換adapter，用到的庫是skeleton庫 ...