Vue中的项目优化

2,085 阅读10分钟

  对于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,对模块更为详细的了解,查看
www.npmjs.com/package/vue…

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;
    更为详细的头的相关信息请查询网络,或也可看我写的《网络相关总结》这篇文章。网址于:juejin.cn/post/684490… 文章中应该有较为详细或易于理解的内容。
  • 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压缩标志