vue骨架屏实现方式(转载,作者:jrainlau)

Vue 页面骨架屏注入实践


作者:jrainlau

segmentfault.com/a/1190000014832185


作为与用户联系最为密切的前端开发者,用户体验是最值得关注的问题。关于页面loading状态的展示,主流的主要有loading图和进度条两种。除此之外,越来越多的APP采用了“骨架屏”的方式去展示未加载内容,给予了用户焕然一新的体验。随着SPA在前端界的逐渐流行,首屏加载的问题也在困扰着开发者们。那么有没有一个办法,也能让SPA用上骨架屏呢?这就是这篇文章将要探讨的问题。

文章相关代码已经同步到Github,欢迎查阅~

一、何为骨架屏

简单来说,骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成之后再把它替换掉。

这个技术在一些以内容为主的APP和网页应用较多,接下来我们以一个简单的Vue工程为例,一起探索如何在基于Vue的SPA项目中实现骨架屏。

二、分析Vue页面的内容加载过程

为了简单起见,我们使用 vue-cli搭配 webpack-simple这个模板来新建项目:

 
 
  1. vue init webpack-simple vue-skeleton

这时我们便获得了一个最基本的Vue项目:

 
 
  1. .

  2. ├── package.json

  3. ├── src

  4. │   ├── App.vue

  5. │   ├── assets

  6. │   └── main.js

  7. ├── index.html

  8. └── webpack.conf.js

安装完了依赖以后,便可以通过 npm run dev去运行这个项目了。但是,在运行项目之前,我们先看看入口的html文件里面都写了些什么。

 
 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3.  <head>

  4.    <meta charset="utf-8">

  5.    <title>vue-skeleton</title>

  6.  </head>

  7.  <body>

  8.    <div id="app"></div>

  9.    <script src="/dist/build.js"></script>

  10.  </body>

  11. </html>

可以看到,DOM里面有且仅有一个 div#app,当js被执行完成之后,此 div#app会被整个替换掉,因此,我们可以来做一下实验,在此div里面添加一些内容:

 
 
  1. <div id="app">

  2.  <p>Hello skeleton</p>

  3.  <p>Hello skeleton</p>

  4.  <p>Hello skeleton</p>

  5. </div>

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

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

三、易维护的方案

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

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

 
 
  1. <template>

  2.  <div class="skeleton page">

  3.    <div class="skeleton-nav"></div>

  4.    <div class="skeleton-swiper"></div>

  5.    <ul class="skeleton-tabs">

  6.      <li v-for="i in 8" class="skeleton-tabs-item"><span></span></li>

  7.    </ul>

  8.    <div class="skeleton-banner"></div>

  9.    <div v-for="i in 6" class="skeleton-productions"></div>

  10.  </div>

  11. </template>

  12. <style>

  13. .skeleton {

  14.  position: relative;

  15.  height: 100%;

  16.  overflow: hidden;

  17.  padding: 15px;

  18.  box-sizing: border-box;

  19.  background: #fff;

  20. }

  21. .skeleton-nav {

  22.  height: 45px;

  23.  background: #eee;

  24.  margin-bottom: 15px;

  25. }

  26. .skeleton-swiper {

  27.  height: 160px;

  28.  background: #eee;

  29.  margin-bottom: 15px;

  30. }

  31. .skeleton-tabs {

  32.  list-style: none;

  33.  padding: 0;

  34.  margin: 0 -15px;

  35.  display: flex;

  36.  flex-wrap: wrap;

  37. }

  38. .skeleton-tabs-item {

  39.  width: 25%;

  40.  height: 55px;

  41.  box-sizing: border-box;

  42.  text-align: center;

  43.  margin-bottom: 15px;

  44. }

  45. .skeleton-tabs-item span {

  46.  display: inline-block;

  47.  width: 55px;

  48.  height: 55px;

  49.  border-radius: 55px;

  50.  background: #eee;

  51. }

  52. .skeleton-banner {

  53.  height: 60px;

  54.  background: #eee;

  55.  margin-bottom: 15px;

  56. }

  57. .skeleton-productions {

  58.  height: 20px;

  59.  margin-bottom: 15px;

  60.  background: #eee;

  61. }

  62. </style>

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

 
 
  1. import Vue from 'vue'

  2. import Skeleton from './Skeleton.vue'

  3. export default new Vue({

  4.  components: {

  5.    Skeleton

  6.  },

  7.  template: '<skeleton />'

  8. })

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

