這是一個基于 Vue 的 webpack 插件踱承，為單頁/多頁應用生成骨架屏 skeleton倡缠，減少白屏時間，在頁面完全渲染之前提升用戶感知體驗茎活。
支持 webpack@3 和 webpack@4昙沦，支持 Hot reload。
基本實現(xiàn)
參考了餓了么的 PWA 升級實踐一文载荔， 使用服務端渲染在構建時渲染 skeleton 組件盾饮，將 DOM 和樣式內(nèi)聯(lián)到最終輸出的 html 中。
另外懒熙，為了開發(fā)時調(diào)試方便丘损，會將對應路由寫入router.js中，可通過/skeleton路由訪問工扎。
使用方法
安裝：
npm install vue-skeleton-webpack-plugin
運行測試用例：
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 配置對象
- insertAfter 選填，渲染 DOM 結果插入位置肢娘，默認值為字符串
'<div id="app">'- 也可以傳入
Function呈础，方法簽名為insertAfter(entryKey: string): string舆驶，返回值為掛載點字符串
- 也可以傳入
- quiet 選填，在服務端渲染時是否需要輸出信息到控制臺
- router 選填 SPA 下配置各個路由路徑對應的 Skeleton
- mode 選填 路由模式而钞，兩個有效值
history|hash - routes 選填 路由數(shù)組沙廉，其中每個路由對象包含兩個屬性：
- path 路由路徑
- skeletonId Skeleton DOM 的 id
- mode 選填 路由模式而钞，兩個有效值
- minimize 選填 SPA 下是否需要壓縮注入 HTML 的 JS 代碼
[DEPRECATED] SkeletonWebpackPlugin.loader
開發(fā)模式已經(jīng)支持 hot reload，該參數(shù)不再需要臼节。
示例
Lavas 創(chuàng)建的項目
如果你的項目是使用 Lavas 創(chuàng)建的蓝仲，可參考Lavas Appshell模版和Lavas MPA模版 中的應用。
vue-cli 創(chuàng)建的項目
如果你的項目是使用 vue-cli 創(chuàng)建的官疲，可以參考基于 Vue Webpack 模板應用這個插件的例子： SPA 中單個 Skeleton：
修改的文件如下：build/webpack.prod.conf.js、build/webpack.dev.conf.js
添加的文件如下：build/webpack.skeleton.conf亮隙、src/utils/Skeleton.vue途凫、src/utils/enter-skeleton.js
SPA 中多個 Skeleton:
簡單的 Vue + Webpack 應用
或者你可以參考examples下的測試用例，其中也包含了單頁和多頁情況溢吻，具體如下：
-
/examples/simple最簡單的 SPA维费，使用一個 Skeleton -
/examples/multi-skeletonSPA，根據(jù)路由使用多個 Skeleton -
/examples/multipageMPA促王，每個頁面使用各自的 Skeleton犀盟，使用multipage-webpack-plugin -
/examples/multipage2MPA，每個頁面使用各自的 Skeleton蝇狼，使用多個html-webpack-plugin -
/examples/multipage3MPA阅畴，page1 使用 Skeleton，page2 不使用 -
/examples/webpack4SPA迅耘，使用webpack@4
常見問題
Webpack4
插件需要使用與 Webpack 版本配套的插件進行樣式分離贱枣。
- Webpack 4 中使用
mini-css-extract-plugin而非extract-text-webpack-plugin，因此需要安裝颤专。 - 安裝
vue-loader@^15.0.0并正確配置纽哥，可以參考 vue-loader 文檔。
未開啟樣式分離
運行出現(xiàn)如下錯誤：
node_modules\memory-fs\lib\MemoryFileSystem.js:114 throw new MemoryFileSystemError(errors.code.ENOENT, _path);
由于插件使用了 Vue 服務端渲染在構建時渲染 skeleton 組件栖秕，將 DOM 和樣式內(nèi)聯(lián)到最終輸出的 html 中春塌。 因此在給 skeleton 使用的 Webpack 配置對象中需要開啟樣式分離，將 skeleton 使用的樣式從 JS 中分離出來簇捍。
在 Webpack 中樣式分離是通過 extract-text-webpack-plugin 插件實現(xiàn)的只壳。因此在 webpack.skeleton.config 中必須正確配置該插件。
以使用 vue-cli 創(chuàng)建的項目為例暑塑，如果你的 webpack.skeleton.conf 繼承自 webpack.base.conf吕世，在開發(fā)模式下是默認關閉樣式分離的，因此需要修改梯投，可參考修改方案命辖。
