Vue頁面骨架屏(二)

實現思路

參考原文中在構建時使用 Vue 預渲染骨架屏一節介紹的思路，我將骨架屏也當作路由組件，在構建時使用 Vue 預渲染功能，將骨架屏組件的渲染結果 HTML 片斷插入 HTML 頁面模版的掛載點中，將樣式內聯到 head 標籤中。這樣等前端渲染完成時，Vue 將使用客戶端混合，把掛載點中的骨架屏內容替換成真正的頁面內容。

有了以上思路，讓咱們看看如何爲一個簡單的 Vue 應用添加骨架屏。

具體實現

爲此我開發了一個 webpack 插件：vue-skeleton-webpack-plugin。下面將從如下三方面介紹部分實現細節：

• 使用 Vue 預渲染骨架屏
• 將骨架屏渲染結果插入 HTML 模版中
• 開發模式下插入各個骨架屏路由

使用 Vue 預渲染骨架屏

咱們使用 Vue 的預渲染功能渲染骨架屏組件，不熟悉的同窗能夠先閱讀官方文檔中的基本用法一節。

首先須要建立一個僅使用骨架屏組件的入口文件：

// src/entry-skeleton.js

import Skeleton from './Skeleton.vue';
// 建立一個骨架屏 Vue 實例
export default new Vue({
    components: {
        Skeleton
    },
    template: '<skeleton />'
});

接下來建立一個用於服務端渲染的 webpack 配置對象，將剛建立的入口文件指定爲 entry 依賴入口：

// webpack.skeleton.conf.js
{
    target: 'node', // 區別默認的 'web'
    entry: resolve('./src/entry-skeleton.js'), // 多頁傳入對象
    output: {
        libraryTarget: 'commonjs2'
    },
    externals: nodeExternals({
        whitelist: /\.css$/
    }),
    plugins: []
}

這裏只展現單頁應用的狀況，在多頁應用中，指定 entry 爲包含各個頁面入口的對象便可。關於多頁中的 webpack 配置對象示例，可參考插件的多頁測試用例或者Lavas MPA 模版。

而後咱們將這個 webpack 配置對象經過參數傳入骨架屏插件中。

// webpack.dev.conf.js
plugins: [
    new SkeletonWebpackPlugin({ // 咱們編寫的插件
        webpackConfig: require('./webpack.skeleton.conf')
    })
]

骨架屏插件運行時會使用 webpack 編譯這個傳入的配置對象，獲得骨架屏的 bundle 文件。接下來只須要使用這個 bundle 文件內容建立一個 renderer，調用renderToString()方法就能夠獲得字符串形式的 HTML 渲染結果了。因爲咱們不須要將過程當中的文件產物保存在硬盤中，使用內存文件系統memory-fs便可。

// vue-skeleton-webpack-plugin/src/ssr.js

const createBundleRenderer = require('vue-server-renderer').createBundleRenderer;
// 從內存文件系統中讀取 bundle 文件
let bundle = mfs.readFileSync(outputPath, 'utf-8');
// 建立 renderer
let renderer = createBundleRenderer(bundle);
// 渲染獲得 HTML
renderer.renderToString({}, (err, skeletonHtml) => {});

默認狀況下，webpack 模塊引用的樣式內容是內嵌在 JavaScript bundle 中的。官方插件 ExtractTextPlugin能夠進行樣式分離。咱們也使用這個插件，將骨架屏樣式內容輸出到單獨的 CSS 文件中。 關於插件更多用法，可參考官方文檔或者 Vue 基於 webpack 的模版。

// vue-skeleton-webpack-plugin/src/ssr.js

// 加入 ExtractTextPlugin 插件到 webpack 配置對象插件列表中
serverWebpackConfig.plugins.push(new ExtractTextPlugin({
    filename: outputCssBasename // 樣式文件名
}));

至此，咱們已經獲得了骨架屏的渲染結果 HTML 和樣式內容，接下來須要關心如何將結果注入 HTML 頁面模版中。

注入渲染結果

Vue webpack 模版項目使用了 HTML Webpack Plugin生成 HTML 文件。參考該插件的 事件說明，咱們選擇監聽html-webpack-plugin-before-html-processing事件，在事件的回調函數中，插件會傳入當前待處理的 HTML 內容供咱們進一步修改。

