vue优化之骨架屏_uview骨架屏-CSDN博客

本文链接：https://blog.csdn.net/gg451516921/article/details/84566108

本文介绍了在Vue项目中实现骨架屏的步骤，通过使用`vue-skeleton-webpack-plugin`插件进行配置，以提高用户体验，减少加载等待的不耐感。在组件目录下创建Skeleton文件，配置webpack.skeleton.conf，并在webpack配置文件中引入并设置插件参数。通过调整网络速度在浏览器调试工具中可观察到骨架屏效果。

摘要由CSDN通过智能技术生成

骨架屏可以理解为是当数据还未加载进来前，页面的一个空白版本，一个简单的关键渲染路径。可以看一下下面Facebook的骨架屏实现，可以看到在页面完全渲染完成之前，用户会看到一个样式简单，描绘了当前页面的大致框架的骨架屏页面，然后骨架屏中各个占位部分被实际资源完全替换，这个过程中用户会觉得内容正在逐渐加载即将呈现，降低了用户的焦躁情绪，使得加载过程主观上变得流畅。

此处的骨架屏就是用了一张base64的图片，有点类似于小米商城。

下面来说说vue使用骨架屏的步骤：

1.在component文件夹下创建Skeleton文件夹。

2.在Skeleton文件夹下创建这三个文件

//entry-skeleton.js

'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/components/Skeleton/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

//skeleton1.vue

<template>
    <div class="skeleton-wrapper">
        <div class="skeleton-header"></div>
        <section class="skeleton-block">
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC