vue项目的性能优化

结合lighthouse查看各项数据,不断进行性能优化,可以从代码、打包、部署这三个层面来优化

代码层面

1、v-if和v-show区分使用

  • v-if(惰性的)用的条件判断,是惰性的,false的话初始不会渲染,适用于运行很少改变条件
  • v-show不管是什么初始都会渲染,用的display: none来控制隐藏,适用于频繁切换条件的

2、computed、watch和methods区分使用

  • computed:
    • 一个数据受多个数据影响
    • 数据要经过开销很大的计算 (如遍历一个很大的数组并做大量计算),可以用computed的缓存特性,只有数据发生变化才会重新计算,否则直接返回缓存
  • watch:
    • 一个数据影响多个数据的
    • 数据变化时,需要执行异步或开销大的操作(比如:请求API)
  • methods:
    • 希望数据要实时更新,不需要缓存

3、v-for避免同时使用v-if(要知道优先级why)

  • v-for优先级要比v-if高,每次渲染都要先遍历进行条件判断,增加了计算成本
  • 可以在computed提前把v-if的数据项给过滤掉

优先级why:vue在编译模板时,会先检测模板中的指令,将模板解析成AST,再根据AST生成对应的render函数。它会先将v-for指令转换成一个生成Vnode的函数,并生成对应的Vnode数组,再会根据v-if的条件来决定是否渲染每个Vnode

4、v-for循环添加key(会问 什么是diff?why提高速度?)

  • 设置唯一的key,能精确找到该数据,数据改变时能较快定位到diff

diff算法目的是找出差异,最小化更新视图,发生在视图更新阶段,当数据发生变化的时候,diff就对比新旧虚拟DOM,只渲染有变化的部分。

  • 1.对比是不是同类型标签,不是同类型直接替换
  • 2.是同类型标签,就执行patchVnode方法,判断新旧vnode是否相等
  • 3.相等就直接返回,不相等就要对比新旧节点,对比原则以新节点为主,主要分为以下几种:
    • newVnode和oldeVnode都有文本节点,就用新节点换旧节点
    • new有子节点,old没有,就增new的子节点
    • new没有子节点,old有,则删
    • 都有子节点,则通过updateChildren对比子节点

why提高速度:

  • 添加唯一key让diff准确识别每个节点,在列表更新时,可以准确判断出哪些节点被添加、删除、移动
  • 有key就可以通过map直接获得值得对比的旧节点的下标
  • 如果没有key就要通过循环旧节点数组用sameVnode去判断新节点和旧节点是否值得比较,值得才返回旧节点下标
  • 很显然map查找要比循环数组快

5、用Object.freeze()冻结不需要响应式变化的数据

vue初始化时,会对数据进行劫持,将数据都转换成响应式的,但有的时候只是想单纯展示数据,就可以跳过数据劫持,大大提高初次渲染速度。

可以通过Object.freeze()将data某些数据冻结 ,也就是configurable设置为false,在defineReactive中会检测某个key对应的configurable是否为false,是则直接返回,不是就继续配置getter/setter。

export default {
  data: () => ({
    users: {}
  }),
  async created() {
    const users = await axios.get("/api/users");
    this.users = Object.freeze(users);
  }
};
  • 其他使用场景:固定配置信息、常量数据(枚举值或数据字典)
  • PS:冻结后的对象是不可变的,无法添加新的属性、删除属性,也无法修改值。要想解除对象的冻结是不可能的,因为Object.freeze是不可逆操作,想要修改对象就只能重新创建一个新对象

6、防抖和节流

防抖和节流是针对用户操作的优化。

  • 防抖就是在一段时间内只执行最后一次,主要用在搜索框实时搜索、输入验证、窗口大小调整。
  • 节流是在规定的时间内只执行一次,主要用在页面滚动加载、高频点击提交、表单重复提交。

可以自己手写实现防抖节流(一定要会 高频考点),但在vuecli脚手架中可以引用Lodash库里的防抖节流函数。

