【Web】骨架屏

news2024/9/20 15:02:28

文章目录

概述
骨架屏的实现方案
page-skeleton-webpack-plugin
- 安装
- 基本使用
来源

概述

骨架屏（Skeleton Screen）是一种在页面数据加载完成前，先给用户展示出页面的大致结构（灰色占位图）的技术。当页面实际数据加载并渲染完成后，这些占位图会被实际内容替换。骨架屏的引入旨在改善用户体验，通过提前展示页面的基本框架，降低用户在等待加载过程中的焦躁情绪，使得加载过程主观上变得流畅自然。

骨架屏的实现方案

目前生成骨架屏的技术方案大概有三种：

使用图片、svg 或者手动编写骨架屏代码：使用 HTML + CSS 的方式，我们可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，我们对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足；
通过预渲染手动书写的代码生成相应的骨架屏：该方案做的比较成熟的是 vue-skeleton-webpack-plugin，通过 vueSSR 结合 webpack 在构建时渲染写好的 vue 骨架屏组件，将预渲染生成的 DOM 节点和相关样式插入到最终输出的 html 中。

 // webpack.conf.js
 const 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.js
 const 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-plugin

npm 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>