vue性能优化思考方向

本文探讨了Vue单页面应用的性能优化,包括浏览器缓存、防抖节流、资源懒加载、Nginx gzip压缩等。同时,详细介绍了前端webpack优化、本地存储、事件处理、代码优化等多个方向的策略,如按需加载、事件代理、代码结构优化等。还提到了Vue项目的特定优化措施,如减少data数据、v-if/v-for的正确使用、预渲染和服务端渲染等。
摘要由CSDN通过智能技术生成

vue单页面应用时会有一些性能优化的需求,此时方向在此总结,会持续增加:

1. 浏览器缓存

有些重复的数据可以存入浏览器缓存作为前端小数据库使用;

2. 防抖、节流

3. 资源懒加载、预加载

效果上会友好很多

4.开启Nginx gzip压缩

前端性能优化方向: 

一: webapck优化与开启gzip压缩

1.babel-loader用 include 或 exclude 来帮我们避免不必要的转译,不转译node_moudules中的js文件 其次在缓存当前转译的js文件,设置loader: 'babel-loader?cacheDirectory=true'

2.文件采用按需加载等等

3.具体的做法非常简单,只需要你在你的 request headers 中加上这么一句: accept-encoding:gzip

4.图片优化,采用svg图片或者字体图标 5.浏览器缓存机制,它又分为强缓存和协商缓存

二:本地存储——从 Cookie 到 Web Storage、IndexedDB 说明一下SessionStorage和localStorage还有cookie的区别和优缺点

三:代码优化

1.事件代理

2.事件的节流和防抖

3.页面的回流和重绘

4.EventLoop事件循环机制

5.代码优化等等

vue项目优化考虑方向:

1.尽量减少data中的数据,

2.data中的数据都会增加getter和setter,会收集对应的watcher

3.v-if和v-for不能连用 如果需要使用v-for给每项元素绑

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值