zoukankan      html  css  js  c++  java
  • 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项目中遇到的坑》

  • 相关阅读:
    Sonar+IDEA + Maven的集成
    My97DatePicker IE9中,显示全部为1
    Datatable+jeditable+Java 结合使用实现表格的单行刷新
    Datatables表格控件的使用相关网站及遇到的问题
    xss 小练习
    主页面布局 随浏览器大小变化而变化
    使用angular中自定义的directive实现删除确认框
    使用css和js完成模态弹窗功能
    ckplayer插件的使用
    使用JQuery进行表格分页查询
  • 原文地址:https://www.cnblogs.com/leaf930814/p/9011480.html
Copyright © 2011-2022 走看看