關于骨架屏介紹
骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數據加載完成，恢復數據展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。 常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。
這里主要通過代碼為大家展示如何一步步做出這樣一個骨架屏：
prerender 渲染骨架屏
本組件庫骨架屏的實現也是基于預渲染去實現的，有關于預渲染更詳細的介紹請參考這篇文章：處理 Vue 單頁面 Meta SEO的另一種思路 下面我們主要介紹其實現步驟，首先我們也是需要配置webpack-plugin，不過已經有實現好的prerender-spa-plugin可用
var path = require('path')var PrerenderSpaPlugin = require('prerender-spa-plugin')module.exports = { // ... plugins: [ new PrerenderSpaPlugin( // Absolute path to compiled SPA path.join(__dirname, '../dist'), // List of routes to prerender ['/'] ) ]} 然后寫好我們的骨架屏文件main.skeleton.vue
<template> <div class="main-skeleton"> <w-skeleton height="80px"></w-skeleton> <div> <div class="skeleton-container"> <div class="skeleton"> <w-skeleton height="300px"></w-skeleton> </div> <w-skeleton height="45px"></w-skeleton> </div> <div class="skeleton-bottom"> <w-skeleton height="45px"></w-skeleton> </div> </div> </div></template>
當初次進入頁面的時候我們需要顯示骨架屏，數據加載完，我們需要移除骨架屏：
<template> <div id="app"> <mainSkeleton v-if="!init"></mainSkeleton> <div v-else> <div class="body"></div> </div> </div></template><script> import mainSkeleton from './main.skeleton.vue' export default { name: 'app', data () { return { init: false } }, mounted () { // 這里模擬數據請求 setTimeout(() => { this.init = true }, 250) }, components: { mainSkeleton } }</script>ssr 渲染骨架屏
下面我用我靈魂畫師的筆法，畫出了大致的過程：
首先創建我們的skeleton.entry.js
import Vue from 'vue';import Skeleton from './skeleton.vue';export default new Vue({ components: { Skeleton }, template: '<skeleton />'}); 當然這里的skeleton.vue使我們事先寫好的骨架屏組件，看起來可能是這樣：
<template> <div class="skeleton-wrapper"> <header class="skeleton-header"></header> <div class="skeleton-block"></div> </div></template>
然后我們需要的是能把skeleton.entry.js編譯成服務端渲染可用的bundle文件，所以我們需要有個編譯骨架屏的webpack.ssr.conf.js文件:
const path = require('path');const merge = require('webpack-merge');const baseWebpackConfig = require('./webpack.base.conf');const nodeExternals = require('webpack-node-externals');function resolve(dir) { return path.join(__dirname, dir);}module.exports = merge(baseWebpackConfig, { target: 'node', devtool: false, entry: { app: resolve('./src/skeleton.entry.js') }, output: Object.assign({}, baseWebpackConfig.output, { libraryTarget: 'commonjs2' }), externals: nodeExternals({ whitelist: //.css$/ }), plugins: []});接下來最終的步驟，就是編寫我們的webpackPlugin，我們期望我們的webpackPlugin可以幫我們把入口文件編譯成bundle，然后再通過vue-server-renderer來render bundle，最終產出響應的html片段和css片段，這里貼出核心代碼：
// webpack start to work var serverCompiler = webpack(serverWebpackConfig); var mfs = new MFS(); // output to mfs serverCompiler.outputFileSystem = mfs; serverCompiler.watch({}, function (err, stats) { if (err) { reject(err); return; } stats = stats.toJson(); stats.errors.forEach(function (err) { console.error(err); }); stats.warnings.forEach(function (err) { console.warn(err); }); var bundle = mfs.readFileSync(outputPath, 'utf-8'); var skeletonCss = mfs.readFileSync(outputCssPath, 'utf-8'); // create renderer with bundle var renderer = createBundleRenderer(bundle); // use vue ssr to render skeleton renderer.renderToString({}, function (err, skeletonHtml) { if (err) { reject(err); } else { resolve({skeletonHtml: skeletonHtml, skeletonCss: skeletonCss}); } }); });最后一步，我們對產出的html片段, css片段進行組裝，產出最終的html，所以我們需要監聽webpack 的編譯掛載之前的事件：
compiler.plugin('compilation', function (compilation) { // add listener for html-webpack-plugin compilation.plugin('html-webpack-plugin-before-html-processing', function (htmlPluginData, callback) { ssr(webpackConfig).then(function (ref) { var skeletonHtml = ref.skeletonHtml; var skeletonCss = ref.skeletonCss; // insert inlined styles into html var headTagEndPos = htmlPluginData.html.lastIndexOf('</head>'); htmlPluginData.html = insertAt(htmlPluginData.html, ("<style>" + skeletonCss + "</style>"), headTagEndPos); // replace mounted point with ssr result in html var appPos = htmlPluginData.html.lastIndexOf(insertAfter) + insertAfter.length; htmlPluginData.html = insertAt(htmlPluginData.html, skeletonHtml, appPos); callback(null, htmlPluginData); }); }); }); github 地址： VV-UI/VV-UI
演示地址: vv-ui
文檔地址：skeleton
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