7、利用keep-alive缓存

缓存常见的组件(tab页、导航栏),避免在切换路由时重复渲染相同的组件,提高性能和用户体验

8、图片懒加载、压缩、雪碧图

8.1 图片懒加载

未出现在可视区域内的图片先不加载,等滚动到可视范围再加载,实现方法主要有以下三种:

  • IntersectionObserver 专门来检测某个元素是否出现在可视窗口,出现后就设置src,再取消监听。可以将逻辑封装成可重用的指令,在懒加载的图片元素上使用该指令即可

  • 移动端 可以直接在img标签添加loading="lazy"属性,浏览器自动处理图片的懒加载

  • vue中可以安装插件vue-lazyload,通过v-lazy写到对应的元素实现

    • 插件是在main.js中引入的,不会被webpack编译,直接写相对地址是获取不到图片正确地址的

    • 设置了翻页功能,且每页都是请求的数据进行渲染的,发现其他数据都会变,但是图片不变,解决办法就在后面加个key就行

      <img v-lazy="img.src" :key="img.src" >
      

IntersectionObserver(浏览器提供的API)实现图片懒加载原理:观察图片与视窗的交叉情况,从而判断是否出现在视窗中。实现图片懒加载步骤大概:

  • 创建一个观察器对象,指定要观察的图片 以及 触发交叉状态变化时的回调函数

  • 在函数中判断是否进入视窗内部

  • 进入的话就触发回调函数,执行图片加载操作,把真实地址赋给src,再停止监听

    Lazy-loaded image <script> // JavaScript // 创建 IntersectionObserver 对象 const observer = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { // 判断目标元素是否进入视窗内 const lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; // 将真实图片地址赋给src属性 observer.unobserve(lazyImage); // 停止观察该目标元素 } }); }); // 获取所有带有 lazy-load 类的图片元素 const lazyImages = document.querySelectorAll('.lazy-load'); // 遍历所有图片元素,开始观察 lazyImages.forEach(image => { observer.observe(image); }); </script>

8.2 图片压缩

可以在webpack.base.conf.js中url-loader设置limit 大小来处理图片,小于limit 的图片转换成base64格式

将图片转成base64格式的原因:

  • 减少HTTP请求:转成base64后,可以直接包含在HTML、CSS或JS文件中,而不用单独的HTTP请求,也就减少了服务器的负载
  • 增加缓存利用率:图片已经在文件中,可以利用浏览器的缓存机制,避免重复加载相同的图片资源

对于一些较大的图片可以用image-webpack-loader压缩,具体配置如下:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,  // 图片小于8KB时转换为base64
              name: '[name].[ext]',
              outputPath: 'images/'  // 输出到指定目录
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.90],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            }
          }
        ]
      }
    ]
  }
};

8.3 雪碧图

针对多个小图标可以利用雪碧图技术,将其合并成一张大图,减少HTTP请求次数

  • 把小图标准备好,放在同一个文件夹下

  • 用webpack插件webpack-spritesmith将其合并成一张雪碧图

  • 可以设置每个图标的样式

  • 通过background-position来显示需要的图标

9、路由懒加载

路由被访问才加载对应的组件,提高首屏显示速度

const Foo = () => import('./Foo.vue')

10、第三方插件按需引入

babel-plugin-component只引入需要的组件,减小项目体积。安装包导入依赖即可,在main.js按需引入组件

项目打包层面

1、提取公共代码

安装分析工具webpack-bundle-analyzer,会生成可视化的文件链路图,根据需求做调整。

CommonsChunkPlugin (webpack内置插件)去提取多个chunk的公共部分

2、减少ES6转换成ES5的冗余代码

babel在每个输出文件中内嵌依赖的辅助函数代码,不让这些代码重复出现,可以用babel-plugin-transform-runtime插件,减小babel编译出来的代码大小。

  • 安装包

  • 修改.babelrc配置文件

    "plugins": [
        "transform-runtime"
    ]
    

