Vue最全性能优化方法

如何实现 vue 项目中的性能优化？

一、编码阶段

• 尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher
• v-if 和 v-for 不能连用, v-for的优先级比v-if高，一起使用会造成性能浪费
• 如果需要使用 v-for 给每项元素绑定事件时使用事件代理
• SPA 页面采用 keep-alive 缓存组件
• 在更多的情况下，使用 v-if 替代 v-show
• key 保证唯一
• 使用路由懒加载、异步组件
• 防抖、节流
• 第三方模块按需导入
• 长列表滚动到可视区域动态加载
• 图片懒加载

二、SEO 优化

• 预渲染
• 服务端渲染 SSR

三、打包优化

• 压缩代码
• Tree Shaking/Scope Hoisting
• 使用 cdn 加载第三方模块
• 多线程打包 happypack
• splitChunks 抽离公共文件
• sourceMap 优化

四、用户体验

• 骨架屏
• PWA
• 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启 gzip 压缩等。

vue 中的 spa 应用如何优化首屏加载速度?

优化首屏加载可以从这几个方面开始：

请求优化： CDN 将第三方的类库放到 CDN 上，能够大幅度减少生产环境中的项目体积，另外 CDN 能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。

**缓存：**将长时间不会改变的第三方类库或者静态资源设置为强缓存，将 max-age 设置为一个非常长的时间，再将访问路径加上哈希达到哈希值变了以后保证获取到最新资源，好的缓存策略有助于减轻服务器的压力，并且显著的提升用户的体验

**gzip：**开启 gzip 压缩，通常开启 gzip 压缩能够有效的缩小传输资源的大小。

**http2：**如果系统首屏同一时间需要加载的静态资源非常多，但是浏览器对同域名的 tcp 连接数量是有限制的(chrome 为 6 个)超过规定数量的 tcp 连接，则必须要等到之前的请求收到响应后才能继续发送，而 http2 则可以在多个 tcp 连接中并发多个请求没有限制，在一些网络较差的环境开启 http2 性能提升尤为明显。

**懒加载：**当 url 匹配到相应的路径时，通过 import 动态加载页面组件，这样首屏的代码量会大幅减少，webpack 会把动态加载的页面组件分离成单独的一个 chunk.js 文件

**预渲染：**由于浏览器在渲染出页面之前，需要先加载和解析相应的 html、css 和 js 文件，为此会有一段白屏的时间，可以添加 loading，或者骨架屏幕尽可能的减少白屏对用户的影响体积优化

合理使用第三方库： 对于一些第三方 ui 框架、类库，尽量使用按需加载，减少打包体积

使用可视化工具分析打包后的模块体积：webpack-bundle- analyzer 这个插件在每次打包后能够更加直观的分析打包后模块的体积，再对其中比较大的模块进行优化

提高代码使用率： 利用代码分割，将脚本中无需立即调用的代码在代码构建时转变为异步加载的过程

封装： 构建良好的项目架构，按照项目需求就行全局组件，插件，过滤器，指令，utils 等做一些公共封装，可以有效减少我们的代码量，而且更容易维护资源优化

图片懒加载： 使用图片懒加载可以优化同一时间减少 http 请求开销，避免显示图片导致的画面抖动，提高用户体验

使用 svg 图标： 相对于用一张图片来表示图标，svg 拥有更好的图片质量，体积更小，并且不需要开启额外的 http 请求

压缩图片： 可以使用 image-webpack-loader，在用户肉眼分辨不清的情况下一定程度上压缩图片