丝滑加载，体验更顺畅——基于vue-skeleton-webpack-plugin的骨架屏实战

前端

2023-10-24 23:52:05

骨架屏：让您的页面加载更快速、更流畅

什么是骨架屏？

在用户等待页面内容加载时，骨架屏（又称占位屏）是一种巧妙的技术，它会展示一个简单的页面框架。它类似于一个骨架，在页面内容逐步填入之前，为用户提供一个视觉提示。这有助于减少白屏时间，让页面加载过程看起来更流畅。

如何实现骨架屏？

骨架屏技术已经发展成熟，如今可以使用许多现成的插件来轻松实现它。在 Vue.js 项目中，我们可以使用vue-skeleton-webpack-plugin 插件。

vue-skeleton-webpack-plugin

这个插件可以在 webpack 构建过程中自动为 Vue.js 组件生成骨架屏代码。它从组件模板中提取信息，创建 CSS 文件来定义骨架屏的外观。

实现步骤：

安装插件：npm install vue-skeleton-webpack-plugin --save-dev
在 webpack 配置文件中配置插件：

const VueSkeletonWebpackPlugin = require('vue-skeleton-webpack-plugin')

module.exports = {
  plugins: [
    new VueSkeletonWebpackPlugin({
      output: 'skeleton.css',
      components: ['组件1', '组件2', '组件3'],
      loadingAnimation: 'pulse',
      loadingDuration: 1200
    })
  ]
}

在 Vue.js 组件中使用骨架屏：

<template>
  <div>
    <skeleton :loading="isLoading">
      <!-- 组件内容 -->
    </skeleton>
  </div>
</template>

<script>
import Skeleton from 'vue-skeleton-component'

export default {
  components: {
    Skeleton
  },
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    // 模拟异步加载数据
    setTimeout(() => {
      this.isLoading = false
    }, 1000)
  }
}
</script>