骨架屏(page-skeleton-webpack-plugin)初探

时间：2024-01-27 13:58:59

作者：小土豆biubiubiu

博客园：https://www.cnblogs.com/HouJiao/

掘金：https://juejin.im/user/2436173500265335

微信公众号：土豆妈的碎碎念（扫码关注，一起吸猫，一起听故事，一起学习前端技术）

作者文章的内容均来源于自己的实践，如果觉得有帮助到你的话，可以点赞❤️给个鼓励或留下宝贵意见

前言

最近频频看到了骨架屏这个词，其实在这之前鲜少听过骨架屏这个词。只是平时在浏览网站时，会经常看到某个页面在尚未获取到真正数据时展示的一些占位图形。

那实际上这个就是前面所描述的骨架屏，即在页面数据尚未加载前先给用户展示出页面的大致结构，在获取到数据以后在具体展示页面的内容。那骨架屏相较于传统的那种loading，在很大程度上提升了用户体验。

所以今天这篇文章就是一篇骨架屏的初探与实践，内容本身非常简单，但是其中还是会有一些细节的东西需要注意，否则在实践实总是无法出现正常的结果。

page-skeleton-webpack-plugin

page-skeleton-webpack-plugin 是饿了么团队开发的一款webpack插件，这个插件可以根据不同的页面生成不同的骨架屏页面。

那接下来就在项目中实践一下page-skeleton-webpack-plugin。

项目简介

本次的项目是使用vue-cli2生成的一个项目，项目中组件的内容也非常的简单，可以 戳这里 获取项目代码。

page-skeleton-webpack-plugin安装

安装page-skeleton也非常简单，直接执行命令：npm install --save-dev page-skeleton-webpack-plugin即可。

注意文档中有明确说明还要安装html-webpack-plugin，本项目已经安装了html-webpack-plugin。如果你的项目中没有安装html-webpack-plugin，可以执行npm install --save-dev html-webpack-plugin进行安装。

接下来就需要开始实践了。

webpack配置

首先是需要我们在开发环境中生成骨架屏的代码。

所以第一步是在开发环境中配置SkeletonPlugin。

// 代码位置：/skeleton-screen-demo/build/webpack.dev.conf.js

// 步骤1：引入骨架屏模块
const { SkeletonPlugin } = require('page-skeleton-webpack-plugin')

// 省略代码...

plugins: [

    // 省略其他插件的配置代码...
    
    // 步骤2：在插件中进行配置
    new SkeletonPlugin({
      pathname: path.resolve(__dirname, '../shell'), // the path to store shell file
      staticDir: path.resolve(__dirname, '../dist'), // the same as the `output.path`
      routes: ['/', '/home'], // Which routes you want to generate skeleton screen
  })
]

SkeletonPlugin插件必选的三个配置项分别为：pathname、staticDir、routes，这三个配置项的作用分别如下：

配置项 数据类型 作用
pathname String 开发环境中点击保存按钮生成的骨架屏代码的保存路径
staticDir String 打包时生成的骨架屏的静态资源文件(官方文档指导要和webpack打包输出目录一致)
routes Array 需要生成骨架屏的路由(和项目中路由配置的path一致)

运行项目

开发环境中的webpack配置完成以后，使用npm run dev运行项目。
不过不幸的是出现了错误

相关文章