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