給項目加一個骨架屏吧

時間 2019-11-06

標籤項目一個骨架简体版

原文原文鏈接

骨架屏能夠理解爲是當數據還未加載進來前，頁面的一個空白版本，一個簡單的關鍵渲染路徑。用戶會看到一個樣式簡單，描繪了當前頁面的大體框架的骨架屏頁面，而後骨架屏中各個佔位部分被實際資源徹底替換，這個過程當中用戶會以爲內容正在逐漸加載即將呈現，下降了用戶的焦躁情緒，使得加載過程主觀上變得流暢。css

安裝

這裏採用餓了麼開源的方案page-skeleton-webpack-plugin。html

npm install --save-dev page-skeleton-webpack-plugin
npm install --save-dev html-webpack-plugin
複製代碼

安裝過程當中報錯提示以下vue

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA D" env variable to skip download.
複製代碼

執行這個命令webpack

npm config set puppeteer_download_host=https://storage.googleapis.com.cnpmjs.org
複製代碼

使用

我這個項目是基於vue-cli3腳手架開發的。git

第一步配置插件

建立一個vue.config.js文件。github

const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
  configureWebpack: {
    plugins: [
      new SkeletonPlugin({
        pathname: path.resolve(__dirname, './shell'), // 用來存儲 shell 文件的地址
        staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同
        routes: ['/'], // 將須要生成骨架屏的路由添加到數組中
        excludes: ['.van-nav-bar', '.van-tabbar']  // 須要忽略的css選擇器
      })
    ],
  },
  chainWebpack: (config) => {   // 解決vue-cli3腳手架建立的項目壓縮html 幹掉<!-- shell -->致使骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }
    
  },
};
複製代碼

在項目根目錄下面建立一個shell文件夾。 chainWebpack配置這個是解決vue-cli3打包的骨架屏不生效的BUGweb

第二步修改 HTML Webpack Plugin 插件的模板

在你啓動 App 的根元素內部添加 vue-cli

<body>
  <div id="app"><!-- shell --></div>
  <!-- built files will be auto injected -->
</body>
複製代碼

第三步：界面操做生成、寫入骨架頁面

在開發頁面中經過 Ctrl|Cmd + enter 呼出插件交互界面，或者在在瀏覽器的 JavaScript 控制檯內輸入toggleBar 呼出交互界面。 shell
點擊交互界面中的按鈕，進行骨架頁面的預覽，這一過程可能會花費 20s 左右時間，當插件準備好骨架頁面後，會自動經過瀏覽器打開預覽頁面npm
掃描預覽頁面中的二維碼，可在手機端預覽骨架頁面，能夠在預覽頁面直接編輯源碼，經過點擊右上角寫入按鈕，將骨架頁面寫入到 shell 文件夾中。
經過 webpack 從新打包應用，當頁面從新啓動後，就可以在獲取到數據前看到應用的骨架結構了。