Vue性能优化的方法有哪些

简介: Vue性能优化的方法有哪些

一. 编码优化:

1.不要将所有的数据都放在data中,data中的数据都会增加getter和setter,会收集对应的 watcher,这样就会降低性能。

2. vue 在 v-for 时给每项元素绑定事件需要用事件代理,节约性能。

3.尽可能拆分组件,来提高复用性、增加代码的可维护性,减少不必要的渲染。因为组件粒度最细,改组件的数组,它只会渲染当前的组件。

4. v-if 当值为false时内部指令不会执行,具有阻断功能,很多情况下使用v-if替代v-show,合理使用if和show。

5. key 保证唯一性,不要使用索引 ( vue 中diff算法会采用就地复用策略)。

6.合理使用路由懒加载、异步组件。

7.数据持久化的问题,使用防抖、节流进行优化,尽可能的少执行和不执行。

二、加载性能:

1.使用第三方插件实现按需加载

2.滚动到可视区域动态加载

3.图片懒加载

三、SEO 优化:

1.预渲染插件 prerender-spa-plugin,可以把我们代码提前运行起来,最后将代码保存下来,缺陷就是不实时。

2.服务端渲染 ssr

四、打包优化:

1.使用 cdn 的方式加载第三方模块

2.多线程打包 happypack

3.抽离公共文件 splitChunks

4.sourceMap 生成

 

五、缓存和压缩:

1.客户端缓存 服务端缓存

2.服务端 gzip 压缩

相关文章
|
2天前
|
数据采集 JavaScript 前端开发
Vue框架的优缺点是什么
【7月更文挑战第5天】 Vue框架:组件化开发利于重用与扩展,响应式数据绑定简化状态管理;学习曲线平缓,生态系统丰富,集成便捷,且具性能优化手段。缺点包括社区规模相对小,类型支持不足(Vue 3.x改善),路由和状态管理需额外配置,SEO支持有限。随着发展,部分缺点正被克服。
8 1
|
3天前
|
JavaScript
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
Vue卸载eslint的写法,单独安装eslint,单独卸载eslint
|
3天前
|
JavaScript
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
青戈大佬安装Vue,无Eslint安装版,vue2安装,vue2无eslint,最简单配置Vue安装资料
|
3天前
|
JavaScript
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
This dependency was not found:* vue/types/umd in ./src/router/index.jsTo install it, you can run
|
2天前
|
JavaScript 前端开发 开发工具
如何学习vue框架
【7月更文挑战第5天】 - 先学HTML/CSS/JS基础和前端工程化工具(npm, webpack, Git)。 - 从Vue官方文档学习基础,包括指令、组件、响应式系统。 - 深入研究Vue Router和Vuex,掌握路由管理和状态管理。 - 学习自定义指令和Mixins,优化性能技巧。 - 实战项目练习,加入Vue社区,阅读相关资源,提升技能。 - 关注Vue生态,持续实践和创新,以适应不断发展的框架。
6 0
|
2天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
12 0
|
3天前
|
缓存 JavaScript 算法
vue 性能优化
vue 性能优化
12 0
|
3天前
|
JavaScript 区块链
vue 自定义网页图标 favicon.ico 和 网页标题
vue 自定义网页图标 favicon.ico 和 网页标题
10 1
|
4天前
|
存储 JavaScript 数据安全/隐私保护
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
vue实战——登录【详解】(含自适配全屏背景,记住账号--支持多账号,显隐密码切换,登录状态保持)
14 1
|
4天前
|
JavaScript
vue实战——404页面模板001——男女手电筒动画
vue实战——404页面模板001——男女手电筒动画
12 1