语音聊天软件源码，合理使用骨架屏降低白屏影响

语音聊天软件源码，合理使用骨架屏降低白屏影响
SPA 单页应用，无论 vue 还是 react，最初的 html 都是空白的，需要通过加载 JS 将内容挂载到根节点上，这套机制的副作用：会造成长时间的白屏，
使用骨架屏其实并不能真正意义上优化白屏时长，只能从用户体验上来优化等待，其实只是一个loading效果，把大部分等待的白屏时间替换成了骨架屏来达到优化效果，在大部分移动端网页和app上都有应用，偏向C端体验了
使用骨架屏插件
这里以 vue-skeleton-webpack-plugin 插件为例，该插件的亮点是可以给不同的页面设置不同的骨架屏，这点确实很酷
(1)安装

  npm i vue-skeleton-webpack-plugin 

 

(2)vue.config.js 配置

// 骨架屏
const SkeletonWebpackPlugin = require("vue-skeleton-webpack-plugin");
module.exports = {configureWebpack: {plugins: [new SkeletonWebpackPlugin({// 实例化插件对象
        webpackConfig: {entry: {app: path.join(__dirname, './src/skeleton.js') // 引入骨架屏入口文件
          }},minimize: true, // SPA 下是否需要压缩注入 HTML 的 JS 代码quiet: true, // 在服务端渲染时是否需要输出信息到控制台
        router: {mode: 'hash', // 路由模式
          routes: [// 不同页面可以配置不同骨架屏// 对应路径所需要的骨架屏组件id，id的定义在入口文件内{ path: /^\/home(?:\/)?/i, skeletonId: 'homeSkeleton' },{ path: /^\/detail(?:\/)?/i, skeletonId: 'detailSkeleton' }]}})        ]}
}

 

(3)新建 skeleton.js 入口文件

// skeleton.js
import Vue from "vue";
// 引入对应的骨架屏页面
import homeSkeleton from "./views/homeSkeleton";
import detailSkeleton from "./views/detailSkeleton";export default new Vue({components: {homeSkeleton,detailSkeleton,},template: `<div><homeSkeleton id="homeSkeleton" style="display:none;" /><detailSkeleton id="detailSkeleton" style="display:none;" /></div>`,
});

 

以上就是语音聊天软件源码，合理使用骨架屏降低白屏影响， 更多内容欢迎关注之后的文章