1.怎样使用Vue页面骨架屏注入
2.一个前端非侵入式骨架屏自动生成方案
3.自动化生成骨架屏的架屏技术方案设计与落地
怎样使用Vue页面骨架屏注入
这次给大家带来怎样使用Vue页面骨架屏注入，使用Vue页面骨架屏注入的模板注意事项有哪些，下面就是源码实战案例，一起来看一下。骨架
作为与用户联系最为密切的屏实前端开发者，用户体验是架屏php表单请求源码最值得关注的问题。关于页面loading状态的模板展示，主流的源码主要有loading图和进度条两种。除此之外，骨架越来越多的屏实APP采用了“骨架屏”的方式去展示未加载内容，给予了用户焕然一新的架屏体验。随着SPA在前端界的模板逐渐流行，首屏加载的源码问题也在困扰着开发者们。那么有没有一个办法，骨架也能让SPA用上骨架屏呢？这就是屏实这篇文章将要探讨的问题。
文章相关代码已经同步到 Github ，欢迎查阅~
一、何为骨架屏
简单来说，骨架屏就是在页面内容未加载完成的时候，先使用一些图形进行占位，待内容加载完成之后再把它替换掉。
这个技术在一些以内容为主的单机西游源码APP和网页应用较多，接下来我们以一个简单的Vue工程为例，一起探索如何在基于Vue的SPA项目中实现骨架屏。
二、分析Vue页面的内容加载过程
为了简单起见，我们使用 vue-cli 搭配 webpack-simple 这个模板来新建项目：
vue init webpack-simple vue-skeleton
这时我们便获得了一个最基本的Vue项目：
├── package.json
├── src
│ ├── App.vue
│ ├── assets
│ └── main.js
├── index.html
└── webpack.conf.js安装完了依赖以后，便可以通过 npm run dev 去运行这个项目了。但是，在运行项目之前，我们先看看入口的html文件里面都写了些什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-skeleton</title>
</head>
<body>
<p id="app"></p>
<script src="/dist/build.js"></script>
</body>
</html>可以看到，DOM里
面有且仅有一个 p#app ，当js被执行完成之后，此 p#app 会被 整个替换掉 ，因此，我们可以来做一下实验，在此p里面添加一些内容：
<p id="app">
<p>Hello skeleton</p>
<p>Hello skeleton</p>
<p>Hello skeleton</p>
</p>打开chrome的开发者工具，在 Network 里面找到 throttle 功能，调节网速为“Slow 3G”，刷新页面，就能看到页面先是展示了三句“Hello skeleton”，待js加载完了才会替换为原本要展示的窗口缩放源码内容。
现在，我们对于如何在Vue页面实现骨架屏，已经有了一个很清晰的思路——在 p#app 内直接插入骨架屏相关内容即可。
三、易维护的方案
显然，手动在 p#app 里面写入骨架屏内容是不科学的，我们需要一个扩展性强且自动化的易维护方案。既然是在Vue项目里，我们当然希望所谓的骨架屏也是一个 .vue 文件，它能够在构建时由工具自动注入到 p#app 里面。
首先，我们在 /src 目录下新建一个 Skeleton.vue 文件，其内容如下：
<template>
<p class="skeleton page">
<p class="skeleton-nav"></p>
<p class="skeleton-swiper"></p>
<ul class="skeleton-tabs">
<li v-for="i in 8" class="skeleton-tabs-item"><span></span></li>
</ul>
<p class="skeleton-banner"></p>
<p v-for="i in 6" class="skeleton-productions"></p>
</p>
</template>
<style>
.skeleton {
position: relative;
height: %;
overflow: hidden;
padding: px;
box-sizing: border-box;
background: #fff;
}
.skeleton-nav {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-swiper {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-tabs {
list-style: none;
padding: 0;
margin: 0 -px;
display: flex;
flex-wrap: wrap;
}
.skeleton-tabs-item {
width: %;
height: px;
box-sizing: border-box;
text-align: center;
margin-bottom: px;
}
.skeleton-tabs-item span {
display: inline-block;
width: px;
height: px;
border-radius: px;
background: #eee;
}
.skeleton-banner {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-productions {
height: px;
margin-bottom: px;
background: #eee;
}
</style>接下来，再新建一个 skeleton.entry.js 入口文件：
import Vue from 'vue'
import Skeleton from './Skeleton.vue'
export default new Vue({
components: {
Skeleton
},
template: '<skeleton />'
})在完成了骨架屏的准备之后，就轮到一个关键插件 vue-server-renderer 登场了。该插件本用于服务端渲染，但是在这个例子里，我们主要利用它能够把 .vue 文件处理成 html 和 css 字符串的功能，来完成骨架屏的注入，流程如下：
四、方案实现
根据流程图，ce源码开源我们还需要在根目录新建一个 webpack.skeleton.conf.js 文件，以专门用来进行骨架屏的构建。
const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = {
target: 'node',
entry: {
skeleton: './src/skeleton.js'
},
output: {
path: path.resolve(dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
externals: nodeExternals({
whitelist: /\.css$/
}),
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
new VueSSRServerPlugin({
filename: 'skeleton.json'
})
]
}可以看到，该配置文件和普通的配置文件基本完全一致，主要的区别在于其 target: 'node' ，配置了 externals ，以及在 plugins 里面加入了 VueSSRServerPlugin 。在 VueSSRServerPlugin 中，指定了其输出的json文件名。我们可以通过运行下列指令，在 /dist 目录下生成一个 skeleton.json 文件：
webpack --config ./webpack.skeleton.conf.js
这个文件在记载了骨架屏的内容和样式，会提供给 vue-server-renderer 使用。
接下来，在根目录下新建一个 skeleton.js ，该文件即将被用于往 index.html 内插入骨架屏。
const fs = require('fs')
const { resolve } = require('path')
const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
// 读取`skeleton.json`，以`index.html`为模板写入内容
const renderer = createBundleRenderer(resolve(dirname, './dist/skeleton.json'), {
template: fs.readFileSync(resolve(dirname, './index.html'), 'utf-8')
})
// 把上一步模板完成的内容写入（替换）`index.html`
renderer.renderToString({ }, (err, html) => {
fs.writeFileSync('index.html', html, 'utf-8')
})注意，作为模板的 html 文件，需要在被写入内容的位置添加 <!--vue-ssr-outlet--> 占位符，本例子在 p#app 里写入：
<p id="app">
<!--vue-ssr-outlet-->
</p>接下来，只要运行 node skeleton.js ，开源码电影就可以完成骨架屏的注入了。运行效果如下：
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-skeleton</title>
<style data-vue-ssr-id="dbe:0">
.skeleton {
position: relative;
height: %;
overflow: hidden;
padding: px;
box-sizing: border-box;
background: #fff;
}
.skeleton-nav {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-swiper {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-tabs {
list-style: none;
padding: 0;
margin: 0 -px;
display: flex;
flex-wrap: wrap;
}
.skeleton-tabs-item {
width: %;
height: px;
box-sizing: border-box;
text-align: center;
margin-bottom: px;
}
.skeleton-tabs-item span {
display: inline-block;
width: px;
height: px;
border-radius: px;
background: #eee;
}
.skeleton-banner {
height: px;
background: #eee;
margin-bottom: px;
}
.skeleton-productions {
height: px;
margin-bottom: px;
background: #eee;
}
</style></head>
<body>
<p id="app">
<p data-server-rendered="true" class="skeleton page"><p class="skeleton-nav"></p> <p class="skeleton-swiper"></p> <ul class="skeleton-tabs"><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li><li class="skeleton-tabs-item"><span></span></li></ul> <p class="skeleton-banner"></p> <p class="skeleton-productions"></p><p class="skeleton-productions"></p><p class="skeleton-productions"></p><p class="skeleton-productions"></p><p class="skeleton-productions"></p><p class="skeleton-productions"></p></p>
</p>
<script src="/dist/build.js"></script>
</body>
</html>可以看到，骨架屏的样式通过 <style></style> 标签直接被插入，而骨架屏的内容也被放置在 p#app 之间。当然，我们还可以进一步处理，把这些内容都压缩一下。改写 skeleton.js ，在里面添加 html-minifier ：
...
+ const htmlMinifier = require('html-minifier')
...
renderer.renderToString({ }, (err, html) => {
+ html = htmlMinifier.minify(html, {
+ collapseWhitespace: true,
+ minifyCSS: true
+ })
fs.writeFileSync('index.html', html, 'utf-8')
})来看看效果：
效果非常不错！至此，Vue页面接入骨架屏已经完全实现了。
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
如何使用js封装ajax功能函数与用法
JS里常见内置函数使用详解
一个前端非侵入式骨架屏自动生成方案
性能优化、减少页面加载时间、提升用户体验是前端领域永恒话题。面对前后端分离与异步渲染的普遍应用，页面在用户访问时不可避免出现短暂白屏。目前的解决方案多样，服务端同步渲染效果最佳，但成本高，需大量投入服务器部署与运维；页面loading通用性强，成本低，但信息传递量少；首屏骨架屏能预先提供大量信息，聚焦用户关注点，过渡自然，但成本稍高。
综合分析，骨架屏是解决白屏问题的优质方案。现有骨架屏方案大致分为三种：侵入业务式手写代码、非侵入业务式手写代码以及非侵入式骨架屏代码自动生成。侵入式方案对业务代码有较大侵入性，后续维护成本略高；非侵入式方案使骨架屏代码与业务代码解耦，维护成本降低，但有配置成本；自动生成方案无需手写骨架屏代码，使用成本低。
考虑现有方案优劣，我们选择非侵入式骨架屏自动生成方案。基于饿了么骨架屏方案设计思路，结合优化思路，设计出一种新方案。设计原则包括：高效、灵活、美观、兼容性好。方案分为骨架屏生成和注入项目源码两个环节，骨架屏生成阶段产出base或HTML+样式代码，base注入为背景图，HTML源码则根据需求选择。
优化点包括：利用Puppeteer进行页面操作，设置waitUntil参数确保页面充分加载；文本块处理采用linear-gradient背景；块处理将img标签src设为1x1px灰色base；a标签href设为javascript:void(0)防止误点；自定义属性设置调整骨架屏美观；首屏HTML与样式处理移除非首屏节点。
生成的骨架屏在实际业务中展现出优化加载时间、提升用户体验的效果。通过代码实现，我们优化了骨架屏生成与注入流程，降低开发成本，提高效率。
参考资料包括：社区现有骨架屏方案、CSS-Tricks教程、SegmentFault文章等，这些资源提供了设计与实现骨架屏的理论基础。
业务实践证明，该方案在实际应用中能有效减少白屏现象，提升页面加载体验，具备较高的实用价值。
效果演示与业务实践成果已通过链接提供，详细信息请查看。
自动化生成骨架屏的技术方案设计与落地
在构建高性能前端应用程序时，减少页面加载过程中白屏的时间一直是关注焦点，尤其在前后端分离的项目中。骨架屏（Skeleton）技术能够在此过程中发挥重要作用，通过在页面未加载完整内容前展示页面结构，给用户一种页面已开始渲染的错觉，从而提升用户体验。本文将探讨在拍卖源码工作台BeeMa架构中如何设计并实现自动生成骨架屏的技术方案。
### 骨架屏概览
骨架屏本质上是一种视觉过渡效果，其工作原理是先预加载页面的大致结构和布局元素，待数据加载完成后再替换为实际内容。相比于传统的加载动画（如菊花加载），骨架屏能更自然地引导用户注意到页面的进展，降低等待过程中的焦虑感。
### 技术调研与方案选择
现有实现骨架屏的技术方案大致可以分为三类，其中自动生成骨架屏方案具有较高的维护性和较低的配置成本。市面上流行的饿了么开源的webpack插件“page-skeleton-webpack-plugin”通过生成特定路由页面的骨架屏实现这一功能。这种方式将骨架屏代码与业务代码分离，由webpack注入到项目中，确保了代码的独立性和易管理性。然而，其依赖于webpack配置以及html-webpack-plugin，对于某些团队可能是一层额外的负担。
### 技术方案设计
基于前述分析，我们决定采用最低侵入业务代码且降低配置成本的骨架屏自动生成方案。结合BeeMa架构特点与vscode插件特性，设计了一套新方案。方案核心思路如下：
1. **设计原则与架构整合**：明确骨架屏需要遵循的原则，确保与BeeMa架构和vscode插件的协同作用。
2. **技术方案与流程**：基于现有的技术调研结果，详细规划从骨架屏生成、配置到注入的具体流程。
3. **关键技术和实现**：涉及到的关键技术，如Puppeteer、webView通信、配置校验与处理，以及通用处理逻辑。
4. **实施步骤与优化**：从安装部署到基本使用，包括配置需注意的细节，以及生成代码优化建议。
### 使用与优化
实施方案时，需全局安装Puppeteer来确保正确的路径查找与处理，以优化构建效率与资源占用。此外，引入优化措施，如调整骨架屏高度、标记特定元素以避免不必要的渲染，来进一步提升性能与用户体验。
### 结果演示与效果评价
通过该技术方案的实践，我们能够展示生成的代码大小与具体应用场景的表现，包括普通效果、带有通用头和渐变背景色的效果、复杂元素页面的表现，以及在不同网络条件下的差异。优化策略在提高性能同时，保证了良好的用户体验。
2024-11-27 05:50
2024-11-27 05:35
2024-11-27 05:24
2024-11-27 04:05
2024-11-27 04:04
2024-11-27 03:16
