vue的项目优化---回顾

陆陆续续也用vue开发或重构了不少项目,在这期间遇到不少的坑,也尝试过优化。在此记录一下,想到一点算一点吧:

一、尽可能的减少watcher的数量

   当监听数据是一个对象的时候,最好具体到监听对象的属性;

二、渲染

  1、可以用懒加载、分页、滚动加载或者tab方式去展示其他内容,减少每次渲染的数量;

     2、结合v-if,异步显示dom结构,减少不必要组件的加载;

  3、hybird开发的app,可通过app框架预加载的方式,将单页应用的资源提前缓存。

三、key值

  给列表渲染加上唯一的key值,提高缓存命中率,避免重复创建和大规模的重新渲染。

四、关于组件

  1、组件有明确含义,只处理类似的业务。复用性越高越好,配置性越强越好。

  2、减少组件之间的耦合度,尽量避免一个值传递通过多层组件的情况

  3、使用require.ensure不把所有组件打包进index.js,减少体积。这很好的利用分段加载,但是却增加了请求数,看情况吧;

       4、异步组件,使用setTimeout(fn,0)等;

  5、动态组件和异步组件。如keep-alive :可以使被包含的组件保留状态,或避免重新渲染。注意给组件取个名字;

  6、按需加载

    a、用v-if方式,创建和结束生命周期

    b、components中使用require引入;

五、关于路由

  路由的懒加载(按需加载)

component:function(resolve){
  require(['src/component/header.vue'],resolve)  
}

六、打包优化

  2、把一些公共库打包进vender中,更好的利用缓存;

  3、第三方库尽量瘦身之后再使用,比如element-ui中的按需加载;

七、网络请求

  1、并发请求,如使用promise.all()的方式并发请求非继承关系的接口数据,也要看情况。

  2、非首次必须要渲染数据,尽量采用响应的操作,如结合用户操作之后才发起请求等;

八、服务端渲染和骨架图

 

-------慢慢补充-------

《vue项目中遇到的坑》

posted @ 2018-05-08 22:35  leaf+  阅读(365)  评论(0编辑  收藏  举报