深入理解Page-Skeleton-Webpack-Plugin：自动化生成骨架屏的利器-优快云博客

深入理解Page-Skeleton-Webpack-Plugin：自动化生成骨架屏的利器

page-skeleton-webpack-plugin Webpack plugin to generate the skeleton page automatically 项目地址: https://gitcode.com/gh_mirrors/pa/page-skeleton-webpack-plugin

什么是骨架屏？

在Web应用开发中，骨架屏(Skeleton Screen)是一种提升用户体验的技术手段。它是指在页面数据加载完成前，先展示一个与真实页面结构相似的空白框架，让用户感知到内容即将呈现，从而减少等待的焦虑感。

Page-Skeleton-Webpack-Plugin简介

Page-Skeleton-Webpack-Plugin是一款基于Webpack的插件，它能够自动为你的单页应用(SPA)生成骨架屏。这个插件的主要特点是：

自动化程度高：只需简单配置，就能为不同路由页面生成对应的骨架屏
支持多种加载动画效果
专为移动端Web页面优化
提供丰富的定制化选项
几乎可以零配置使用

核心功能解析

1. 多路由支持

插件能够为应用中的多个路由页面分别生成对应的骨架屏，这对于复杂的单页应用尤为重要。你只需要在配置中指定需要生成骨架屏的路由路径即可。

2. 多种加载动画

插件内置了三种加载动画效果：

spin：旋转动画
chiaroscuro：明暗交替效果
shine：闪烁效果

开发者可以根据项目需求选择合适的动画效果。

3. 高度可定制化

插件提供了丰富的配置选项，允许开发者对骨架屏的各个方面进行精细控制：

可以自定义骨架块的颜色、形状
支持排除特定元素不生成骨架
可以隐藏或移除特定元素
支持多种CSS单位（rem、vw、vh等）

安装与配置

安装步骤

首先需要安装插件及其依赖：

npm install --save-dev page-skeleton-webpack-plugin html-webpack-plugin

基础配置

在webpack配置文件中添加插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin');
const path = require('path');

module.exports = {
  // ...其他webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      // 你的HtmlWebpackPlugin配置
    }),
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, 'shell'), // 骨架屏文件输出目录
      staticDir: path.resolve(__dirname, 'dist'), // 静态文件输出目录
      routes: ['/', '/about'], // 需要生成骨架屏的路由
    })
  ]
};

环境变量配置

由于插件会根据NODE_ENV环境变量执行不同操作，需要在package.json中配置：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server",
  "build": "cross-env NODE_ENV=production webpack"
}

使用流程详解

1. 修改HTML模板

在你的应用根元素内添加注释：

<div id="app">
  <!-- shell -->
</div>

2. 生成骨架屏

在开发环境中，通过快捷键Ctrl/Cmd + Enter或在控制台输入toggleBar呼出插件交互界面
点击生成按钮，等待约20秒生成骨架屏预览
在预览页面可以：
- 扫描二维码在手机端预览
- 直接编辑骨架屏源码
- 点击"写入"按钮保存骨架屏

3. 重新构建应用

完成骨架屏生成后，重新构建应用即可在页面加载时看到骨架屏效果。

高级配置选项

服务器选项

| 选项 | 类型 | 说明 | |------|------|------| | port | 字符串 | 插件服务器的端口号，默认8989 | | debug | 布尔值 | 是否开启调试模式，默认false | | minify | 对象/布尔值 | 骨架屏HTML文件的压缩选项 |

骨架屏选项

| 选项 | 类型 | 说明 | |------|------|------| | loading | 字符串 | 加载动画类型，可选spin/chiaroscuro/shine | | text.color | 字符串 | 文字块颜色 | | image.shape | 字符串 | 图片块形状，可选rect/circle | | excludes | 数组 | 不需要生成骨架的元素选择器 |