骨架屏的实现方式

1.vue骨架屏

在开发vue项目时，在请求接口数据返回之前，使用一个loading图标表示加载中；进一步可以使用骨架屏代替loading图标，给用户更好的使用体验。

用一个flag标志，来表示请求接口是否已经完成，来控制骨架屏的显示与否。

1
2
3

优点： 定制性，不同页面可定制不同骨架屏 ， 方便开发

缺点： 不够灵活（产品更新迭代，需要同时修改骨架屏结构）、页面会有白屏时间

2.html模板骨架屏

上面的方法有一个很大的缺点就是页面还是有白屏时间，骨架屏的作用就是为了消除白屏，而上面的方法没有解决这个问题，因为它的骨架屏展现时间是在vue初始化结束后，获取到html之后到vue初始化完成的这一段时间，页面就会显示空白。

如果直接把骨架屏放在vue项目的模板文件 index.html 中的 div#app 里面，那浏览器一拿到html ，页面就会出现骨架屏了。

所以，我门可以直接写好一个骨架屏的结，放进div#app 对应的style 放进模板文件的 <header></header>中，也可以直接放一张图片，让设计小姐姐帮个忙，直接出一个骨架屏的图，放进去就完事儿了。

3.vue-skeleton-webpack-plugin

你都用上vue+webpack了，还要手写html ？咋这么low呢。
可不可以骨架屏结构用vue写，然后自动生成index.html呢？

当然是可以的嘛！

使用这个包，就可以解决了，按照文档和一些教程，一步一步的配置好webpack，然后打包你的骨架屏页面，最后把这个骨架屏插入到模板文件。之后如果骨架屏要修改，则自己手动再运行下命令打包，更新一下index.html 就可以了。

如果你在开发中，骨架屏的更新频率比较高，你可以把上面的这个步骤直接加入到 webpack.dev.conf.js ，这样在你每次修改骨架屏文件，都会自动修改，不需要额外的打包指令了。

4.page-skeleton-webpack-plugin

上面第3个方法已经足够满足咱们的需求了，但接下来这个库就更牛逼了，懒惰真的使人类进步呀。

假如，产品总是变更，骨架屏改了一版又一版，你是不是要抓狂，掏出了刀想杀人？
少年别冲动，老衲传授你一套绝学吧。

这是一个饿了么开源的库，牛逼在于，你不需要在手写骨架屏了。

自动生成！

是的，没错，不要998 不要688 它是免费的，厂家白送。来的早不如来的巧，现场的每个人都….

走错片场了~~~~
321 回来！

page-skeleton-webpack-plugin 这个项目文档上有一些demo，只需要几步配置，就可以给你的项目加上骨架屏了。用了就忘不了了。

基本原理和第三种方法是一样的，它主要的牛逼点在于，自动生成骨架屏结构。

它首先把需要骨架屏的页面在puppeteer无头浏览器打开，在node层获取到html结构，把页面的所有dom元素，分为几种类别，如：图片元素，文字元素，块状元素……

然后不同类型元素有不同的处理方法，他会在这些元素上增加一些对应的class ，来覆盖原来的dom元素的css，最基本的就是设置一个灰色的背景，color 设置为 transparent , 这样文字就看不到了，只能看到一个灰色，然后给图片元素src设置一个灰色的图片。

经过一系列骚操作之后，骨架屏诞生了，然后会生成一个html文件存在项目里，等你 npm run build的时候，他会把刚才生成的html打包进模板文件。这样就完成了。

而且，他还支持多页面骨架屏，稍微配置一下即可

需要注意的是，webpack build的时候会自动把index.html 的注释删除，导致在往index.html 插入骨架屏的时候，找不到替换关键词。所以需要在webpack.prod.conf.js改一下配置

new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
          // 注释下面这一句
        // removeComments: true,   
        collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },

牛逼！

真香！

又get到了一种装逼方法了！嘻嘻