阅读 87

Vue项目性能优化

这是我参与更文挑战的第6天,活动详情查看: 更文挑战

参加工作以来,做过最多的项目就是后台管理系统,使用的技术栈都是Vue,所以今天就来总结一下做过的项目是如何进行性能优化的。使用Vue来写项目,上手很简单,入门门槛相对较低,但是要想开发一个快的飞起的项目还是需要深入学习一下一些原理的。Vue项目性能优化大概可以划分为代码层面的优化以及架构层面的优化。

代码层面的优化

  • v-if与v-show区分场景使用

    v-if是真正的条件渲染,直到条件第一次为真时才会渲染元素,每次切换过程中组件都会被销毁和重建

    v-show不管条件是什么,元素总会被渲染,只是基于CSS的display进行切换

    如果内容切换频繁,建议使用v-show,反之,则建议使用v-if

  • v-if与v-for不能同时使用

    v-for的优先级高于v-if,如果两者在同一个标签上使用,则会造成每次循环都会执行v-if,十分浪费性能,使用时尽量在外层套一个空标签,先做一层判断。

  • watch与computed区分场景使用

    computed更多的是作为缓存功能的观察者,可以将一个或多个属性通过计算生成新的值,当依赖的属性变化时,不会立即计算生成新的值,而是会先标记为脏数据,下次computed被获取的时候,才会重新计算并返回,适用于多个属性影响一个属性的情况下。

    watch是当属性发生变化时,会立即执行该函数,适用于一个属性变化会立即引起一系列的操作的情况下。

  • v-for要绑定key

    key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素,有相同父元素的子元素必须有独特的 key,重复的 key 会造成渲染错误。

  • 路由懒加载

    使用ES6的import方法按需加载路由,减少首屏加载时间,只有当用户点击跳转某页面时,才加载该页面。

  • 可复用的代码抽取成独立的组件

    在开发项目的时候,我们可以尽量把一些使用两次以及两次以上的功能抽离出来,封装成独立的组件,这样会极大的提高开发的效率,降低后期维护成本,代码也会更加优雅,不会出现一个文件内上千行代码。

  • 合理的使用keep-alive

    keep-alive 是 Vue 内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染,也就是将组件缓存起来。

架构层面的优化

  • 使用gzip压缩

    gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度。html、js、css文件甚至json数据都可以用它压缩,可以减小60%以上的体积,使用方法如下:

    1. 安装compression-webpack-plugin插件
    2. 在vue.config.js文件中写入 productionGzip: true
    3. 后端需要配置nginx

该文章只是列举了一些简单且常见的优化方式,优化的方式还有很多,还得深入学习,有不足的地方还请各位多多指教!

文章分类
前端
文章标签