脚本宝典收集整理的这篇文章主要介绍了小柚智汇-Vue项目之浅谈性能优化,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
江头月底,新诗旧梦,孤恨清香。
随着EDG夺冠的喜讯从7777公里外的冰岛传来,我也完成了自己的 第一个主导团队开发的Vue项目:
项目前端演示地址: 小柚智汇-卓越生态管理平台 http://39.105.118.190:5000 项目前端代码仓库: github地址(项目代码不完整,只做部分展示)
前端使用技术:后端技术方案
虽然项目昨天上线,也提供班级使用,但是从内测反馈结果来看,有很多的问题:
经过反复思考,决定做出性能优化之路:像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时。
就图片这块来说,与其说我们是在做“优化”,不如说我们是在做“权衡”。因为我们要做的事情,就是去压缩图片的体积(或者一开始就选取体积较小的图片格式)。但这个优化操作,是以牺牲一部分成像质量为代价的。因此我们的主要任务,是尽可能地去寻求一个质量与性能之间的平衡点。
对于图片的处理,让我想起了那句:做电商就是做图片。 打开某东,某宝,里面处处可见,都是流量巨大、技术成熟的站点。
那么我项目中的【柚子小组】模块,对于图片是高需求的,时下应用较为广泛的 Web 图片格式有 JPEG/JPG、PNG、WebP、Base64、SVG 等。对于不同的图片所应用的位置不同。<el-pagination>
的绑定,但仅仅是对前端的分页,如果一次性请求大量数据,效果还是一样甚微,只是利用v-for对渲染进行了循环控制。 利用v-for切出前8个数组索引:
v-for="(item, index) in docs.slice((currentPage-1)*pagesize,currentPage*pagesize)" :key="index"
建议交给后端做分页处理。
这里我们要提到虚拟化列表:
借用此图,有四个概念:
实现:主要就是通过v-if去控制列表的展示,通过startIdx和endIdx的增减,去展示不同位置的数据,让这两个值递增就可以实现列表滚动。
当我们第一次在url输入http://xxx.xxx.xxx.xxx:xxx时候,浏览器会有白屏现象,为此:
vue.config.js中配置:
忽略打包第三方库 externals: {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
'element-ui': 'ELEMENT',
moment: 'moment'
},
在index.html中按需引入cdn外链
<!-- built files will be auto injected -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
利用webpack生成项目体积蓝图,检查项目依赖和插件的占比
这个是优化后的: 甚至cdn外链也可以自行购买,但是需要绑定域名(备案)由于CDN部署在网络运营商的机房,这些运营商又是终端用户的网络服务提供商,因此用户请求路由的第一跳就到达了CDN服务器,当CDN中存在浏览器请求的资源时,从CDN直接返回给浏览器,最短路径返回响应,加快用户访问速度,减少数据中心负载压力
CDN缓存的一般是静态资源,如图片、文件、CSS、script脚本、静态网页等,但是这些文件访问频度很高,将其缓存在CDN可极大改善网页的打开速度。 反向代理
chunk-vendors.js
的文件,也是浏览器首要渲染的文件,在使用gzip压缩后明显体积大幅缩小。
ws = new WebSocket(target); //实例化一个ws长链接对象
ws.onopen = function() {
console.log("onopen"); //长链接打开
};
ws.onmessage = function(e) {
console.log(e); //长链接数据传输 主要用这个
};
ws.onclose = function() {
console.log("onclose");//长链接关闭
};
ws.onerror = function() {
console.log("onerror");//长链接出错
};
一方面,cookie包含在每次请求和响应中,太大的cookie会严重影响数据传输,因此哪些数据需要写入cookie需要慎重考虑,尽量减少cookie中传输的数据量。另一方面,对于某些静态资源的访问,如CSS、script等,发送cookie没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时发送cookie,减少cookie传输次数。
这篇文章很好的解释了防抖和节流。
啊这,,,,必要性。从 Cookie 到 Web Storage、IndexDB
// 将接口返回的用户存储到本地方便应用
window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
// 通过编程式导航跳转到后台主页
this.$router.push('/page')
一般的操作都只是把token存到web storage里面,但其实还有很多不长更新的页面,和css等,都可以暂存到浏览器本地中。
总结下来,对于项目还有很多细化和优化的地方需要去做,但是这次项目的实战对个人和团队的提升是非凡的,无论是从产品设计,业务流程,前端渲染,后端服务,git协同,联调交互等。每个人对于自己的任务都非常清晰,希望它能成为每个人简历上的闪光点。
望大家共同努力,不止“小有智慧”,更能大有成就。
以上是脚本宝典为你收集整理的小柚智汇-Vue项目之浅谈性能优化全部内容,希望文章能够帮你解决小柚智汇-Vue项目之浅谈性能优化所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。