【Web】骨架屏
文章目录
- 概述
- 骨架屏的实现方案
- page-skeleton-webpack-plugin
- 安装
- 基本使用
- 来源
概述
骨架屏（Skeleton Screen）是一种在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图）的技术。当页面实际数据加载并渲染完成后，这些占位图会被实际内容替换。骨架屏的引入旨在改善用户体验，通过提前展示页面的基本框架，降低用户在等待加载过程中的焦躁情绪，使得加载过程主观上变得流畅自然。
骨架屏的实现方案
目前生成骨架屏的技术方案大概有三种：
-
使用图片、svg 或者手动编写骨架屏代码：使用 HTML + CSS 的方式，我们可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，我们对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足；
-
通过预渲染手动书写的代码生成相应的骨架屏：该方案做的比较成熟的是 vue-skeleton-webpack-plugin，通过 vueSSR 结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 DOM 节点和相关样式插入到最终输出的 html 中。
// webpack.conf.jsconst SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin');plugins: [//...new SkeletonWebpackPlugin({webpackConfig: {entry: {app: resolve('./src/entry-skeleton.js')}}})]
该方案的前提同样是编写相应页面的骨架屏组件，然后预渲染生成骨架屏所需的 DOM 节点，但由于该方案与 vue 相关技术直接关联，在当今前端框架三分天下的大环境下，我们可能需要一个更加灵活、可控的方案；
3 . 饿了么内部的生成骨架页面的工具：该方案通过一个 webpack 插件 page-skeleton-webpack-plugin 的方式与项目开发无缝集成，属于在自动生成骨架屏方面做的非常强大的了，并且可以启动 UI 界面专门调整骨架屏，但是在面对复杂的页面也会有不尽如人意的地方，而且生成的骨架屏节点是基于页面本身的结构和 CSS，存在嵌套比较深的情况，体积不会太小，并且只支持 history 模式。
// webpack.conf.jsconst HtmlWebpackPlugin = require('html-webpack-plugin')const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')const path = require('path')plugins: [//...new HtmlWebpackPlugin({// Your HtmlWebpackPlugin config}),new SkeletonPlugin({pathname: path.resolve(__dirname, `${customPath}`), // 用来存储 shell 文件的地址staticDir: path.resolve(__dirname, './dist'), // 最好和 `output.path` 相同routes: ['/', '/search'], // 将需要生成骨架屏的路由添加到数组中})]
page-skeleton-webpack-plugin
安装
使用 npm 安装此插件，同时还需要安装 html-webpack-plugin。
npm install --save-dev page-skeleton-webpack-pluginnpm install --save-dev html-webpack-plugin
基本使用
步骤 1： 配置 按照上述教程安装插件后，需要对其进行配置以使插件正常运行。插件会根据 Node 环境执行不同的操作。当 NODE_ENV === ‘development’ 时，插件可以执行生成和写入骨架页的操作。
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')
const path = require('path')const webpackConfig = {entry: 'index.js',output: {path: path.join(__dirname, '/dist'),filename: 'index.bundle.js'},plugins: [new HtmlWebpackPlugin({// 你的 HtmlWebpackPlugin 配置}),new SkeletonPlugin({pathname: path.resolve(__dirname, `${customPath}`), // 存储壳文件的路径staticDir: path.join(__dirname, './dist'), // 同上 `output.path`routes: ['/','/search'], // 想要生成骨架屏的路由})]
}
📔由于插件根据 process.env.NODE_ENV 环境变量选择不同的操作，因此需要在 package.json 文件的 scripts 选项中设置环境变量如下：
"scripts": {"dev": "cross-env NODE_ENV=development node server.js","build": "rm -rf dist && cross-env NODE_ENV=production webpack --progress --hide-modules"
}
即，在开发环境下设置 NODE_ENV 为 development，在生产环境下设置 NODE_ENV 为 production。
步骤 2： 修改 html-webpack-plugin 的模板 index.html
在你的应用根元素中添加 注释。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><div id="app"><!-- shell --></div>
</body>
</html>
步骤 3： 操作与写入骨架
在开发页面中，按 Ctrl 或者 Cmd + Enter 调出插件交互界面，或者在浏览器的 JavaScript 控制台输入 toggleBar 调出界面。
点击交互界面中的按钮预览骨架页。这个过程可能需要大约 20 秒。插件准备好骨架页后，将会通过浏览器自动打开预览页面，如图所示。
扫描预览页面上的二维码在手机上预览骨架页。您可以在预览页面上直接编辑源代码。点击右上角的 Write 按钮将骨架页写入到 shell.html 文件。
重新使用 webpack 包装应用程序。当页面重启时，你会看到在获取数据前应用的骨架结构。
来源
【Web技术】785- 网页骨架屏自动生成方案分享
web性能优化之页面加载体验（骨架屏）