vue 中的性能优化

简介: vue 中的性能优化

1)编码优化

  • 尽量减少data中的数据,data中的数据都会增加getter和setter,会收集对应的watcher
  • v-if和v-for不能连用
  • 如果需要使用v-for给每项元素绑定事件时使用事件代理
  • SPA 页面采用keep-alive缓存组件
  • 在更多的情况下,使用v-if替代v-show
  • key保证唯一
  • 使用路由懒加载、异步组件
  • 防抖、节流
  • 第三方模块按需导入
  • 长列表滚动到可视区域动态加载
  • 图片懒加载

2)用户体验优化

  • 骨架屏
  • PWA(渐进式WEB应用)
  • 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

3)SEO优化

  • 预渲染
  • 服务端渲染SSR

4)打包优化

  • 压缩代码;
  • Tree Shaking/Scope Hoisting;
  • 使用cdn加载第三方模块;
  • 多线程打包happypack;
  • splitChunks抽离公共文件;
  • sourceMap优化;

目录
相关文章
|
2天前
|
JavaScript
vue知识点
10月更文挑战第2天
17 3
|
1天前
|
JavaScript 数据可视化
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
这篇文章介绍了如何使用vue-cli 2和3版本来创建Vue项目,并详细说明了两者之间的主要区别。
15 5
vue-cli学习一:vue脚手架的 vue-cli2和vue-cli3版本 创建vue项目,vue的初始化详解
|
1天前
|
JavaScript 数据可视化
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
这篇文章详细介绍了Vue CLI 3版本创建项目时的Runtime-Compiler和Runtime-only两种模式的区别、Vue程序的运行过程、render函数的使用、eslint的关闭方法,以及Vue CLI 2和3版本配置文件的不同和脚手架3版本创建项目的配置文件配置方法。
11 3
vue-cli学习二:vue-cli3版本 创建vue项目后,Runtime-Compiler和Runtime-only两个模式详解;vue项目管理器;配置文件的配置在哪,以及如何配置
|
1天前
|
数据可视化 JavaScript 前端开发
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
低代码可视化工具--vue条件判断v-if可视化设置-代码生成器
11 2
|
2天前
|
缓存 JavaScript UED
vue的动态组件 keep-alive
【10月更文挑战第6天】
12 3
|
1天前
|
JavaScript UED
Vue双向数据绑定的原理
【10月更文挑战第7天】
|
3天前
|
JavaScript UED 开发者
Vue中的导航守卫有哪三种?分别有什么作用
Vue中的导航守卫有哪三种?分别有什么作用
|
3天前
|
JavaScript 前端开发 UED
|
2天前
|
JSON 数据可视化 JavaScript
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
10 0
|
2天前
|
JavaScript 开发工具
低代码开发工具教你Vue双向数据绑定
低代码开发工具教你Vue双向数据绑定
8 0