這是一個(gè)基于 Vue 的 webpack 插件，為單頁/多頁應(yīng)用生成骨架屏 skeleton，減少白屏?xí)r間，在頁面完全渲染之前提升用戶感知體驗(yàn)。

支持 webpack@3 和 webpack@4，支持 Hot reload。

基本實(shí)現(xiàn)

參考了餓了么的 PWA 升級(jí)實(shí)踐一文， 使用服務(wù)端渲染在構(gòu)建時(shí)渲染 skeleton 組件，將 DOM 和樣式內(nèi)聯(lián)到最終輸出的 html 中。

另外，為了開發(fā)時(shí)調(diào)試方便，會(huì)將對(duì)應(yīng)路由寫入router.js中，可通過/skeleton路由訪問。

使用方法

安裝：

npm install vue-skeleton-webpack-plugin

運(yùn)行測試用例：

npm run test

在 webpack 中引入插件：

// webpack.conf.js
import SkeletonWebpackPlugin from 'vue-skeleton-webpack-plugin';

plugins: [
    new SkeletonWebpackPlugin({
        webpackConfig: {
            entry: {
                app: resolve('./src/entry-skeleton.js')
            }
        }
    })
]

參數(shù)說明

SkeletonWebpackPlugin

• webpackConfig 必填，渲染 skeleton 的 webpack 配置對(duì)象
• insertAfter 選填，渲染 DOM 結(jié)果插入位置，默認(rèn)值為字符串 '<div id="app">'
  • 也可以傳入 Function，方法簽名為 insertAfter(entryKey: string): string，返回值為掛載點(diǎn)字符串
• quiet 選填，在服務(wù)端渲染時(shí)是否需要輸出信息到控制臺(tái)
• router 選填 SPA 下配置各個(gè)路由路徑對(duì)應(yīng)的 Skeleton
  • mode 選填 路由模式，兩個(gè)有效值 history|hash
  • routes 選填 路由數(shù)組，其中每個(gè)路由對(duì)象包含兩個(gè)屬性：
    • path 路由路徑
    • skeletonId Skeleton DOM 的 id
• minimize 選填 SPA 下是否需要壓縮注入 HTML 的 JS 代碼

[DEPRECATED] SkeletonWebpackPlugin.loader

開發(fā)模式已經(jīng)支持 hot reload，該參數(shù)不再需要。

示例

Lavas 創(chuàng)建的項(xiàng)目

如果你的項(xiàng)目是使用 Lavas 創(chuàng)建的，可參考Lavas Appshell模版和Lavas MPA模版 中的應(yīng)用。

vue-cli 創(chuàng)建的項(xiàng)目

如果你的項(xiàng)目是使用 vue-cli 創(chuàng)建的，可以參考基于 Vue Webpack 模板應(yīng)用這個(gè)插件的例子： SPA 中單個(gè) Skeleton：
修改的文件如下：build/webpack.prod.conf.js、build/webpack.dev.conf.js
添加的文件如下：build/webpack.skeleton.conf、src/utils/Skeleton.vue、src/utils/enter-skeleton.js

• Github
• Online Demo

SPA 中多個(gè) Skeleton:

• Github
• Online Demo

簡單的 Vue + Webpack 應(yīng)用

或者你可以參考examples下的測試用例，其中也包含了單頁和多頁情況，具體如下：

• /examples/simple 最簡單的 SPA，使用一個(gè) Skeleton
• /examples/multi-skeleton SPA，根據(jù)路由使用多個(gè) Skeleton
• /examples/multipage MPA，每個(gè)頁面使用各自的 Skeleton，使用 multipage-webpack-plugin
• /examples/multipage2 MPA，每個(gè)頁面使用各自的 Skeleton，使用多個(gè) html-webpack-plugin
• /examples/multipage3 MPA，page1 使用 Skeleton，page2 不使用
• /examples/webpack4 SPA，使用 webpack@4

常見問題

Webpack4

插件需要使用與 Webpack 版本配套的插件進(jìn)行樣式分離。

• Webpack 4 中使用 mini-css-extract-plugin 而非 extract-text-webpack-plugin，因此需要安裝。
• 安裝 vue-loader@^15.0.0 并正確配置，可以參考 vue-loader 文檔。

未開啟樣式分離

運(yùn)行出現(xiàn)如下錯(cuò)誤：

node_modules\memory-fs\lib\MemoryFileSystem.js:114 throw new MemoryFileSystemError(errors.code.ENOENT, _path);

由于插件使用了 Vue 服務(wù)端渲染在構(gòu)建時(shí)渲染 skeleton 組件，將 DOM 和樣式內(nèi)聯(lián)到最終輸出的 html 中。 因此在給 skeleton 使用的 Webpack 配置對(duì)象中需要開啟樣式分離，將 skeleton 使用的樣式從 JS 中分離出來。

在 Webpack 中樣式分離是通過 extract-text-webpack-plugin 插件實(shí)現(xiàn)的。因此在 webpack.skeleton.config 中必須正確配置該插件。

以使用 vue-cli 創(chuàng)建的項(xiàng)目為例，如果你的 webpack.skeleton.conf 繼承自 webpack.base.conf，在開發(fā)模式下是默認(rèn)關(guān)閉樣式分離的，因此需要修改，可參考修改方案。