骨架屏

一、什么是骨架屏鹰祸？

骨架屏可以理解為是在需要等待加載內(nèi)容的位置提供一個占位圖形組合甫窟，
描繪了當前頁面的大致框架的骨架屏頁面，然后骨架屏中各個占位部分被實際資源完全替換蛙婴，
這個過程中用戶會覺得內(nèi)容正在逐漸加載即將呈現(xiàn)粗井，降低了用戶的焦躁情緒，使得加載過程主觀上變得流暢街图。

二浇衬、何時使用

1、網(wǎng)絡(luò)較慢餐济，需要長時間等待加載處理的情況下焕窝。
2煤惩、圖文信息內(nèi)容較多的列表/卡片中。


image

三、對比菊花圖

第一個為骨架屏用押，第二個為菊花圖款违，第三個為無優(yōu)化油猫，可以看到相比于傳統(tǒng)的菊花圖會在感官上覺得內(nèi)容出現(xiàn)的流暢而不突兀夕凝，體驗更加優(yōu)良。


四鸽照、生成骨架屏的方法

1螺捐、手寫HTML、CSS的方式為目標頁定制骨架屏 做法可以參考<Vue頁面骨架屏注入實踐>矮燎，主要思路就是使用 vue-server-renderer 這個本來用于服務(wù)端渲染的插件定血，用來把我們寫的.vue文件處理為HTML，插入到頁面模板的掛載點中诞外，完成骨架屏的注入澜沟。這種方式不甚文明，如果頁面樣式改變了峡谊，還得改一遍骨架屏倔喂，增加了維護成本。 骨架屏的樣式實現(xiàn)參考 CodePen

2靖苇、 使用圖片作為骨架屏； 簡單暴力班缰，讓UI同學花點功夫吧哈哈贤壁；小米商城的移動端頁面采用的就是這個方法，它是使用了一個Base64的圖片來作為骨架屏埠忘。

3脾拆、 自動生成并自動插入靜態(tài)骨架屏 這種方法跟第一種方法類似馒索，不過是自動生成骨架屏，可以關(guān)注下餓了么開源的插件 page-skeleton-webpack-plugin 名船，它根據(jù)項目中不同的路由頁面生成相應(yīng)的骨架屏頁面绰上，并將骨架屏頁面通過 webpack 打包到對應(yīng)的靜態(tài)路由頁面中，不過要注意的是這個插件目前只支持history方式的路由渠驼，不支持hash方式蜈块，且目前只支持首頁的骨架屏，并沒有組件級的局部骨架屏實現(xiàn)迷扇，作者說以后會有計劃實現(xiàn)(issue9)百揭。

4、另外還有個插件 vue-skeleton-webpack-plugin蜓席，它將插入骨架屏的方式由手動改為自動器一，原理在構(gòu)建時使用 Vue 預(yù)渲染功能，將骨架屏組件的渲染結(jié)果 HTML 片段插入 HTML 頁面模版的掛載點中厨内，將樣式內(nèi)聯(lián)到 head 標簽中祈秕。這個插件可以給單頁面的不同路由設(shè)置不同的骨架屏，也可以給多頁面設(shè)置雏胃，同時為了開發(fā)時調(diào)試方便请毛，會將骨架屏作為路由寫入router中，可謂是相當體貼了丑掺。

22.png

4.1获印、vue-server-renderer

4.1.1 分析Vue頁面的內(nèi)容加載過程

為了簡單起見，我們使用vue-cli搭配webpack-simple這個模板來新建項目：

vue init webpack-simple vue-skeleton

這時我們便獲得了一個最基本的Vue項目：

.
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   └── main.js
├── index.html
└── webpack.conf.js

安裝完了依賴以后街州，便可以通過npm run dev去運行這個項目了兼丰。但是，在運行項目之前唆缴，我們先看看入口的html文件里面都寫了些什么鳍征。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-skeleton</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/dist/build.js"></script>
  </body>
</html>

可以看到，DOM里面有且僅有一個div#app面徽，當js被執(zhí)行完成之后艳丛，此div#app會被整個替換掉，因此趟紊，我們可以來做一下實驗氮双，在此div里面添加一些內(nèi)容：

<div id="app">
  <p>Hello skeleton</p>
  <p>Hello skeleton</p>
  <p>Hello skeleton</p>
</div>

