作者：小土豆biubiubiu
博客園：https://www.cnblogs.com/HouJiao/
掘金：https://juejin.im/user/2436173500265335
微信公眾號：不知名寶藏程序媛(關注"不知名寶藏程序媛"免費領取前端電子書籍。文章公眾號首發，關注公眾號第一時間獲取最新文章。)
作者文章的內容均來源於自己的實踐，如果覺得有幫助到你的話，可以點贊❤️給個鼓勵或留下寶貴意見
前言
最近頻頻看到了骨架屏這個詞，其實在這之前鮮少聽過骨架屏這個詞。只是平時在瀏覽網站時，會經常看到某個頁面在尚未獲取到真正數據時展示的一些占位圖形。
那實際上這個就是前面所描述的骨架屏，即在頁面數據尚未加載前先給用戶展示出頁面的大致結構，在獲取到數據以后在具體展示頁面的內容。那骨架屏相較於傳統的那種loading，在很大程度上提升了用戶體驗。
所以今天這篇文章就是一篇骨架屏的初探與實踐，內容本身非常簡單，但是其中還是會有一些細節的東西需要注意，否則在實踐實總是無法出現正常的結果。
page-skeleton-webpack-plugin
page-skeleton-webpack-plugin 是餓了么團隊開發的一款webpack插件，這個插件可以根據不同的頁面生成不同的骨架屏頁面。
那接下來就在項目中實踐一下page-skeleton-webpack-plugin。
項目簡介
本次的項目是使用vue-cli2生成的一個項目，項目中組件的內容也非常的簡單，可以 戳這里 獲取項目代碼。
page-skeleton-webpack-plugin安裝
安裝page-skeleton也非常簡單，直接執行命令：npm install --save-dev page-skeleton-webpack-plugin即可。
注意
文檔中有明確說明還要安裝html-webpack-plugin，本項目已經安裝了html-webpack-plugin。如果你的項目中沒有安裝html-webpack-plugin，可以執行npm install --save-dev html-webpack-plugin進行安裝。
接下來就需要開始實踐了。
webpack配置
首先是需要我們在開發環境中生成骨架屏的代碼。
所以第一步是在開發環境中配置SkeletonPlugin。
// 代碼位置：/skeleton-screen-demo/build/webpack.dev.conf.js
// 步驟1：引入骨架屏模塊
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
// 省略代碼...
plugins: [
// 省略其他插件的配置代碼...
// 步驟2：在插件中進行配置
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/'], // Which routes you want to generate skeleton screen
})
]
SkeletonPlugin插件必選的三個配置項分別為：pathname、staticDir、routes，這三個配置項的作用分別如下：
| 配置項 | 數據類型 | 作用 |
|---|---|---|
| pathname | String | 開發環境中點擊保存按鈕生成的骨架屏代碼的保存路徑 |
| staticDir | String | 打包時生成的骨架屏的靜態資源文件(官方文檔指導要和webpack打包輸出目錄一致) |
| routes | Array | 需要生成骨架屏的路由(和項目中路由配置的path一致) |
運行項目
開發環境中的webpack配置完成以后，使用npm run dev運行項目。
不過不幸的是出現了錯誤😤 😤 😤。
跟隨着錯誤信息，去查看了/skeleton-screen-demo/node_modules/page-skeleton-webpack-plugin/src/util/index.js文件，發現該文件中確實有引入一個名為webpack-log的模塊，所以解決辦法就是安裝webpack-log: npm install webpack-log --save-dev。
安裝成功后重新運行項目。
可以發現項目名已經啟動成功，頁面也能正常訪問。
此時如果在控制台能看到下面這樣一個打印信息就證明page-skeleton-webpack-plugin配置成功。
生成骨架屏文件
首先在控制台輸入toggleBar，然后點擊回車。
可以看到頁面最上方出現了一個橫條，點擊這個橫條開始生成骨架屏的預覽頁面。
生成的過程需要等待十幾秒
可以看到我們頁面的骨架屏的預覽效果已經出來了；在預覽頁面的第三欄，還可以對已經生成的代碼進行修改。
接着呢，點擊骨架屏預覽頁面右上角的按鈕，就可以將骨架屏代碼保存在webpack中配置的目錄下。
點擊保存按鈕后，可以看到本地已經生成了對應的骨架屏代碼文件。
生產環境中的骨架屏配置
上面的一系列操作都是在開發環境中進行實踐的，目的是為了生成骨架屏的代碼。那現在就需要將骨架屏應用到生產環境中。
webpack配置
首先，我們需要在生產環境中寫入骨架屏的配置。
// 代碼位置：/skeleton-screen-demo/build/webpack.pro.conf.js
// 步驟1：引入骨架屏模塊
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
// 省略代碼...
plugins: [
// 省略其他插件的配置代碼...
// 步驟2：在插件中進行配置
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/'], // Which routes you want to generate skeleton screen
})
]
這個配置和前面在
webpack.dev.conf.js中的配置一樣。
可以將其直接寫在webpack.base.conf.js中，這樣可以避免重復寫兩次配置。
模板文件配置
在項目的跟模板中添加注釋<!-- shell --> 。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>骨架屏初探</title>
</head>
<body>
<div id="app">
<!-- shell -->
</div>
<!-- built files will be auto injected -->
</body>
</html>
👉👉👉這里需要注意👉👉👉
webpack的
html-webpack-plugin有一項關於壓縮移除注釋的配置，手腳架在生成項目的時侯，這個配置項默認設置為true，即移除模板中的注釋。但是在骨架屏這里，這個<!-- shell -->注釋是必須存在的。因此我們需要將這個壓縮移除注釋的配置項修改為false，即保留注釋，否則在后面的項目打包部署后，骨架屏是不會生效的。new HtmlWebpackPlugin({ minify: { removeComments: false // 壓縮移除注釋的配置項修改為false },
打包編譯項目
接着對項目進行打包編譯。
部署項目查看結果
最后一步就是將項目進行部署，本次我用的是nginx部署項目。項目部署成功以后我們打開瀏覽器就能看到骨架屏的效果。
因為組件內容本身非常簡單，加載時間短，所以需要設置一下瀏覽器調試工具下的
NetWork -> Disable cache，即禁用緩存；同時將加載網速設置為3G(或者自定義加載網速)。
這樣就能很清楚的看到骨架屏的效果。
多頁面骨架屏生成
多頁面骨架屏的生成也非常的簡單，除了新建組件、配置路由之外，還需要對SkeletonPlugin進行配置。
new SkeletonPlugin({
pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
routes: ['/', '/test'], // Which routes you want to generate skeleton screen
})
在SkeletonPlugin.routes中添加新的路由，之后在骨架屏的預覽界面就可以切換新增的路由，生成新的骨架屏預覽界面。
生成之后需要點擊保存按鈕保存骨架屏代碼。
保存之后會在本地生成一個新的骨架屏代碼。
之后在進行打包部署即可。
注意注意
這里特別特別注意的是，page-skeleton-webpack-plugin的骨架屏預覽界面中有一個Routes按鈕用於切換路由生成不同頁面的骨架屏預覽。
可以看到點擊切換按鈕后顯示的這個路由是不帶#符號的，而我們在配置路由時是默認的hash模式，所以在瀏覽器中訪問兩個組件的完整url為：
http://localhost:8080/#/
http://localhost:8080/#/test
那這樣的不同導致在新增了test路由以后，我在預覽界面切換到了/test路由的時候，預覽界面依然生成的是/路由的骨架屏頁面。
這個問題出現的原因其實需要追溯到page-skeleton-webpack-plugin的實現，當我們在預覽頁面切換路由時，page-skeleton-webpack-plugin插件會根據我們選擇的路由去獲取該路由對應的組件的內容，然后根據組件的內容生成骨架屏頁面。
由於page-skeleton-webpack-plugin的路由是不帶#符號的history模式，而實際項目中的路由模式是hash模式，所以導致SkeletonPlugin匹配不到實際的組件，也就無法正確的生成骨架屏。
那對於這個問題的解決辦法也非常的簡單，就是將項目的路由設置為history模式。
// 代碼位置：/skeleton-screen-demo/src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'Test',
component: Test
}
]
})
這個問題在實踐的時候確實困擾了我很長時間，新增的頁面總是不能出現正常的效果，而且在文檔中也並沒有提及此事。后來對比了一下官方給的一個
sale示例才恍然大悟。
最后我們在來看一下多頁面骨架屏的效果。
最后
到這里，這篇骨架屏的初探就完成了，內容非常的簡單，但是也有一兩個小小的坑需要避過才能完美實現骨架屏的效果。
作者：小土豆biubiubiu
博客園：https://www.cnblogs.com/HouJiao/
掘金：https://juejin.im/user/2436173500265335
微信公眾號：不知名寶藏程序媛(關注"不知名寶藏程序媛"免費領取前端電子書籍。文章公眾號首發，關注公眾號第一時間獲取最新文章。)
作者文章的內容均來源於自己的實踐，如果覺得有幫助到你的話，可以點贊❤️給個鼓勵或留下寶貴意見