Open Source Ecosystems

一种自动生成骨架屏

什么是骨架屏？

对比情况看下下图：

骨架屏指的是当你打开一个 web 页面，在页面解析和数据加载之前，首先展示给用户大概的样式。

生成步骤

DOM 节点生成

可视区判断

修改部分

修复一些已知插件问题，详见官方 Demo 踩坑
去除原 after-emit 的 outputSkeletonScreen，改用自己的
优化预览二维码，实现实时修改样式，二维码实时更新
手机扫一扫预览，加入适配 flexible.js,保证看到的样式更真实
调整 priview 预览，把原 1280 宽度改成 375 手机宽度
基础到cli中

目前优化点

删除可视区外的元素。（已有）
双伪元素判断优化。
去除shapeOpposite 配置项。
对无关的标签属性进行去除，减小骨架代码体积，像img 标签的resize、border、align ;button 标签的type value disabled 等属性。
新增a标签的属性处理，像href、title、target、download 等属性。
去除部分冗余注释，像。

最终效果，"从9534行, 减到6987行"

待优化

list 列表的判断处理，目前仅判断UL/OL 标签，且子元素是LI 的，才进行处理。
去除骨架中的文字。
是否可生成 weex 形式
生成的骨架屏图片宽高有点不对

附上该插件的简易时序图

Installation

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { SkeletonPlugin } = require("page-skeleton-webpack-plugin");
const path = require("path");
const webpackConfig = {
  entry: "index.js",
  output: {
    path: __dirname + "/dist",
    filename: "index.bundle.js"
  },
  plugin: [
    new HtmlWebpackPlugin({
      // Your HtmlWebpackPlugin config
    }),
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, `${customPath}`), // the path to store shell file
      staticDir: path.resolve(__dirname, "./dist"), // the same as the `output.path`
      routes: ["/", "/search"] // Which routes you want to generate skeleton screen
    })
  ]
};

"scripts": {
  "dev": "cross-env NODE_ENV=development node server.js",
  "build": "rm -rf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
}

Step 2：Modify template `index.html` of html-webpack-plugin

Add comment  in the root element of you application.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- shell -->
    </div>
  </body>
</html>

Step 3：Operations and write shell

Documents

Default options

const pluginDefaultConfig = {
  port: "8989",
  text: {
    color: "#EEEEEE"
  },
  image: {
    shape: "rect", // `rect` | `circle`
    color: "#EFEFEF",
    shapeOpposite: []
  },
  button: {
    color: "#EFEFEF",
    excludes: []
  },
  svg: {
    color: "#EFEFEF",
    shape: "circle", // circle | rect
    shapeOpposite: []
  },
  pseudo: {
    color: "#EFEFEF", // or transparent
    shape: "circle" // circle | rect
  },
  device: "iPhone 6 Plus",
  debug: false,
  minify: {
    minifyCSS: { level: 2 },
    removeComments: true,
    removeAttributeQuotes: true,
    removeEmptyAttributes: false
  },
  defer: 5000,
  excludes: [],
  remove: [],
  hide: [],
  grayBlock: [],
  cookies: [],
  cssUnit: "rem",
  decimal: 4,
  logLevel: "info",
  quiet: false,
  noInfo: false,
  logTime: true
};