打開chrome的開發(fā)者工具，在Network里面找到throttle功能霎匈，調(diào)節(jié)網(wǎng)速為“Slow 3G”戴差，刷新頁面，就能看到頁面先是展示了三句“Hello skeleton”铛嘱，待js加載完了才會替換為原本要展示的內(nèi)容暖释。

704076029-5af650f15c359_articlex.gif

現(xiàn)在袭厂，我們對于如何在Vue頁面實現(xiàn)骨架屏，已經(jīng)有了一個很清晰的思路——在div#app內(nèi)直接插入骨架屏相關(guān)內(nèi)容即可球匕。

4.1.2 易維護的方案

顯然纹磺，手動在div#app里面寫入骨架屏內(nèi)容是不科學的，我們需要一個擴展性強且自動化的易維護方案亮曹。既然是在Vue項目里橄杨，我們當然希望所謂的骨架屏也是一個.vue文件，它能夠在構(gòu)建時由工具自動注入到div#app里面乾忱。

首先讥珍，我們在/src目錄下新建一個Skeleton.vue文件，其內(nèi)容如下：

<template>
  <div class="skeleton page">
    <div class="skeleton-nav"></div>
    <div class="skeleton-swiper"></div>
    <ul class="skeleton-tabs">
      <li v-for="i in 8" class="skeleton-tabs-item"><span></span></li>
    </ul>
    <div class="skeleton-banner"></div>
    <div v-for="i in 6" class="skeleton-productions"></div>
  </div>
</template>

