vue优化之骨架屏
Vue 优化 骨架
2023-06-13 09:13:29 时间
1. 什么是骨架屏
如果一个web页面加载内容过多,刷新的时候会有空白页,造成不好的用户体验,但是如果加入骨架屏可以改善这一问题,骨架屏可理解为页面加载前的简单呈现版本,当页面加载完成,骨架屏各个占位区域被实际资源替换,可让用户觉得内容正在加载即将呈现,体验更加流畅。实际应用比较广泛,CSDN,小米商城等很多大型网站都用到了骨架屏方案。
2.如何实现
- 不建议: vue框架的原理是替换掉index.html中id为app的div部分,如果加载内容多,这一部分渲染就会慢(如果也不采用按需加载),可以在body部分加入骨架屏需要的图片,但是并不优雅,修改不方便,如果骨架屏内容过多,在这里展示显然不合适,而且无法实现多页面骨架屏,因此不推荐这种
<body>
<img src="../static/img/skeleton_bg.jpg" style="width: 100%;height: 100%;position: absolute;left:0;top:0;right:0;bottom:0;margin: auto"/>
<div id="app"></div>
</body>
- 建议:如何合理且优雅地实现骨架屏
- 代码实现:
安装依赖
- npm install vue-skeleton-webpack-plugin
在src目录下新建骨架屏页面Skeleton.vue、入口entry-skeleton.js
entry-skeleton.js
import Vue from 'vue'
import Skeleton from './Skeleton'
export default new Vue({
components: {
Skeleton
},
template: '<Skeleton />'
})
Skeleton.vue
<!--骨架屏-->
<template>
<div class="skeleton">
<img src="../static/img/skeleton_bg.jpg" />
</div>
</template>
<script>
export default {
name: 'skeleton',
methods: {
}
}
</script>
<style scoped>
img{
width: 100%;
height: 100%;
position: absolute;
left:0;top:0;
right:0;
bottom:0;
margin: auto
}
</style>
创建了骨架页面,不放到index里面也是不行的,因此在打包的时候做下面的处理,在build文件夹里新建文件webpack.skeleton.conf.js,目的是读取entry-skeleton,写入打包配置
'use strict';
const path = require('path')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const config = require('../config')
const utils = require('./utils')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap
function resolve(dir) {
return path.join(__dirname, dir)
}
let skeletonWebpackConfig = merge(baseWebpackConfig, {
target: 'node',
devtool: false,
entry: {
app: resolve('../src/entry-skeleton.js')
},
output: Object.assign({}, baseWebpackConfig.output, {
libraryTarget: 'commonjs2'
}),
externals: nodeExternals({
whitelist: /\.css$/
}),
plugins: []
})
//important: enable extract-text-webpack-plugin,让颜色生效
// 重点配置
skeletonWebpackConfig.module.rules[0].options.loaders = utils.cssLoaders({
sourceMap: sourceMapEnabled,
extract: true
})
module.exports = skeletonWebpackConfig
打包,在webpack.prod.conf.js和webpack.dev.conf.js 的plugins部分,加入plugin
new SkeletonWebpackPlugin({
webpackConfig: require('./webpack.skeleton.conf'),
quiet: true,
}),
运行一下,在加载页面时,有如下效果
相关文章
- vue浏览器缓存问题_vue兼容浏览器能兼容到几
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- axios挂载到vue项目中一些优化问题
- vue前端面试题2022_前端常见面试题
- Vue入门(一)——基本概念
- 1-Vue基础
- vue双向绑定原理 面试_vue首屏加载优化
- VUE组件封装_vue使用组件
- vue 页面关闭_vue怎么关闭滴一声
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- vue 项目启动报错:Syntax Error: Unexpected token 的解决方法
- Vue全家桶介绍_vue全家桶有什么好处
- Vue调试工具安装(vue devtools)
- Vue项目:菜农管理 【maven + spring boot + RESTFul + SSM+vue + axios】
- Vue打包优化之code spliting
- java和vue募捐网水滴筹项目捐款爱心系统筹款系统
- Vue中使用XML和JSON格式互转插件
- Vue 和 React 有什么不同?
- Vue项目优化首页加载速度
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- vue入门篇之Vue.js 组件
- Vue提示框组件vue-notification使用实例演示
- vue实现弹出框后光标自动定位到输入框Input详解程序员
- linux下快速部署Vue项目(linux部署vue)
- Vue2.0 搭建Vue脚手架(vue-cli)详解编程语言
- Vue 实现前后端分离,安全连接 MSSQL 数据库(vue 连接mssql)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- 淘系前端架构周刊:Next.js 11.1 发布、Vue.js 3.2 发布