Vue中常见的性能优化,项目优化/单页面性能优化,Vue中六大优化方案

18 篇文章 0 订阅
1.编码优化
1. 下里将所有的数据都放在data中,data中的教据都会增加getter和setter,会收集对应的watcher
2. vue在v-for时给每项元素绑定事件需要用事件代理
3. spa页面采用keep-alive缓存组件
4. 拆分组件(提高复用性.增加代码的可维护性,减少不必要的渲染)
5. vif当值为false时内部指令不会执行,具有阻断功能,很多惆况下使用v-if代v.show
6. key保证唯一性(默认vue会采用就地复用策略}
7.object.freeze 冻结教据(就不会getter和setter)
8. 合理使用路由懒加载、异步组件
9. 尽量采用runtime运行时版本
10. 教据持久化的问题(防抖、节流)
2.Vue加载性能优化
1.使用第三方框架,按照按需加载导入
2.滚动可视化区域懒加载
3.图片懒加载
3.用户体验
1.app-skeleton 骨架屏 / app-shell app 壳
2.单页面切换动画
4.SEO优化
1.预渲染插件 prerender-spa-plugin
2.服务端渲染 ssr
5.打包优化
1.使用 cdn 的方式加载第三方模块
2.多线程打包 happypack
3.splitChunks 抽离公共文件
4.sour ceMap 生成
6.缓存/压缩
1.客户端缓存 or 服务端缓存
2.服务端 gzip 压缩
  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值