<style>
.skeleton {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.skeleton-nav {
  height: 45px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-swiper {
  height: 160px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-tabs {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}
.skeleton-tabs-item {
  width: 25%;
  height: 55px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 15px;
}
.skeleton-tabs-item span {
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 55px;
  background: #eee;
}
.skeleton-banner {
  height: 60px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-productions {
  height: 20px;
  margin-bottom: 15px;
  background: #eee;
}
</style>

接下來窄瘟，再新建一個skeleton.entry.js入口文件：

import Vue from 'vue'
import Skeleton from './Skeleton.vue'

export default new Vue({
  components: {
    Skeleton
  },
  template: '<skeleton />'
})

在完成了骨架屏的準備之后衷佃，就輪到一個關(guān)鍵插件vue-server-renderer登場了。該插件本用于服務(wù)端渲染蹄葱，但是在這個例子里氏义，我們主要利用它能夠把.vue文件處理成html和css字符串的功能，來完成骨架屏的注入图云，流程如下：

4.1.3 方案實現(xiàn)

接下來惯悠，在根目錄下新建一個skeleton.js，該文件即將被用于往index.html內(nèi)插入骨架屏竣况。


const fs = require('fs')
const { resolve } = require('path')

const createBundleRenderer = require('vue-server-renderer').createBundleRenderer

// 讀取`skeleton.json`克婶，以`index.html`為模板寫入內(nèi)容
const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
  template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')
})

// 把上一步模板完成的內(nèi)容寫入（替換）`index.html`
renderer.renderToString({}, (err, html) => {
  fs.writeFileSync('index.html', html, 'utf-8')
})

注意，作為模板的html文件丹泉，需要在被寫入內(nèi)容的位置添加``占位符情萤，本例子在div#app里寫入：

<div id="app">
 <!--vue-ssr-outlet-->
</div>

根據(jù)流程圖，我們還需要在根目錄新建一個webpack.skeleton.conf.js文件摹恨，以專門用來進行骨架屏的構(gòu)建筋岛。

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = {
  target: 'node',
  entry: {
    skeleton: './src/skeleton.entry.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js',
    libraryTarget: 'commonjs2'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  externals: nodeExternals({
    allowlist: /\.css$/
  }),
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    new VueSSRServerPlugin({
      filename: 'skeleton.json'
    })
  ]
}

可以看到，該配置文件和普通的配置文件基本完全一致晒哄，主要的區(qū)別在于其target: 'node'睁宰，配置了externals，以及在plugins里面加入了VueSSRServerPlugin寝凌。在VueSSRServerPlugin中柒傻，指定了其輸出的json文件名。
我們可以通過運行下列指令webpack --config ./webpack.skeleton.conf.js较木，在/dist目錄下生成一個skeleton.json文件,
運行node skeleton.js诅愚，就可以完成骨架屏的注入了
在package.json中配置ske

"scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "ske": "webpack --config ./webpack.skeleton.conf.js && node skeleton.js"
  },

運行ske

npm run ske

skeleton.json 這個文件在記載了骨架屏的內(nèi)容和樣式，會提供給vue-server-renderer使用。

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-skeleton</title>
  <style data-vue-ssr-id="742d88be:0">
.skeleton {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
}
.skeleton-nav {
  height: 45px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-swiper {
  height: 160px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-tabs {
  list-style: none;
  padding: 0;
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
}
.skeleton-tabs-item {
  width: 25%;
  height: 55px;
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 15px;
}
.skeleton-tabs-item span {
  display: inline-block;
  width: 55px;
  height: 55px;
  border-radius: 55px;
  background: #eee;
}
.skeleton-banner {
  height: 60px;
  background: #eee;
  margin-bottom: 15px;
}
.skeleton-productions {
  height: 20px;
  margin-bottom: 15px;
  background: #eee;
}
</style></head>
  <body>
    <div id="app">
      <div data-server-rendered="true" class="skeleton page"><div class="skeleton-nav"></div> <div class="skeleton-swiper"></div> <ul class="skeleton-tabs"><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li></ul> <div class="skeleton-banner"></div> <div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div><div class="skeleton-productions"></div></div>
    </div>
    <script src="/dist/build.js"></script>
  </body>
</html>

可以看到违孝，骨架屏的樣式通過<style></style>標簽直接被插入，而骨架屏的內(nèi)容也被放置在div#app之間泳赋。當然雌桑，我們還可以進一步處理，把這些內(nèi)容都壓縮一下祖今。改寫skeleton.js校坑，在里面添加html-minifier：

...

+ const htmlMinifier = require('html-minifier')

...

renderer.renderToString({}, (err, html) => {
+  html = htmlMinifier.minify(html, {
+    collapseWhitespace: true,
+    minifyCSS: true
+  })
  fs.writeFileSync('index.html', html, 'utf-8')
})

來看看效果：


4.2、page-skeleton-webpack-plugin

4.2.1安裝page-skeleton-webpack-plugin 
npm install --save-dev page-skeleton-webpack-plugin
4.2.2 根目錄創(chuàng)建shell文件夾（文件夾名字可以自己定義千诬，但是要和vue.config.js中儲存shell文件地址一致）耍目，用于儲存shell文件，也就是page-skeleton-webpack-plugin自動生成生成的骨架屏html文件
4.2.3 在index.html入口文件添加<!-- shell -->占位符
<div id="app">
    <!-- shell -->
</div>

若想要更改占位符,修改位置：修改node_modules/page-skeleton-webpack-plugin/src/util/index.js

const outputSkeletonScreen = async (originHtml, options, log) => {
  const { pathname, staticDir, routes } = options
  return Promise.all(routes.map(async (route) => {
    const trimedRoute = route.replace(/\//g, '')
    const filePath = path.join(pathname, trimedRoute ? `${trimedRoute}.html` : 'index.html')
    const html = await promisify(fs.readFile)(filePath, 'utf-8')
    const finalHtml = originHtml.replace('<!-- shell -->', html)   # 修改此處徐绑，只要保持和index.html入口文件占位符一致即可
    const outputDir = path.join(staticDir, route)
    const outputFile = path.join(outputDir, 'index.html')
    await fse.ensureDir(outputDir)
    await promisify(fs.writeFile)(outputFile, finalHtml, 'utf-8')
    log(`write ${outputFile} successfully in ${route}`)
    return Promise.resolve()
  }))
}
4.2.4 創(chuàng)建vue.config.js
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: ['/','/about'], // 將需要生成骨架屏的路由添加到數(shù)組中
        image:{ // 可配置骨架屏元素樣式
          color:"#333333",
          shape:"circle"
        }
      })
    ],
  },
  chainWebpack: (config) => {   // 解決vue-cli3腳手架創(chuàng)建的項目壓縮html 干掉<!-- shell -->導(dǎo)致骨架屏不生效
    if (process.env.NODE_ENV !== 'development') {
      config.plugin('html').tap(opts => {
        opts[0].minify.removeComments = false
        return opts
      })
    }

  },
};
4.2.5 運行項目
npm run serve

報錯解決辦法Error:

listen EADDRINUSE: address already in use :::8989
修復(fù)vue-cli3.0項目端口被占用的bug