四、方案实现

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

 
 
  1. const path = require('path')

  2. const webpack = require('webpack')

  3. const nodeExternals = require('webpack-node-externals')

  4. const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

  5. module.exports = {

  6.  target: 'node',

  7.  entry: {

  8.    skeleton: './src/skeleton.entry.js'

  9.  },

  10.  output: {

  11.    path: path.resolve(__dirname, './dist'),

  12.    publicPath: '/dist/',

  13.    filename: '[name].js',

  14.    libraryTarget: 'commonjs2'

  15.  },

  16.  module: {

  17.    rules: [

  18.      {

  19.        test: /\.css$/,

  20.        use: [

  21.          'vue-style-loader',

  22.          'css-loader'

  23.        ]

  24.      },

  25.      {

  26.        test: /\.vue$/,

  27.        loader: 'vue-loader'

  28.      }

  29.    ]

  30.  },

  31.  externals: nodeExternals({

  32.    whitelist: /\.css$/

  33.  }),

  34.  resolve: {

  35.    alias: {

  36.      'vue$': 'vue/dist/vue.esm.js'

  37.    },

  38.    extensions: ['*', '.js', '.vue', '.json']

  39.  },

  40.  plugins: [

  41.    new VueSSRServerPlugin({

  42.      filename: 'skeleton.json'

  43.    })

  44.  ]

  45. }

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

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

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

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

 
 
  1. const fs = require('fs')

  2. const { resolve } = require('path')

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

  4. // 读取`skeleton.json`,以`index.html`为模板写入内容

  5. const renderer = createBundleRenderer(resolve(__dirname, './dist/skeleton.json'), {

  6.  template: fs.readFileSync(resolve(__dirname, './index.html'), 'utf-8')

  7. })

  8. // 把上一步模板完成的内容写入(替换)`index.html`

  9. renderer.renderToString({}, (err, html) => {

  10.  fs.writeFileSync('index.html', html, 'utf-8')

  11. })

注意,作为模板的 html文件,需要在被写入内容的位置添加 <!--vue-ssr-outlet-->占位符,本例子在 div#app里写入:

 
 
  1. <div id="app">

  2. <!--vue-ssr-outlet-->

  3. </div>

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

 
 
  1. <html lang="en">

  2.  <head>

  3.    <meta charset="utf-8">

  4.    <title>vue-skeleton</title>

  5.  <style data-vue-ssr-id="742d88be:0">

  6. .skeleton {

  7.  position: relative;

  8.  height: 100%;

  9.  overflow: hidden;

  10.  padding: 15px;

  11.  box-sizing: border-box;

  12.  background: #fff;

  13. }

  14. .skeleton-nav {

  15.  height: 45px;

  16.  background: #eee;

  17.  margin-bottom: 15px;

  18. }

  19. .skeleton-swiper {

  20.  height: 160px;

  21.  background: #eee;

  22.  margin-bottom: 15px;

  23. }

  24. .skeleton-tabs {

  25.  list-style: none;

  26.  padding: 0;

  27.  margin: 0 -15px;

  28.  display: flex;

  29.  flex-wrap: wrap;

  30. }

  31. .skeleton-tabs-item {

  32.  width: 25%;

  33.  height: 55px;

  34.  box-sizing: border-box;

  35.  text-align: center;

  36.  margin-bottom: 15px;

  37. }

  38. .skeleton-tabs-item span {

  39.  display: inline-block;

  40.  width: 55px;

  41.  height: 55px;

  42.  border-radius: 55px;

  43.  background: #eee;

  44. }

  45. .skeleton-banner {

  46.  height: 60px;

  47.  background: #eee;

  48.  margin-bottom: 15px;

  49. }

  50. .skeleton-productions {

  51.  height: 20px;

  52.  margin-bottom: 15px;

  53.  background: #eee;

  54. }

  55. </style></head>

  56.  <body>

  57.    <div id="app">

  58.      <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>

  59.    </div>

  60.    <script src="/dist/build.js"></script>

  61.  </body>

  62. </html>

可以看到,骨架屏的样式通过 <style></style>标签直接被插入,而骨架屏的内容也被放置在 div#app之间。当然,我们还可以进一步处理,把这些内容都压缩一下。改写 skeleton.js,在里面添加 html-minifier

 
 
  1. ...

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

  3. ...

  4. renderer.renderToString({}, (err, html) => {

  5. +  html = htmlMinifier.minify(html, {

  6. +    collapseWhitespace: true,

  7. +    minifyCSS: true

  8. +  })

  9.  fs.writeFileSync('index.html', html, 'utf-8')

  10. })

来看看效果:

效果非常不错!至此,Vue页面接入骨架屏已经完全实现了。


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值