page-skeleton骨架屏的實現

什麼是骨架屏

骨架屏指的是當你打開一個 web 頁面，在頁面解析和數據加載以前，首先展現給用戶大概的樣式。

爲何須要骨架屏

• Google Research 的研究顯示，53% 的用戶在等待加載 3s 後，選擇關閉 Web 頁面或應用，致使用戶流失。
• 當下前端框架，基本都是js 驅動型的，也就是說在JS 代碼解析完成以前，頁面是不會展現任何內容，即所謂的白屏。
• 用戶體驗、用戶感知會更友好。

現有市面上的方案

• 手寫骨架屏 手動html+css樣式佔位
  缺點： 跟不上UI改變與需求更迭，屬於機械化勞動方式。
• 內容直出 服務端渲染（ssr） 或者 vue 預渲染
  缺點： 內容直出，須要服務端支持，涉及到服務構建、部署、緩存等，成本與風險加大。
• 結合當前項目，與各方優缺點，這裏採用page-skeleton-webpack-plugin（element 自動生成骨架屏插件），進行嘗試。
  優勢：對現有頁面、構建工具侵入性最小。
  缺點：生成會有差別，需人工校驗，且打包有必定的樣式內容體積。

page-skeleton-webpack-plugin 插件的基本思路

經過 puppeteer 打開開發中的須要生成骨架屏的頁面，在等待頁面加載渲染完成以後， 在保留頁面佈局樣式的前提下，經過對頁面中元素進行刪減或增添，對已有元素經過層疊樣式進行覆蓋，這樣達到在不改變頁面佈局下， 隱藏圖片和文字，經過樣式覆蓋，使得其展現爲灰色塊。最後將修改後的 HTML 和 CSS 樣式提取出來，這樣就是骨架屏了。
主要步驟思路以下：

演示&體驗流程：

• 一、更新leka 命令 - 引入page-skeleton 插件 & 替換<--shell -->插件
• 二、安裝依賴，（有puppteer 需用cnpm）
• 三、跑leka serve 模式，進行骨架屏生成（評估好是否合適用骨架屏）
• 四、本地prod打包， (web_leka是新樂效，就上傳shell 目錄文件內容，而後打包進去)

骨架時序圖

修改部分說明

• 修復一些page-skeleton-webpack-plugin插件問題，詳見 Demo 踩坑
• 優化預覽二維碼，實現實時修改樣式，二維碼實時更新
• 手機掃一掃預覽，加入適配flexible.js,保證看到的樣式更真實
• 調整priview 預覽，把原1280寬度改爲375手機寬度
  原1280寬度，容易誤認爲框內就是手機的所有:

  

結合當前，需修改項

• 實際上線後，骨架屏會看到初始樣式，而後纔是適配後的樣式, todo。
• 遷移到web_leka工程todo。
• weex 骨架是否能夠生成？
• 調整、優化生成的dom, 如head塊，app裏是不須要的。

詳情請看 element 自動生成骨架屏， 這裏是clone page-skeleton-webpack-plugin插件進行的。