vue-cli項目首頁加載緩慢想要使用骨架屏效果，經過幾天的踩坑，這里學習并記錄一下vue項目自動生成骨架屏方法。

?

添加骨架屏，其優勢在于：

• 寫于HTML文件中，獨立于Vue框架，節省了JS加載時間+JS全局環境創建的執行時間的時間
• 只在主頁面根據頁面結構獨立編寫，預先展示頁面結構，進行視覺暫留，提供更好的交互感官
• 只在頁面結構變化時進行修改，維護成本相對較低

骨架屏的作用主要是在網絡請求較慢時，提供基礎占位，當數據加載完成，恢復數據展示。這樣給用戶一種很自然的過渡，不會造成頁面長時間白屏或者閃爍等情況。 常見的骨架屏實現方案有ssr服務端渲染和prerender兩種解決方案。

?

?

那么重點就是怎么添加骨架屏 了，

?

大概方案有：

手動編寫骨架屏代碼

通過預渲染手動書寫的代碼生成相應的骨架屏
比如：vue-skeleton-webpack-plugin

餓了么內部的生成骨架頁面的工具
page-skeleton-webpack-plugin

JavaScript操作DOM 的方式結合 Puppeteer 自動生成網頁骨架屏

其他...

?

上述方案分析：

1、手動編寫骨架屏代碼

該方法就是手動編寫項目index.html 入口文件，實現在vue項目初始化展示替換div#app根元素前的骨架屏效果。

?

2、通過預渲染手動書寫的代碼生成相應的骨架屏 vue-skeleton-webpack-plugin

該方法需要下載使用vue-skeleton-webpack-plugin，主要原理是利用vue-server-renderer?將 .vue格式的骨架屏文件處理成html和css字符串的功能，進而完成骨架屏的注入；但是需要手動編寫預渲染的骨架屏效果圖代碼；

?

親測，注意以下出錯場景：

• 【webpack --config ./webpack.skeleton.conf.js】報錯可以嘗試將webpack版本從4.0降到3.0；
• vue-loader@15.*之后 必須配置帶有VueLoaderPlugin 之外，還需另外單獨配置css-loader。（如果你不想手動設置 webpack，我們推薦使用?Vue CLI?直接創建一個項目的腳手架。通過 Vue CLI 創建的項目會針對多數常見的開發需求進行預先配置，做到開箱即用。）
• 錯誤未安裝webpck-cli，使用命令全局安裝【npm install -g webpack-cli】即可；
• 項目報錯可能是需要安裝?css-loader style-loader
• 如果提示在webpack.config中未配置mode環境選項，配置即可
• 為保持構建環境一致，請采用`npm run dev`腳本編譯的形式，以確保使用的webpack命令，vue-loader是本地版本。

?

詳細使用參考網址：https://segmentfault.com/a/1190000014832185?

?

使用步驟歸納：

1、安裝vue-skeleton-webpack-plugin插件

2、在/src目錄下新建一個Skeleton.vue文件，即已編寫好的預渲染頁面；

3、文件同級目錄再新建一個skeleton.entry.js入口文件，其中引用了Skeleton.vue文件；

4、在項目根目錄新建一個webpack.skeleton.conf.js配置文件，以專門用來進行骨架屏的構建。該文件中包含skeleton.entry.js入口文件，引用VueSSRServerPlugin插件，指定了其輸出的json文件名；

5、使用【webpack --config ./webpack.skeleton.conf.js】命令在/dist目錄下生成一個skeleton.json文件；

6、再在根目錄下新建一個skeleton.js，該文件用于讀取skeleton.json往index.html內插入骨架屏內容。

7、入口index.html文件，需要在被寫入內容的位置添加<!--vue-ssr-outlet-->占位符，本例子在div#app里寫入；

8、運行node skeleton.js，就可以完成骨架屏的注入了

?

前兩個方法的局限性是都需要開發者自己編寫骨架屏代碼，并沒有自動根據vue頁面內容轉換成相應色塊組成的dom片段再注入入口html文件！！！所以使用該種方法開發效率低，麻煩，不能完全解決根據vue項目頁面自動生成骨架屏dom，并注入入口html替代#app節點的問題

?

?

?

?

3、餓了么內部的生成骨架頁面的工具? page-skeleton-webpack-plugin

?

餓了么的做的比較強大了，還有 UI 界面專門調整骨架屏

• 對于復雜的頁面也會有不盡如人意的地方
• 生成的骨架屏節點是基于頁面本身的結構和 CSS，存在嵌套比較深的情況，體積不會太小
• 只支持 history 模式.

這個不多說，沒有親測；餓了嗎骨架屏方案思路??https://github.com/Jocs/jocs.github.io/issues/22

?

?

?

?

4、JavaScript操作DOM 的方式結合 Puppeteer 自動生成網頁骨架屏

該方法需要下載【npm i draw-page-structure -g】? ，用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏，原理是：

• ? ? ? 生成操作Dom的JavaScript腳本（該腳本用于將項目頁面轉換成色塊形式的骨架屏效果）；
• ? ? ?通過Puppeteer控制谷歌瀏覽器運行項目頁面并獲取頁面、將上一步的腳本注入該頁面，并生成骨架屏所需的Dom節點；
• ? ? ?將自動生成的骨架屏Dom片段插入到應用頁面的根入口節點。

?

使用注意事項：

• 核心在于 DOM 操作，puppeteer 僅提供運行環境和導出方式
• 只要能訪問的頁面都能生成，history 與 hash 模式無限制
• 不受項目和框架的限制，vue 和 react 等項目零修改即可復用
• 生成色塊的單位為百分比，不同設備自適應
• 不需要 css-tree 來提取樣式，不依賴頁面本身的布局結構，生成扁平的 DOM 節點體積特別小
• 支持自定義生成方式與導出方式
  ?

詳細使用參考網址?https://www.imooc.com/article/253387、https://github.com/famanoder/dps

?

dps插件使用步驟：

1、使用命令【npm i draw-page-structure -g】安裝插件

2、dps init?生成配置文件?dps.config.js

3、修改?dps.config.js?進行相關配置，包括想渲染的頁面url、通過includeElement和init方法調整骨架屏效果等；

4、dps start?開始生成骨架屏

?

?

參考文章有：
Vue頁面骨架屏注入實踐 ：

餓了嗎一種自動化生成骨架屏的方案

用純 DOM 的方式結合 Puppeteer 自動生成網頁骨架屏、

dps(draw-page-structure)插件使用

?

?

?

?

?

總結

以上是生活随笔為你收集整理的（亲测）vue-cli项目添加骨架屏多种方式，自动生成骨架屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。