Vue 页面骨架屏注入实践

正文

vue init webpack-simple vue-skeleton

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

 lang="en">
  
    




    
 charset="utf-8">
    vue-skeleton
  
  
    
 id="app">
    
  

 id="app">
  
Hello skeleton
  
Hello skeleton
  
Hello skeleton

打开chrome的开发者工具，在 Network 里面找到 throttle 功能，调节网速为“Slow 3G”，刷新页面，就能看到页面先是展示了三句“Hello skeleton”，待js加载完了才会替换为原本要展示的内容。

现在，我们对于如何在Vue页面实现骨架屏，已经有了一个很清晰的思路——在 div #app 内直接插入骨架屏相关内容即可。

三、易维护的方案

显然，手动在 div #app 里面写入骨架屏内容是不科学的，我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里，我们当然希望所谓的骨架屏也是一个 . vue 文件，它能够在构建时由工具自动注入到 div #app 里面。

首先，我们在 / src 目录下新建一个 Skeleton . vue 文件，其内容如下：

  
 class="skeleton page">
    
 class="skeleton-nav">
    
 class="skeleton-swiper">
    
 class="skeleton-tabs">
      
 v-for="i in 8" class=




    
"skeleton-tabs-item">
    
    
 class="skeleton-banner">
    
 v-for="i in 6" class="skeleton-productions">
  
.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;
}

接下来，再新建一个 skeleton . entry . js 入口文件：

import Vue from 'vue'
import Skeleton from './Skeleton.vue'
export default new Vue({
  components: {
    Skeleton
  },
  template: ''
})




    

在完成了骨架屏的准备之后，就轮到一个关键插件 vue - server - renderer 登场了。该插件本用于服务端渲染，但是在这个例子里，我们主要利用它能够把 . vue 文件处理成 html 和 css 字符串的功能，来完成骨架屏的注入，流程如下：

四、方案实现

根据流程图，我们还需要在根目录新建一个 webpack . skeleton . conf . js 文件，以专门用来进行骨架屏的构建。

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({
    whitelist: /\.css$/
  }),
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  plugins: [
    new VueSSRServerPlugin({
      filename: 'skeleton.json'
    })
  ]
}

可以看到，该配置文件和普通的配置文件基本完全一致，主要的区别在于其 target : 'node' ，配置了 externals ，以及在 plugins 里面加入了 VueSSRServerPlugin 。在 VueSSRServerPlugin 中，指定了其输出的json文件名。我们可以通过运行下列指令，在 / dist 目录下生成一个 skeleton . json 文件：

webpack --config ./webpack.skeleton.conf.js

这个文件在记载了骨架屏的内容和样式，会提供给 vue - server - renderer 使用。

接下来，在根目录下新建一个 skeleton . js ，该文件即将被用于往 index . html 内插入骨架屏。

const fs = require('fs')
const { resolve } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
// 读取`skeleton.json`，以`index.html`为模板写入内容
const




    
 renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {
  template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')
})
// 把上一步模板完成的内容写入（替换）`index.html`
renderer.renderToString({}, (err, html) => {
  fs.writeFileSync('index.html', html, 'utf-8')
})

注意，作为模板的 html 文件，需要在被写入内容的位置添加 占位符，本例子在 div #app 里写入：

 id="app">

接下来，只要运行 node skeleton . js ，就可以完成骨架屏的注入了。运行效果如下：

 lang="en">
  
     charset="utf-8">
    vue-skeleton
  

请到「今天看啥」查看全文