对于vue的性能，其本身已经相当OK啦！现在我会针对以下几个方面对Vue中的项目优化进行简单的总结。当然也仅仅是几个小小的注意点哦！

一、书写习惯

1，不需要做响应式的数据，不要放在data中

响应式数据：每个Vue实例都会代理其data对象里所有的属性，只有这些被代理的数据是响应式的，在其数据改变时视图也会随之更新。
在每个vue组件中都有一个data对象。不要把所有数据都放在data中，只把需要做响应式的数据放在data对象中；原因是：如果一个数据存在于data中，数据会被劫持，vue会给数据添加一个getter（获取数据），一个setter（设置数据），性能不会高。

2，在模板里不要写太多表达式

v-if="isShow && isAdmin && (a || b) "
{{haorooms?haorooms:(resource?resource:"haoroomsresource")}}

在如上的表达式中，虽然没有出现语法或其它错误，但是当表达式过多时，可通过其他方式，例如可以通过methods 或computed 封装方法。
用方法的好处是方便我们在多处判断相同的表达式，其他权限相同的元素再判断展示的时候调用同一个方法即可。

3，能拆分的组件尽量拆分

将能够拆分组件尽可能拆分可使得颗粒度尽可能的小，其优点在于有利于提高利用性，增加代码的可维护性，减小不必要的渲染

4,SPA(Single Page Application)

SPA(Single Page Application)也就指的是单页，它是利用vue或者react写的，通过js代码写的路由来实现，将不同的组件扔到app里面。
其特点如下：
（1）当它被打包完之后在index.html中只存在一行代码

     <div id="app"></div>

（2）虽然打包后只有一行代码，但仍然能渲染出页面，是因为内容是通过加载js代码，然后通过webpack打包插入到div中的。
（3）单页不利于SEO（搜索引擎优化），因为路由是动态加载的，当不使用路由时，div标签中是啥都没有的，不利于爬虫（利用SSR服务器渲染解决）
（4）keep-alive组件，它可以实现组件的缓存，把组件中的结构和数据全部缓存到内存

5，v-if和v-show区别与联系

v-show控制的是display，不管显示与否都是会渲染的；v-if若是不显示根本就不会渲染。注意点：v-show一个组件，可以让组件重新渲染，通过v-if，我们可以让组件按照一定执行循序执行。
结论：能使用v-if的时候尽量使用v-if；频繁让组件显示或隐藏使用v-show；不频繁让组件显示或隐藏使用v-if。

6，循环调用子组件时添加key

在循环调用子组件时，使用到v-for，必须加上key，否则编辑器会出现警告！一般来说，循环key最好是不要使用index作为key，尽量使用id作为key。使用id作为key可以避免重复渲染。
vue是虚拟DOM，最终渲染时还是要求找到真实DOM。浏览器是真实DOM，在加上key后，当DOM树上的节点发生改变时，可以迅速定位到那里，否则需要对其进行遍历

7，尽量不使用 float 布局

尽量不要使用float布局，尽可能的去使用flex或者grid布局。

8，Object.freeze作用

Object.freeze会实现数据劫持，进行冻结；当页面上的数据不想经常改变时，可以进行冻结，不再使用getter和setter。
Object.freeze()可以去除Observer监听，对于长期不变的大数据，去除监听，利用Object.freeze方法改变数据时，视图也会更新（改变数据、改变Dom）

所以虽然Object.freeze可以取消监听，但是还是可以改变数值、改变DOM，并且当给list数据重新赋值之后，又恢复了监听。

9，vue-router路由优化

路由懒加载可以实现路由的优化

  import home from "./views/home"直接在组件中引入完毕，然后使用该组件
  ()=>import("./views/user")

10，动态导入组件

为项目优化，将组件可使用require或者import按需导入

  原始导入：
    导入：import home from "./component/home"
    注册：component：{home}
  动态导入：components:{home:()=>import("./component/home")}

11，vue中使用run time

Runtime + Compiler意思是运行时+编译器，是不在打包时进行编译，是在浏览器（客户端）运行时进行编译的，所以需要使用带编译器的完整版本。
Runtime-only意思是只包含运行时版本，是在构建时通过webpack的 vue-loader工具将模板预编译成JavaScript，也就是进行了预编译，在最终打好的包里实际上是已经编译好的，在浏览器中可直接运行。

二、加载

1，图片的懒加载

并非在一开始就将图片加载完成，而是在用到的时候再去请求数据，从而加载出来图片。

2，第三方模块按需导入

根据第三方模块网站说明的使用方法来引入模块，需要的话可能还要在webpack中进行配置。

三、提升用户体验

1，骨架屏

数据加载loading完成之前存在着虚框，就好像数据要请求回来一样；当数据请求回来以后骨架屏也就不存在啦！骨架屏利用的是第三方模块vue-skeleton-webpack-plugin，对模块更为详细的了解，查看
https://www.npmjs.com/package/vue-skeleton-webpack-plugin

2,PWA

PWA是用来做缓存的，以提升用户体验，一般网页只能使用电脑打开，但通过PWA可用手机打开。
在弱网的情况下（2G,3G），需要PWA进行缓存，现将原本缓存的数据显示出来，等加载完毕再用新数据来替换原本缓存过的旧数据。

3，shell

做一个网站，本质上是一个页面，通过浏览器打开，想要使其像传统 app一样，可以下载，安装，上传到用户商店。加上shell这样一个壳之后，它本质上跑的还是H5，不过可以下载，安装，性能与原生APP来相比较的话，没有原生的好。

四、SEO搜索引擎优化

1，预渲染