3、压缩和合并JS、CSS文件

使用OptimizeCssnanoPlugin插件来压缩和去重css样式文件,开启optimization.minimize来压缩js代码。

4、tree shaking

tree shaking只能处理ES6模块,消除未使用过的代码,减少文件大小。

使用生产模式,在config.js设置mode: 'production'来启用生产模式,用usedExports: true来启用tree shaking

项目部署层面

1、开启gzip压缩

前后端都可以压缩,不管在nginx还是webpack压缩,在nginx都要开启gzip压缩,要不然浏览器加载的还是未压缩的资源。

识别gzip压缩是否开启,只需要看响应头部有没有Content-Encoding:gzip这个属性,有就表明开启了。

(1)在vue-cli初始化项目中,默认有这个配置:

  • 先安装插件,再在config/index.js文件开启即可

    build: {
        // 其他代码
        ............
        productionGzip: true, // false不开启gizp,true开启
        // 其他代码
    }
    

(2)利用插件compression-webpack-plugin来实现:

用webpack会使打包时间变长,但用这个插件会有缓存,可以相对减少打包时间。

先安装好后,在vue.config.js配置支持gzip:

// vue.config.js 配置开启gzip
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
  const plugins=[
  new CompressionPlugin({
  algorithm: 'gzip',// 压缩格式
  test: new RegExp(`\\.(${['js', 'css', 'json', 'html'].join('|')})$`),// 正则匹配文件后缀
  threshold: 1024 * 5,// 压缩阀值超过5KB时才压缩
  minRatio: 0.5//压缩比例缩小50%才采用
  })]
  return {
  	plugins
  }
}

(3)在nginx上开启gzip

nginx压缩会占用服务器的CPU,浏览器每次请求资源,nginx都是实时压缩资源,资源很大再加上压缩级别很高(数字越大,压缩后的大小就越小)的话,返回资源的时间就会很长。

一般是nginx和webpack都开启压缩,并且在nginx加上gzip_static on配置,gzip_static启用后,浏览器请求资源时,nginx会先检查是否有该资源名称且后缀是.gz的文件,是就直接返回该gz文件内容,这样就可以避免nginx对该资源再进行压缩,浪费服务器的CPU。

在nginx/conf/nginx.conf中配置:

http {
    gzip  on;
    gzip_min_length 1k;
    gzip_comp_level 5;
    gzip_types application/javascript image/png image/gif image/jpeg text/css text/plain;
    gzip_buffers 4 4k;
    gzip_http_version 1.1;
    gzip_vary on;
}

2、将静态资源部署到CDN上,加速资源加载

大概的操作:

  • 选择合适的CDN提供商,将静态资源上传到CDN中
  • 配置CDN域名,将域名和上传的静态资源关联起来
  • 在前端代码中,要把原来的链接换成CDN域名下的链接

提高访问速度的原因:

  • 就近访问:CDN会在用户最近的节点上返回资源,减少网络传输的时间
  • 分担服务器负载
  • 缓存机制:CDN可以缓存静态资源的副本
  • 并行加载:支持并行加载多个资源,提高并发性和效率

3、设置合适的缓存策略(cache-control)

通过设置HTTP响应头中cache-control 字段来控制缓存策略,设置HTTP响应头expires字段(表示资源的过期时间),一般结合cache-control中的max-age使用,但expires是绝对的日期时间,max-age是相对于请求时间的秒数

  • 静态资源(img、CSS、JS):max-age和expires设置较长的缓存时间,减少服务器负载,加快页面加载速度
  • 动态信息(用户、订单信息):设置较短的max-age来实现及时更新 或 no-cache禁用缓存
相关推荐
Justinc.1 分钟前
CSS3新增边框属性(五)
前端·css·css3
neter.asia18 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫18 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
十一吖i36 分钟前
前端将后端返回的文件下载到本地
vue.js·elementplus
光影少年37 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_38 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891141 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾42 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu44 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化