你的Vue项目需要优化吗？

其实Vue自身的性能已经很好了，而作为使用者和一名优秀的前端攻城狮也有一些需要注意的地方，小郭总结了以下几点与大家分享，看看你的项目中有没有类似的问题呢？

编码习惯

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

• 模板尽量简洁

v-if="isShow && isAdmin && (a || b) "
{{hadrooms?hadrooms:(resource？resource:"hadroomsresource")}} 

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

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

• 注意区分使用v-if与v-show
  这点是面试必考题，现在也算用上了。v-if是通过控制dom节点的存在与否来控制元素的显隐；v-show是通过设置DOM元素的display样式，block为显示，none为隐藏。v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；因此，频繁让组件显示或隐藏使用v-show；不频繁让组件显示或隐藏使用v-if。

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

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

image

image

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

• 路由优化之路由懒加载

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

• 组件动态导入

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

• vue中使用run time
  Runtime-only意思是只包含运行时版本，是在构建时通过webpack的 vue-loader工具将模板预编译成JavaScript，也就是进行了预编译，在最终打好的包里实际上是已经编译好的，在浏览器中可直接运行。

加载方面

1. 图片懒加载
   并非在一开始就将图片加载完成，而是在用到的时候再去请求数据，从而加载出来图片。（图片懒加载具体实现方法会在一段时间内更新，敬请关注）
2. 按需导入第三方模块
   根据第三方模块网站说明的使用方法来引入模块，需要的话可能还要在webpack中进行配置。

压缩缓存

• 压缩
  压缩的目的在于让资源文件更小，加快文件在网络的传输，让网页更快的展现，降低带宽和流量的开销；

##更为具体的可以在/etc/nginx/mime.types 中查看nginx支持的静态文件压缩类型。
gzip on|off;#是否开启
gzipgzip_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不进行
gzipgzip_proxied #设置请求者代理服务器，该如何缓存内容
gzip_typestext/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压缩标志

• 缓存
  HTTP缓存机制
  
  缓存分类
  
  

优先级比较：Pragma > cache-control > Expires

缓存策略：①本地缓存：不变的图像，如logo，图标等；js、css静态文件；可下载的内容，媒体文件；②协商缓存：HTML文件；经常替换的图片；经常修改的js、css文件；js、css文件的加载可以加入文件的签名来拒绝缓存；③不需要缓存：用户隐私等敏感的信息；经常改变的api数据接口；

SEO搜索引擎优化

1. 预渲染
   起初通过html代码，使用axios去请求数据，然后再渲染；在弱网络环境下可能会出现白屏。预渲染是在真实数据请求回来之前。已渲染出数据（死数据），而当请求回来正式数据之后再将其替换
2. SSR
   服务端渲染利于搜索引擎优化的原因在于：SEO爬虫在爬取页面信息的时候，会发送 HTTP请求来获取网页内容，而我们SSR服务端渲染首次的数据是后端返回的，返回的时候已经是渲染好了内容等信息，便于爬虫抓取内容。

用户体验

1. 加载骨架屏
   相信很多同学在做应用的用户体验优化时已经用到了骨架屏。骨架屏实质上就是数据加载loading完成之前存在着虚框，就好像数据要请求回来一样；当数据请求回来以后骨架屏也就不存在啦！骨架屏利用的是第三方模块vue-skeleton-webpack-plugin，对模块更为详细的了解，查看https://www.npmjs.com/package/vue-skeleton-webpack-plugin
2. PWA
   PWA是用来做缓存以提升用户体验。一般网页只能使用电脑打开，但通过PWA手机也可以正常打开。在弱网的情况下（2G,3G），需要PWA进行缓存，现将原本缓存的数据显示出来，等加载完毕再用新数据来替换原本缓存过的旧数据。

以上就是小郭在实践中对Vue项目优化做出的总结，有很多不足之处还望请指正，小郭将继续努力完善。

有任何问题可以在评论区留言或私信我，想了解更多前端知识欢迎关注公众号“一郭鲜”，小郭期待你的到来

一郭鲜