前端骨架屏推荐之 Webpack 骨架屏实现-JavaScript中文网-JavaScript教程资源分享门户

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

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

环境准备

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

安装 node.js 以及 npm

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

使用 npm 安装 Webpack

npm install webpack webpack-cli --save-dev

创建骨架屏组件

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

<div class="skeleton">
  <div class="skeleton-header"></div>
  <div class="skeleton-body"></div>
  <div class="skeleton-footer"></div>
</div>

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

用 Webpack 实现骨架屏

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

创建 webpack.config.js 文件

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

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const SkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

配置入口文件和输出文件

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

const config = {
  entry: './src/index.js',
  output: {
    filename: '[name].[hash:8].js',
    path: path.resolve(__dirname, 'dist')
  }
}

配置 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 骨架屏的配置，可以开始构建：

npm run build

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

最终效果如下：

总结

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

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

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

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