// 修改node_modules/page-skeleton-webpack-plugin/src/skeletonPlugin.js
if (!this.server) {
    const server = this.server = new Server(this.options) // eslint-disable-line no-multi-assign
    server.listen().catch(err => server.log.warn(err))
  }
4.2.6 生成骨架屏

在瀏覽器打開頁面邪驮，通過 Ctrl|Cmd + enter 呼出插件交互界面，或者在在瀏覽器的 JavaScript 控制臺內(nèi)輸入toggleBar 呼出交互界面



骨架屏生成中傲茄，需要一小會兒時間



骨架屏生成好后毅访，會跳轉(zhuǎn)到以下頁面

保存骨架屏后，會在項目中的shell目錄下生成相關(guān)骨架頁面


4.2.7查看骨架屏效果
npm run build

4.3盘榨、vue-skeleton-webpack-plugin

4.3.1 安裝vue-skeleton-webpack-plugin 
npm install vue-skeleton-webpack-plugin
4.3.2 創(chuàng)建模板文件喻粹，如果不同的路由界面顯示不同的模板可以創(chuàng)建過個模板文件，我在src的common文件夾下面創(chuàng)建了skeleton文件夾并創(chuàng)建三個文件,這樣文件樣式可以根據(jù)自己需求自定義

Skeleton1.vue

<template>
    <div class="skeleton-wrapper">
        <header class="skeleton-header"></header>
        <section class="skeleton-block">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
        </section>
    </div>
</template>

<script>
export default {
    name: 'skeleton'
};
</script>

