Vue單頁面骨架屏實踐

骨架屏的作用主要是在網路請求較慢時，提供基礎佔位，當資料載入完成，恢復資料展示。這樣給使用者一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。這裡主要通過**為大家展示如何一步步做出這樣乙個骨架屏：

本元件庫骨架屏的實現也是基於預渲染去實現的，有關於預渲染更詳細的介紹請參考這篇文章：處理 vue 單頁面 meta seo的另一種思路下面我們主要介紹其實現步驟，首先我們也是需要配置webpack-plugin，不過已經有實現好的prerender-spa-plugin可用

var path = require('path')
var prerenderspaplugin = require('prerender-spa-plugin')
module.exports =

然後寫好我們的骨架屏檔案main.skeleton.vue

當初次進入頁面的時候我們需要顯示骨架屏，資料載入完，我們需要移除骨架屏：

下面我用我靈魂畫師的筆法，畫出了大致的過程：

首先建立我們的skeleton.entry.js

import vue from 'vue';
import skeleton from './skeleton.vue';
export default new vue(,
template: ''
});

當然這裡的skeleton.vue使我們事先寫好的骨架屏元件，看起來可能是這樣：

然後我們需要的是能把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) 
module.exports = merge(basewebpackconfig, ,
output: object.assign({}, basewebpackconfig.output, ),
externals: nodeexternals(),
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) 
stats = stats.tojson();
stats.errors.foreach(function (err) );
stats.warnings.foreach(function (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) 
else );
}});
});

最後一步，我們對產出的html片段, css片段進行組裝，產出最終的html，所以我們需要監聽webpack 的編譯掛載之前的事件：

compiler.plugin('compilation', function (compilation) );
});});

Vue單頁面骨架屏實踐

Vue頁面骨架屏

Vue專案骨架屏注入實踐

vue 單頁面過載（重新整理）

Vue單頁面骨架屏實踐

Vue頁面骨架屏

Vue專案骨架屏注入實踐

vue 單頁面過載（重新整理）

相關推薦