在最初时，通过html代码，使用axios去请求数据，然后再渲染；网络不好的时候可能会出现白屏。预渲染是在真实数据请求回来之前。已渲染出数据（死数据），而当请求回来正式数据之后再将其替换

2，SSR服务端渲染

SSR服务端渲染可解决SEO（搜索引擎优化），因为SEO爬虫在爬取页面信息的时候，会发送 HTTP请求来获取网页内容，而我们SSR服务端渲染首次的数据是后端返回的，返回的时候已经是渲染好了内容等信息，便于爬虫抓取内容。

五、从前端角度来优化

从后端来讲，也就有两大块：浏览器的缓存和压缩，更为详细的分析如下：

1，浏览器缓存

1，HTTP缓存机制

缓存分类
（1）200 from cache：直接从本地缓存中获取响应，最快速，最省流量，因为根本没有向服务器发送请求；
（2）304 NOT Modified：协商缓存，浏览器在本地没有缓存的情况，请求头发送一定的校检数据到服务端，如果服务端数据没有改变浏览器从本地缓存响应，返回304快速，发送的数据很少，只返回一些基本的响应头信息，数据量很小，不发送实际的响应体；
（3）200 OK：以上两种缓存失败，服务器返回完整的响应。没有用到缓存，相对较慢；
相关的头信息：
（1） Pragma：HTTP1.0时代遗留的产物，该字段被设置no-cache时，会告知浏览器禁用本地缓存，即每次都要向服务器发送请求；
（2）Expires：HTTP1.0时代启用本地的缓存，告诉浏览器缓存实现的时刻，如果没有到该时刻，标明缓存有效，无需发送请求；（浏览器和服务器的时间无法保持一致，如果时间差距太大，就回影响缓存效果）；
（3）Cache-control：HTTP1.1针对Expires时间不一致的解决方案，告知浏览器缓存过期时间不是时间间隔而是秒，这样就会解决时间不一致的问题；
（4）no-store：禁止浏览器缓存响应
（5）no-cache：不允许直接使用缓存，先发起请求和服务器协商
（6）max-age=单位：秒，告知浏览器该响应本地缓存有效的最大期限，以秒为单位；
以上优先级比较：Pragma > cache-control > Expires
（1）Last-modified：通知浏览器资源最后的修改时间
（2）if-Modified-Since：得到资源最后的修改时间，会将这个信息提交到服务器做检查，如果没有修改，返回304状态码；
（3）Etag：HTTP1.1推出，文件指纹标识符，如果文件内容修改指纹会改变；
（4）if-None-Match：本地缓存失效，会携带此值去请求服务器，服务器判断该资源是否改变，如果没有改变，直接使用本地缓存，返回304；
更为详细的头的相关信息请查询网络，或也可看我写的《网络相关总结》这篇文章。网址于：https://juejin.cn/post/6844903957450620936 文章中应该有较为详细或易于理解的内容。
HTTP缓存策略：
1）适合做本地缓存：
（1）不变的图像，如logo，图标等；
（2）js、css静态文件；
（3）可下载的内容，媒体文件；
2）适合做协商缓存：
（1）HTML文件；
（2）经常替换的图片；
（3）经常修改的js、css文件；
（4）js、css文件的加载可以加入文件的签名来拒绝缓存；
3）不建议缓存的内容：
（1）用户隐私等敏感的信息；
（2）经常改变的api数据接口；

2，Nginx配置缓存策略

本地缓存配置：
（1） expires time：通知浏览器过期的时长。当其为负值时表示Cache-Control：no-cache；为正值或者为0，就表示Cache-Control：max-age=指定的时间

协商缓存：
（1） Etag：指定签名 on|off 默认开启

2，浏览器的压缩

压缩优势：让资源文件更小，加快文件在网络的传输，让网页更快的展现，降低带宽和流量的开销；
压缩方式：js、css、图片、html的代码压缩、gzip压缩。
（1）js代码压缩：一般就是去除多余的空格和回车、替换长变量名、简化一些代码写法等；其常用的压缩工具：UglifyJS（压缩、语法检查、美化代码、代码缩减、转化）、YUI Compressor（只有压缩）、Closure（和UglifyJS类似，压缩方式不一样）、Compiler。
（2）css压缩：去除空白符、注释优化一些css语义规则；其常用的压缩工具：YUI Compressor（只有压缩）、CSS Compressor。
（3）HTML压缩：不建议使用代码压缩，建议使用gzip压缩，其图片压缩工具：tinypng、jepgMini、ImageOptim
（4）gzip压缩：它最终的需要在Nginx中配置压缩文件
Nginx配置如下：更为具体的可以在/etc/nginx/mime.types 中查看nginx支持的静态文件压缩类型。

gzip on|off;#是否开启gzip
gzip_min_length 1k;#开始压缩的最小长度
gzip_buffers 32 4k|16 8k;# 缓冲（在内存中缓存几块？每块多大）
gzip_comp_level[1-9]#推荐2 压缩级别（级别越高，压的越小，越浪费CPU计算资源）
gzip_http_version 1.0|1.1;#开始压缩的HTTP协议版本
gzip_disable #正则匹配UA 什么样的URI不进行gzip
gzip_proxied  #设置请求者代理服务器，该如何缓存内容
gzip_types text/plain application/javascript application/x-javascript 
text/css application/xml text/javascript application/x-httpd-php image/x-icon;
#对哪些类型的文件使用压缩，如txt，xml，html，css其中一般不压缩图片，image/jpeg image/gif image/png压缩反而更大
gzip_vary on|off #是否传输gzip压缩标志