1.vue性能优化
1.编码优化（代码层面）
- 不要将所有数据都放到
data中，因为data中数据会遍历添加getter和setter，会收集对应的watcher - 若在方法或计算属性中不对组件数据进行修改，最好在刚开始时就将数据赋值给变量，之后使用直接使用变量效率较高（
let {user,list} = this）。 - 在v-for时需要给每项元素绑定事件时用外层事件代理
- v-for遍历时避免同时使用v-if，使用计算属性提前把数组中要显示的进行过滤，然后v-for直接使用过滤后的数组
- SPA页面采用
keep-alive缓存组件，可以添加include和exclude来配置需要缓存的组件。 - 尽量细地拆分组件，提高复用性、可维护性，减少不必要的渲染
v-if和v-show区分使⽤场景：v-if为false时内部指令不会执行，有阻断功能，不频繁的显隐功能或简单的组件尽量用v-if代替v-show- 较复杂的组件渲染比较吃力，显隐功能可以使用
v-show进行缓存组件 computed和watch区分使⽤场景：computed的值有缓存，只有它依赖的属性值发⽣改变，下⼀次获取computed的值时才会重新计算。watch每当监听的数据变化时都会执⾏回调进⾏后续操作；当我们需要在数据变化时执⾏异步或开销较⼤的操作时，应该使⽤watch。当一个属性受多个属性影响的时候需要computed，当一个属性影响多个属性的时候用watch。- v-for 遍历必须为 item 添加
key，key保证唯一性（vue的dom更新采用就地复用策略） Object.freeze冻结数据，这些数据只是单纯展示，避免不必要的响应式（this.userInfo = Object.freeze(userInfo)）- 使用
v-once指令，处理只需要渲染一次的节点或组件（低开销的静态组件）。 - 无状态（没有自己的数据，只是展示父组件的传值）的组件标记为函数式组件（
<template functional></template>）。 - 合理使用路由懒加载、异步组件（缩减初始包体积，路由会按需加载）
- 数据持久化（做缓存）
- 防抖、节流
- 组件在销毁时注意销毁事件监听和定时器，防止内存泄漏。（vue组件在销毁时会自动销毁组件本身和组件节点上的的事件和指令）
- 通过对css样式的合并和js逻辑的封装：如在两不同组件中，拥有相同的样式，可通过全局css文件中设置。在js文件上，将相同的方法封装合并成一个方法，如API请求。
2.页面加载性能优化
- 第三方模块按需导入，比如使用elementUI时，不需要的组件无需引入，避免体积过大。（使用babel-plugin-component插件）
- 滚动到可视区动态加载。比如长列表使用虚拟滚动，滚动到一定位置时加载下一页。
- 图片懒加载，动态加载图片。比如
vue-lazyload插件，通过v-lazy指令来取代img的src属性。
3.用户体验
- 骨架屏（app-skeleton）首屏加载Loading
- app壳（app-shell）默认先渲染一个导航，或者静态视图
4.SEO优化
- 预渲染插件（prerender-spa-plugin）
- 服务端渲染SSR
5.打包优化
- 使用CDN加载第三方资源，就可以缓解我们服务器的压⼒。什么是CDN
- 多线程打包（happypack）
- Webpack 、Vite 编译时对图⽚进⾏压缩
- Webpack可使用相关插件如useless-files-webpack-plugin检查及删除无用文件
6.首屏加载优化
- 减少入口文件体积，压缩文件
- 合理使用路由组件按需加载、懒加载、异步组件。缩减初始包体积，在调用某个组件时再加载对应的js文件；
- 静态资源本地缓存，后端返回的资源：采用http缓存，前端合理利用localStorage，CDN静态资源缓存
- UI框架、自定义组件按需加载
- 图片压缩，开启gzip压缩（webpack中配置）
- 骨架屏、首屏加载Loading
- 图标可通过font-icon或矢量图（如SVG）来代替，也可将小图片转为Base64格式进行展示。
- 通过精灵图来减少小图标的总请求数
- 图片懒加载，对未可见的图片进行延迟加载。比如通过安装vue-lazyload模块实现懒加载。图片懒加载实现
- 将公用的JS库通过script标签外部CDN引入，减小打包的js大小，让浏览器并行下载资源文件，提高下载速度；
- 加一个首屏 loading 图，提升用户体验；
7.计算首屏加载时间
首屏加载时间，指的是浏览器从相应用户输入网址，到首屏内容渲染完成的时间。可以使用window.performance提供的API进行计算。可以在window.onload事件中读取performance提供的各种数据。
计算首屏加载时间公式：times = (performance.timing.domComplete - performance.timing.navigationStart) / 1000
若首屏的DOM会持续变化的话，可以使用 MutationObserver 方法监听DOM变动，根据变动的时间计算DOM趋于稳定的时间节点。
8. 服务器访问速度优化
- 开启服务器 Gzip 压缩，需要前端提供压缩包，然后在服务器开启压缩，⽂件在服务器压缩后传给浏览器，浏览器解压后进⾏再进⾏解析。（通过webpack或Vite对项目体积进行压缩）
- 全站 CDN 加速，使用一些第三方 CDN 云加速服务。什么是CDN
2.浏览器性能检测（F12控制台）
Performance（性能）
Performance 是 Chrome 开发者工具中的一个功能，用于记录网页从初始化到运行时的所有性能指标。
使用 Performance 前，我们最好打开 Chrome 的无痕模式。因为 Chrome 上一般有着大量的插件，会或多或少的影响页面的性能，所以我们关掉这个来避免对页面性能的影响。
点击左上角的 Record（小圆点）按钮，Performance 进入 Record 阶段，从此刻开始，它会记录用户的交互以及这些交互对页面性能数据的影响。
生成的 Performance 性能报告，我们先看顶部的三个数据：FPS、CPU 以及 NET。
FPS：主要和动画性能有关，代表每秒帧数。图表中的绿色长条越高，说明FPS越高，用户体验越好。如果其中有红色长条，代表着这部分帧数有卡顿，需要优化CPU：和底部的Summary对应，显示了页面加载过程中，各阶段对CPU的占用时间，占用时间越多，代表该阶段越需要优化。在Performance中，该部分是最需要关注的指标之一。NET：每条彩色横杠表示一种资源。横杠越长，检索资源所需的时间越长。 每个横杠的浅色部分表示等待时间（从请求资源到第一个字节下载完成的时间） 深色部分表示传输时间（下载第一个和最后一个字节之间的时间）Main：火焰图。它展现了主线程在 Record 过程中做的所有事情，包括：Loading、Scripting、Rendering、Painting 等等。火焰图的横轴代表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短，如果某个长条右上角是红色的则表示该函数存在性能问题，需要重点关注。DOMContentLoaded：就是dom内容加载完毕。 那什么是dom内容加载完毕呢？打开一个网页当输入一个 URL，页面的展示首先是空白的，然后过一会，页面会展示出内容，但是页面的有些资源比如说图片资源还无法看到，此时页面是可以正常的交互，过一段时间后，图片才完成显示在页面。从页面空白到展示出页面内容，会触发DOMContentLoaded事件。而这段时间就是HTML文档被加载和解析完成。load： 页面上所有的资源（图片，音频，视频等）被加载以后才会触发load事件，简单来说，页面的load事件会在DOMContentLoaded被触发之后才触发。
Performance 提供的性能监测功能已经较为完备，但是，它有两个问题：
- 数据缺少实时性
- 数据面板过于复杂，不够直观
为此，Performance monitor 功能可以实时直观的数据展示页面性能。
Lighthouse面板
Lighthouse 是一个开源的自动化工具，是 Chrome 的一个扩展程序。为 Lighthouse 提供一个您要审查的网址，它将针对此页面运行一连串的测试，然后生成一个有关页面性能的报告，会对页面的加载进行分析，然后给出提高页面性能的建议。可以对以下分类做报告：
- 性能
- 无障碍使用
- 用户体验
- SEO 优化
- 移动设备和桌面设备兼容性
3.webpack 性能检测工具
webpack-bundle-analyzer 分析
vue-cli3的项目直接 vue-cli-service build --report 就会生成一个report.html，打开这个html就能看到。非vue-cli3需要自行安装插件。
这个报告可以可以直观分析打包结果，查看各个依赖的体积分布。通过查看，我们可以将首屏未使用到的库去除，进行按需引入。较大的库我们可以换成更轻量级的库。
本文固定连接：https://code.zuifengyun.com/2020/02/1860.html，转载须征得作者授权。