咱們知道骨架屏組件最終的渲染結果包含 HTML 和樣式兩部分，樣式部分能夠直接插入 head 標籤內，而 HTML 須要插入掛載點中。插件使用者能夠經過參數設置這個掛載點位置，默認將使用<div id="app">。

看起來一切都很順利，可是在多頁應用中，狀況會變的稍稍複雜。多頁項目中一般會引入多個 HTML Webpack Plugin，例如咱們在 Lavas MPA 模版中使用的 Multipage Webpack 插件就是如此，這就會致使html-webpack-plugin-before-html-processing事件被屢次觸發。

在多頁應用中，咱們傳給骨架屏插件的 webpack 配置對象是包含多個入口的：

// webpack.skeleton.conf.js
entry: {
    page1: resolve('./src/pages/page1/entry-skeleton.js'),
    page2: resolve('./src/pages/page2/entry-skeleton.js')
}

這就意味着每次html-webpack-plugin-before-html-processing事件觸發時，骨架屏插件都須要識別出當前正在處理的入口文件，執行 webpack 編譯當前頁面對應的骨架屏入口文件，渲染對應的骨架屏組件。查找當前處理的入口文件過程以下：

// vue-skeleton-webpack-plugin/src/index.js

// 當前頁面使用的全部 chunks
let usedChunks = htmlPluginData.plugin.options.chunks;
let entryKey;
// chunks 和全部入口文件的交集就是當前待處理的入口文件
if (Array.isArray(usedChunks)) {
    entryKey = Object.keys(skeletonEntries);
    entryKey = entryKey.filter(v => usedChunks.indexOf(v) > -1)[0];
}
// 設置當前的 webpack 配置對象的入口文件和結果輸出文件
webpackConfig.entry = skeletonEntries[entryKey];
webpackConfig.output.filename = `skeleton-${entryKey}.js`;
// 使用配置對象進行服務端渲染
ssr(webpackConfig).then(({skeletonHtml, skeletonCss}) => {
    // 注入骨架屏 HTML 和 CSS 到頁面 HTML 中
});

至此，咱們已經完成了骨架屏的渲染和注入工做，接下來有一個開發中的小問題須要關注。

開發模式下插入路由

前面說過，因爲 Vue 會使用客戶端混合，骨架屏內容在前端渲染完成後就會被替換，那麼如何在開發時方便的查看調試呢？

使用瀏覽器開發工具設置斷點是一個辦法，但若是能在開發模式中向路由文件插入骨架屏組件對應的路由規則，使各個頁面的骨架屏能像其餘路由組件同樣被訪問，將使開發調試變得更加方便。向路由文件插入規則代碼的工做將在插件的 loader中完成。若是您對 webpack loader 還不瞭解，能夠參閱官方文檔。

咱們須要向路由文件插入兩類代碼：引入骨架屏組件的代碼和對應的路由規則對象。關於代碼插入點，引入組件代碼相對簡單，放在文件頂部就好了，而路由規則須要插入路由對象數組中，目前我使用的是簡單的字符串匹配來查找這個數組的起始位置。例以下面的例子中，須要向 loader 傳入routes: [來肯定插入路由的位置。

// router.js

import Skeleton from '@/pages/Skeleton.vue'
routes: [
    { // 插入骨架屏路由
        path: '/skeleton',
        name: 'skeleton',
        component: Skeleton
    }
    // ...其他路由規則
]

在多頁應用中，每一個頁面對應的骨架屏都須要插入代碼，使用者能夠經過佔位符設置引入骨架屏組件語句和路由規則的模版。loader 在運行時會使用這些模版，用真實的骨架屏名稱替換掉佔位符。在下面的例子中，假設咱們有Page1.skeleton.vue和Page2.skeleton.vue這兩個骨架屏，開發模式下能夠經過/skeleton-page1和/skeleton-page2訪問這兩個骨架屏路由。更多參數說明能夠參考這裏。

// webpack.dev.conf.js

module: {
    rules: [] // 其餘規則
        .concat(SkeletonWebpackPlugin.loader({
            resource: resolve('src/router.js'), // 目標路由文件
            options: {
                entry: ['page1', 'page2'],
                importTemplate: 'import [nameCap] from \'@/pages/[name]/[nameCap].skeleton.vue\';',
                routePathTemplate: '/skeleton-[name]'
            }
        }))
} 

demo

multidemo

文章轉載自https://juejin.im/entry/5ab37beb518825557005eecc