<style scoped>
.skeleton-header {
    height: 152px;
    background: grey;
    margin-top: 60px;
    width: 152px;
    margin: 60px auto;
}
.skeleton-block {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
</style>

Skeleton2.vue

<template>
    <div class="skeleton-wrapper">
        <header class="skeleton-header"></header>
        <section class="skeleton-block">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTA4MCAyNjEiPjxkZWZzPjxwYXRoIGlkPSJiIiBkPSJNMCAwaDEwODB2MjYwSDB6Ii8+PGZpbHRlciBpZD0iYSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgeD0iLTUwJSIgeT0iLTUwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94Ij48ZmVPZmZzZXQgZHk9Ii0xIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIi8+PGZlQ29sb3JNYXRyaXggaW49InNoYWRvd09mZnNldE91dGVyMSIgdmFsdWVzPSIwIDAgMCAwIDAuOTMzMzMzMzMzIDAgMCAwIDAgMC45MzMzMzMzMzMgMCAwIDAgMCAwLjkzMzMzMzMzMyAwIDAgMCAxIDAiLz48L2ZpbHRlcj48L2RlZnM+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwIDEpIj48dXNlIGZpbGw9IiMwMDAiIGZpbHRlcj0idXJsKCNhKSIgeGxpbms6aHJlZj0iI2IiLz48dXNlIGZpbGw9IiNGRkYiIHhsaW5rOmhyZWY9IiNiIi8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCA0NGg1MzN2NDZIMjMweiIvPjxyZWN0IHdpZHRoPSIxNzIiIGhlaWdodD0iMTcyIiB4PSIzMCIgeT0iNDQiIGZpbGw9IiNGNkY2RjYiIHJ4PSI0Ii8+PHBhdGggZmlsbD0iI0Y2RjZGNiIgZD0iTTIzMCAxMThoMzY5djMwSDIzMHpNMjMwIDE4MmgzMjN2MzBIMjMwek04MTIgMTE1aDIzOHYzOUg4MTJ6TTgwOCAxODRoMjQydjMwSDgwOHpNOTE3IDQ4aDEzM3YzN0g5MTd6Ii8+PC9nPjwvc3ZnPg==">
        </section>
    </div>
</template>

<script>
export default {
    name: 'skeleton'
};
</script>

<style scoped>
.skeleton-header {
    height: 152px;
    background: grey;
    margin-top: 60px;
    width: 152px;
    margin: 60px auto;
}
.skeleton-block {
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}
</style>

entry-skeleton.js

import Vue from 'vue'
import Skeleton1 from './Skeleton1'
import Skeleton2 from './Skeleton2'

export default new Vue({
  components: {
    Skeleton1,
    Skeleton2
  },
  template: `
    <div>
      <skeleton1 id="skeleton1" style="display:none"/>
      <skeleton2 id="skeleton2" style="display:none"/>
    </div>
  `
})
4.3.3創(chuàng)建vue.config.js
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')
const path = require('path')

module.exports = {
    configureWebpack: (config) => {
      config.plugins.push(new SkeletonWebpackPlugin({
        webpackConfig: {
          entry: {
            app: path.join(__dirname, './src/skeleton.js')
          }
        },
        minimize: true,
        quiet: true,
        router: {
          mode: 'hash',
          routes: [
            { path: '/', skeletonId: 'skeleton1' },
            { path:'/about', skeletonId: 'skeleton2' }
          ]
        }
      }))
    },
    // css相關(guān)配置
    css: {
      // 是否使用css分離插件 ExtractTextPlugin
      extract: true,
      // 開啟 CSS source maps?
      sourceMap: false,
      // 啟用 CSS modules for all css / pre-processor files.
      modules: false
    },
    // 在開發(fā)模式下分離css樣式草巡，讓骨架屏的css在開發(fā)模式下生效
    css: {
        extract: true
    }
}

vue-skeleton-webpack-plugin插件參數(shù)說明

webpackConfig 必填守呜，渲染 skeleton 的 webpack 配置對象
insertAfter 選填，渲染 DOM 結(jié)果插入位置山憨，默認值為字符串 '<div id="app">'
也可以傳入 Function查乒，方法簽名為 insertAfter(entryKey: string): string，返回值為掛載點字符串
quiet 選填萍歉，在服務(wù)端渲染時是否需要輸出信息到控制臺
router 選填 SPA 下配置各個路由路徑對應(yīng)的 Skeleton
mode 選填 路由模式侣颂，兩個有效值 history|hash
routes 選填 路由數(shù)組，其中每個路由對象包含兩個屬性：
path 路由路徑 string|RegExp
skeletonId Skeleton DOM 的 id string
minimize 選填 SPA 下是否需要壓縮注入 HTML 的 JS 代碼

來源：
https://juejin.im/post/5b79a2786fb9a01a18267362
https://segmentfault.com/a/1190000014832185

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末枪孩，一起剝皮案震驚了整個濱河市憔晒，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌蔑舞，老刑警劉巖拒担，帶你破解...
    沈念sama閱讀 217,277評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異攻询，居然都是意外死亡从撼，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門钧栖，熙熙樓的掌柜王于貴愁眉苦臉地迎上來低零，“玉大人婆翔，你說我怎么就攤上這事√蜕簦” “怎么了啃奴？”我有些...
    開封第一講書人閱讀 163,624評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長雄妥。 經(jīng)常有香客問我最蕾，道長，這世上最難降的妖魔是什么老厌？ 我笑而不...
    開封第一講書人閱讀 58,356評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任瘟则，我火速辦了婚禮，結(jié)果婚禮上枝秤，老公的妹妹穿的比我還像新娘醋拧。我一直安慰自己，他們只是感情好宿百，可當我...
    茶點故事閱讀 67,402評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布趁仙。 她就那樣靜靜地躺著，像睡著了一般垦页。 火紅的嫁衣襯著肌膚如雪雀费。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,292評論 1贊 301
  • 城市分裂傳說
    那天痊焊，我揣著相機與錄音盏袄，去河邊找鬼。 笑死薄啥，一個胖子當著我的面吹牛辕羽，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播垄惧，決...
    沈念sama閱讀 40,135評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼刁愿，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了到逊？” 一聲冷哼從身側(cè)響起铣口，我...
    開封第一講書人閱讀 38,992評論 0贊 275
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎觉壶，沒想到半個月后脑题，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,429評論 1贊 314
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡铜靶，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,636評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年叔遂，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,785評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡已艰，死狀恐怖痊末，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情哩掺，我是刑警寧澤舌胶，帶...
    沈念sama閱讀 35,492評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站疮丛，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏辆它。R本人自食惡果不足惜誊薄，卻給世界環(huán)境...
    茶點故事閱讀 41,092評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望锰茉。 院中可真熱鬧呢蔫，春花似錦、人聲如沸飒筑。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽协屡。三九已至俏脊，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間肤晓，已是汗流浹背爷贫。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留补憾，地道東北人漫萄。 一個月前我還...
    沈念sama閱讀 47,891評論 2贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像盈匾，于是被迫代替她去往敵國和親腾务。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 44,713評論 2贊 354