山维空间

标签： 优化

  • 近期帮一个朋友做的 Vue 网站优化方案

    近期帮一个朋友做的 Vue 网站优化方案

    前几天有个朋友找到我，说他们公司的网站产品打开速度不太理想，加载的数据量很大，想优化一下。并且询问我，是不是用微前端会好一些。

    分析

    我看了一下，大概有几个点：

    1. 他们是做自动化运维的，提供多个工具，所有工具都是独立的 Vue 项目
    2. 用户一般先登录 dashboard 页面，然后导航到具体的工具页
    3. 因为每个工具都独立开发、独立打包，所以每个页面都会用到不同的 app.[hash].js 和 chunk.vendors.[hash].js
    4. 于是，用户每次切换工具，都要完整加载一遍公共资源，如 vue 全家桶和 antdv
    5. 已经对一些模块做了 lazy-loading

    于是我得出一些结论：

    1. 首先，因为所有项目的技术栈高度趋同，所以并不需要微前端（微前端的解释在后面）
    2. 现在重复加载最多的应该是 vue 全家桶和 antdv，重复加载的原因是没有拆包。适当拆分打包后资源，应该可以大大提高代码复用率，减轻不同项目间的切换成本
    3. 同时还应开启 http/2，提高连接复用率

    方案

    于是我给朋友提出了以下改进方案：

    1. 整站启用 http/2
    2. 所有项目手动分 chunk
      1. vue 全家桶
      2. antdv
      3. 其它好统计的、全站都在使用的仓库
      4. 其它仓库
    3. 统一所有项目的依赖，提交 lock 文件入库
    4. 所有项目对公共仓库的引用顺序需保持一致，保证 webpack 打包之后的序号能维持一致
    5. 替换页面中的资源位置，指向同一个资源
    6. 延长资源缓存时间，提高利用率

    下一步

    他们需要一些时间来消化和实施这些方案，所以这一次咨询先到这里。

    接下来，我可能会建议他们调整支持的浏览器、增加 ESM build。以及使用 npm workspace 创建一个核心项目，把所有工具项目放到一起构建，减少前面的（2）（4）（5）环节。

    总结和广告

    希望上述方案对大家也有启发和帮助。

    顺便帮他们打个广告吧：

    OpsAny，云原生场景下的智能化运维平台。我们倡导“以资源为中心”和“以应用为中心”相融合的运维理念，提高运维效率、保障业务连续性。

    OpsAny, make ops perfect
    （更多…）

  • Backbone.Collection.fetch小优化一则

    使用Backbone开发无限滚动应用的时候，必然会用到Collection.fetch()加载后面的内容。在Backbone的设计中，fetch之后，Collection会把取回来的内容“智能合并”到当前结果集中，该添加的添加、该修改的修改、该删除的删除，并且触发不同的事件。

    这样就会带来一个问题，因为我们知道，向DOM树当中添加元素的次数越少越好，因为每次添加都会导致重新计算布局和重绘；但是Backbone又是依次触发add事件的，怎么办呢？

    其实也容易，因为set完成后，Collection还会广播sync事件，所以我们可以在响应add事件时拼装jquery对象，响应sync事件时再把它们添加到DOM树中。代码如下：

    var InfinityScroll = Backbone.View.extend({
  initialize: function () {
    this.collection.on('add', this.collection_addHandler, this);
    this.collection.on('sync', this.collection_syncHandler, this);
  },
  collection_addHandler: function (model) {
    var html = this.template(model.toJSON());
    this.fragment = this.fragment ? this.fragment.add(html) : $(html);
  },
  collection_syncHandler: function () {
    if (this.fragment) {
      this.$el.append(this.fragment);
      this.fragment = null;
    }
  }
});