文章已同步至掘金：https://juejin.cn/post/6844903941499535367
欢迎访问😃，有任何问题都可留言评论哦~
因为涉及的内容比较多，所以就不详细说明了，如果想要深入了解的话，可以自行搜索资料进行学习
第一类：(书写习惯)
data优化
不需要做响应式的数据，不要放在data中
不要把所有的数据都放到 data 中，只把你需要做响应式的数据放到 data 中
如果一个数据放到了 data 中，Vue 会给这个数据添加一个 getter 和 setter 方法，当你获取数据时调用 getter，当你设置数据时调用 setter，所有说性能不高。
其中牵扯到了 数据劫持 操作。
而且你还需要了解一下：vue中是如何实现MVVM？可以参考我的文章《Vue MVVM理解及原理实现》
SPA首屏加载优化
在我们的Vue项目打包后，只会生成一个index.html页面(也就是所谓的单页应用)，在里面引用外部的JS
里面有很多的路由，并且都是一些跳转操作，这样不利于SEO优化----->当然可以使用SSR
不过在我们Vue中可以使用 keep-alive 实现组件的缓存，可以把组件中的结构和数据全部缓存到内存中，这样就可以减少出现的白屏现象
组件优化
在这里说一点，能拆分的组件尽可能拆分，要使组件的颗粒度尽可能小
可以提高组件的利用性，增加代码的可维护性，并且可以减小不必要的渲染
可以试想一下，如果把整张页面弄成一个组件，可能会出现白屏，代码繁琐等一系列问题，想想就恐怖
巧妙利用指令v-if(show)
巧妙的利用 v-if 、 v-show
v-show 控制的是样式display，所以 v-show 还是会渲染的
而 v-if 根本就不会渲染
所以如果你需要频繁的让一个组件显示隐藏的话，用 v-show
如果不频繁的让一个组件显示隐藏的话，用 v-if
利用指令v-for绑定key
当你使用 v-for 时，必须加上 key
因为当你进行DOM树进行操作的时候，它可以迅速的定位到对应的位置
一般情况下，不要受用 v-for 里面的第二个参数作为 key 值，仅可能的使用 id 作为 key
如果用参数作为 key 值得话，需要重新渲染，因为 key 的值始终都是从1到n的，但是使用 id 的话，他就只对应了一个值，就是 id。
示例：
key 值
1 a
2 b
3 c
如果我里面有一个排序方法，当我点击后，会进行重新渲染 ，如下
key 值
1 c
2 b
3 a
如果使用 id 的话，一个id就对应一个值，就不会出现这样的情况
使用 Object.freeze
当数据绑定和响应时，对于经过 Object.freeze() 方法的对象无法进行更新响应。
所以 Object.freeze() 方法用于冻结对象，禁止对于该对象的属性进行修改（由于数组本质也是对象，因此该方法可以对数组使用）
并且冻结之后不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。
路由懒加载
当我们在 router.js 中引入路由文件的话，你是不是直接把需要用到的路由直接添加进来了，就像这样：
import Index from './views/Index.vue'
import Register from './views/Register';
import NotFound from './views/404.vue';
import Login from "./views/Login.vue"
import Home from "./views/Home.vue"
但是这样做是有点不合理的，我们最好使用懒加载，
就是当我们需要使用到哪个路由的时候，才让他进行加载，也就是下面这种写法：
{
path:'/order',
name:'order',
component:()=>import('./views/Order.vue')
},{
path:'/me',
name:'me',
component:()=>import('./views/Me.vue')
},{
path:'/address',
name:'address',
component:()=>import('./views/Address.vue')
}
动态导入组件
你需要让使用到的组件 按需导入
例如：
improt xx form "xx"
components:{xx}
components:{
yyy:()=>import(yyy)
}
第二类：(加载)
图片懒加载(Lazyload)
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
原理：
将页面中的 img 标签中的 src 指向一张小图片或者 src 为空，然后定义data-src（这个属性可以自定义命名）属性指向真实的图片。src 指向一张默认的图片，否则当 src 为空时也会向服务器发送一次请求。可以指向 loading 的地址。
<img src="default.jpg" data-src="http://www.xxx.jpg" />
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
第三方模块按需导入
对于大型的 web 应用而言，把所有的代码放到一个文件的做法效率很差，特别是在加载了一些只有在特定环境下才会使用到的阻塞的代码的时候。Webpack 有个功能会把你的代码分离成 Chunk，后者可以按需加载。这个功能就是 Code Spliiting。
Code Spliting 的具体做法就是一个分离点，在分离点中依赖的模块会被打包到一起，可以异步加载。一个分离点会产生一个打包文件。
第三类：(提升用户体验)
骨架屏
在开发webapp的时候总是会受到首屏加载时间过长的影响，主流的解决方法是在载入完成之前显示loading图效果，而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题，越来越多的APP采用了“骨架屏”的方式去提升用户体验。
简单的就是说，在页面还没有加载出来时，给你显示一个页面的整体框架，比如你上面有图片的话，就给你显示一个图片的轮廓，以至于不会让你的屏幕变成白茫茫的一片
pwa缓存
这个功能在国内没有火起来，因为国内的网速大部分还是可以的，如果到了网速不好的地方，这个就派上用场了，简单的可以理解为，就是缓存，把需要的内容缓存到你的手机中
因为现在移动端的APP也有很多利用H5来写的，大家都知道H5相比原生应用，无论是加载速度和用户体验都会差很多。
如：留白时间过长、无法离线访问、无法推送消息、没有自己的启动图标等等
如果使用PWA的话，就可以进行：消息推送、全屏访问、离线缓存等等功能
第四类：(SEO)
预渲染
如果网络环境不好，可能会出现白屏
这个时候我们可以进行预渲染，可以把一些数据写死，先让他渲染出来，然后到合适的时候，把那些动态的数据渲染出来
当然这种方法对于那些经常不需要改变的网站时可以的，如果对于新闻类的话，怕是不行，因为他们需要不断的进行更新数据，更新页面
服务端渲染SSR
还是面临的那些问题： 单页应用首屏加载过慢、无法被搜索引擎抓取、首屏白屏时间过长（重要）
什么是服务端渲染，简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。
于传统的SPA（单页应用）相比，服务端渲染能更好的有利于SEO，减少页面首屏加载时间，
同时服务端渲染对服务器的压力也是相对较大的，和服务器简单输出静态文件相比，通过node去渲染出页面再传递给客户端显然开销是比较大的，需要注意准备好相应的服务器负载。
第五类：(后端进行优化)
缓存和压缩
这种方法，具体参考我的文章：《HTTP前端性能优化(压缩与缓存)》
HTTP优化
对HTTP的一系列优化，可以自行搜索，网上一大推，其实个人认为不需要掌握太多，但是能多学点还是多学点吧，总归有好处的。
卷卷卷！！！
评论区