您现在的位置是:首页 > 技术教程 正文

vue 代码优化18条 -- 全面提高页面性能

admin 阅读: 2024-03-30
后台-插件-广告管理-内容页头部广告(手机)

在这里插入图片描述

查看本专栏目录


关于作者

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信,一起交流。

热门专栏精彩推荐图文案例
Openlayers综合(300+) Cesium (200+) Leaflet (150+)
MapboxGL (150+)Canvas (100+) Echarts (100+)
Openlayers基础(70+)Geoserver服务 网络配置
HTML 杂货铺javascript 精选 CSS布局动画
Vue概念详解vue2 实战 vue3 实战

在这里插入图片描述

文章目录

    • 1. 路由懒加载
    • 2. 组件优化
    • 3. 生命周期钩子优化
    • 4. Keep-Alive 缓存
    • 5. 状态管理与计算属性
    • 6. 指令优化
    • 7. 静态资源优化
    • 8. 构建工具优化
    • 9. 错误处理与监控
    • 10. 网络请求优化
    • 11. 代码规范与审查
    • 12. 依赖管理
    • 13. 数据预取与缓存
    • 14. 服务端渲染(SSR)
    • 15. 移动端优化
    • 16. 代码拆分与动态加载
    • 17. 性能检测与监控
    • 18. PWA支持

Vue项目代码优化涉及多个层面,包括但不限于以下几点:

在这里插入图片描述

1. 路由懒加载

路由按需加载:通过动态导入(import())来分割代码块,使得每个路由对应的组件在用户实际访问到对应路由时才加载,而非一次性全部加载。这显著减小了首次加载的体积,提高了首屏加载速度。

Javascript
// 在Vue Router配置中使用
const User = () => import(‘@/views/User’)
const routes = [
{ path: ‘/user’, component: User }
]

2. 组件优化

合理划分组件:将复杂的组件拆分为更小粒度的子组件,确保组件的单一职责原则,降低冗余和复杂性。
复用组件:创建通用的可复用组件以减少代码量和重复渲染。
条件渲染:根据需要使用 v-if 或 v-show 控制组件的渲染,避免不必要的DOM操作和计算。

3. 生命周期钩子优化

避免在 created 和 mounted 钩子中执行大量耗时操作,这些操作可能导致界面卡顿,应考虑异步执行或使用 nextTick 等机制。

4. Keep-Alive 缓存

对于不需要每次切换时都重新渲染的组件,使用 进行缓存,避免不必要的初始化和销毁过程。

5. 状态管理与计算属性

使用 Vuex 进行状态管理,减少组件间的直接通信带来的性能开销。
合理利用 Vue 的计算属性和侦听器,避免在模板中做复杂的计算。

6. 指令优化

尽量减少不必要的 v-model 和 v-bind 更新,特别是在大规模列表渲染中。
使用 v-for 时提供唯一 key,以利于Vue内部高效的DOM更新策略。

7. 静态资源优化

图片懒加载:使用如 vue-lazyload 插件仅在图片进入视口时加载,减轻初始加载压力。
资源压缩合并:通过构建工具如Webpack进行CSS/JS压缩、代码分割、图片转为WebP格式等操作。
开启Gzip压缩:服务端启用Gzip压缩传输,降低网络传输大小。

8. 构建工具优化

使用Vue CLI提供的现代模式进行构建,开启tree shaking、代码压缩等功能。
配置Webpack或Vite时,排除生产环境不需要的SourceMap (devtool 设置)。

9. 错误处理与监控

异常捕获与上报,保证线上体验的同时收集异常信息用于后续分析和修复。
使用性能分析工具(如Chrome DevTools)分析性能瓶颈并针对性优化。

10. 网络请求优化

  • HTTP缓存策略:设置合理的HTTP缓存头,利用浏览器缓存机制。
  • 请求合并与延时发送:对于高频低优先级请求可以考虑合并或延时发送。

11. 代码规范与审查

遵循编码规范,编写易于理解和维护的代码,可通过ESLint等工具进行自动化检查。
定期进行代码审查,找出潜在的问题和冗余,保持代码质量。

12. 依赖管理

精简第三方库依赖,只引入必要的功能模块,避免“大而全”的库增加项目体积。
定期检查依赖库版本,及时升级至稳定版,获取性能改进和bug修复。

13. 数据预取与缓存

对于初次加载需要的数据,可以在路由导航守卫(navigation guards)中进行预取,提高页面渲染速度。
对于频繁请求且结果不变的数据,可以存储在本地缓存如localStorage或IndexedDB中,减少网络请求。

14. 服务端渲染(SSR)

对SEO有要求或者首屏加载速度要求较高的场景,可以采用Vue的服务端渲染,将Vue应用的部分逻辑在服务器端完成,返回HTML给客户端,从而加速首屏内容展示。

15. 移动端优化

移动端适配:采用响应式布局框架如Flex布局或Grid布局,并针对不同屏幕尺寸优化UI设计。
避免移动端滚动性能问题:使用Vue的内置指令v-bind:style="{‘transform’: 'translate3d(0, '+scrollY+‘px, 0)’}"实现平滑滚动,利用硬件加速。

16. 代码拆分与动态加载

动态引入CSS文件,避免样式阻塞渲染。
使用Webpack的SplitChunksPlugin对公共库进行拆分,使各个chunk共享相同的依赖库。

17. 性能检测与监控

利用Vue DevTools插件进行组件级别的性能分析。
结合Lighthouse、PageSpeed Insights等工具进行性能测试和评估。

18. PWA支持

根据项目需求,可以考虑将Vue应用转变为渐进式Web应用(PWA),提供离线访问、推送通知等功能,提升用户体验。

通过上述18种方式,我们可以全面地从架构、性能、资源加载等多个方面对Vue项目进行优化,使其在保证功能完整性和用户体验的前提下,拥有更佳的运行效率和更快的加载速度。

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索
排行榜