前端骨架屏推荐之 Webpack 骨架屏实现

阅读时长 5 分钟读完

随着用户对页面加载速度和响应速度的要求越来越高,前端骨架屏这种加载中的页面展示方式就逐渐流行起来了。它可以在等待页面加载的过程中,先展示一个简单的页面骨架,让用户有一个快速反馈,减少等待时间的不适感。

本文将介绍一种用 Webpack 实现前端骨架屏的方法,并提供示例代码供学习和实践。

环境准备

在开始实践之前,需要先安装 node.js 环境和 Webpack。

  1. 安装 node.js 以及 npm

可在官网下载安装包,也可以使用 nvm 等工具安装。

  1. 使用 npm 安装 Webpack

创建骨架屏组件

首先,我们需要创建一个骨架屏组件,例如:

该组件可根据实际项目需要进行改动,例如增加更多的占位符,或者根据实际页面结构进行调整。

用 Webpack 实现骨架屏

下面我们通过一个示例来演示如何用 Webpack 实现骨架屏。

创建 webpack.config.js 文件

首先,需要在项目根目录下创建 webpack.config.js 文件,并引入相关依赖:

配置入口文件和输出文件

确定入口文件和输出文件路径:

配置 HTMLWebpackPlugin

用于在构建时生成 html 文件,并插入相关的 js 和 css:

-- -------------------- ---- -------
-------------- - -
  --- -------------------
    --------- -------------------
    --------- ------------
  ---
  --- -------------------
    --------- ----------------------
    --------- ----------------
    ------- -----
  ---
-

其中 template 属性用于指定模板文件路径,filename 属性用于指定生成的文件名和路径。inject 属性设置为 false,表示生成的文件不自动插入 js 和 css 文件。

配置 SkeletonWebpackPlugin

用于生成骨架屏模板和相关样式:

-- -------------------- ---- -------
--------------------
  --- -----------------------
    -------------- -
      ------ -
        ---- -------------------- --------------------------
      -
    --
    --------- -----
    ------ -----
    ------- -
      ----- -------
      ------- -
        - ----- ---- ----------- --------------- --
        - ----- --------- ----------- ---------------- -
      -
    -
  --
-

其中,webpackConfig 属性可以用于配置 Webpack,在此我们指定 entry 入口为 entry-skeleton.js 文件,该文件将用来生成骨架屏。

minimize 属性用于压缩代码,减小骨架屏生成的文件尺寸。

quiet 属性设置为 true,表示生成骨架屏时不输出日志信息。

router 属性用于配置路由(Vue-router、React-router 等),便于区分不同页面的骨架屏。

配置 CSS

-- -------------------- ---- -------
------------- - -
  ------ -
    -
      ----- ---------
      ---- -
        ----------------------------
        -------------
        ----------------
      -
    -
  -
-

其中,MiniCssExtractPlugin.loader 用于将 css 抽取成单独文件,css-loader 用于处理 css 文件,postcss-loader 用于对 css 进行后处理。

配置完成

至此,我们已经完成了 Webpack 骨架屏的配置,可以开始构建:

执行该命令后,Webpack 将自动生成骨架屏模板和样式,以及 js 和 css 文件。

最终效果如下:

总结

前端骨架屏可以在页面加载过程中,提前展示一个骨架页面,有效降低用户的等待时间和不适感。通过 Webpack,我们可以快速、简单地实现前端骨架屏功能,并获得良好的用户反馈。

希望这篇文章对您有所帮助,也欢迎您留下宝贵的建议和意见。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/648d4f0248841e9894b9c2b1

纠错
反馈