成都网站建设设计

将想法与焦点和您一起共享

Github团队成功减少的30kb依赖体积是什么

本篇文章给大家分享的是有关Github团队成功减少的30kb依赖体积是什么,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

成都创新互联公司长期为上千多家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为大足企业提供专业的成都做网站、成都网站制作,大足网站改版等技术服务。拥有十余年丰富建站经验和众多成功案例,为您定制开发。

你没看错,Github前端团队花费大半年时间,成功将项目依赖包体积减少30kb。

减少的部分是啥呢?jQuery。

技术还是技术债

多年以来,Github逐渐发展为一家拥有数百名工程师的公司。

Github团队成功减少的30kb依赖体积是什么

作为一家大公司,一部分人被划分出来从事性能优化工作。

但是,狼多肉少,哪有那么多可优化点呢?

找新的性能优点难,找你老代码的麻烦还不容易?

于是,团队将目光盯向了「技术债」。

Github团队成功减少的30kb依赖体积是什么

鲁迅曾说过,前人用过的技术,如果阻碍后人重复造轮子,就成技术债了。

Github团队成功减少的30kb依赖体积是什么

那么该挑哪个债来还呢?jQuery真是不二人选。原因如下:

  • 广泛依赖,这一改起来工作量绝对有了

  • jQuery代表老一代web开发方式。一下替换个新潮的,这对比,明显!

  • jQuery好说也有30kb,苍蝇虽小也是肉

说干就干,让我们先评估下工作量。

Github团队成功减少的30kb依赖体积是什么

工作量max max max

新人这时候犯嘀咕:“这工作量,我估保守点,逐步替换,一周开发,一周测试,2周上线?”

组长啪的一下拍桌子:“那得是996的小作坊才这么干!我们大公司做事得专业,这事儿得「稳步迭代,增量解耦」”。

首选:我们得建立指标跟踪,统计每行代码中jQuery的调用次数。

实时监控,确保指标稳步下降。

Github团队成功减少的30kb依赖体积是什么

调用次数统计

其次,要有专人开发一个lint(见eslint-plugin-jquery),全团队普及,避免大家继续使用jQuery方法。

Github团队成功减少的30kb依赖体积是什么

一屏截不完的规则

新人问:“那有人添加eslint-disable绕过规则怎么办?”

组长微微一笑,“小伙子,上道了啊。”

Github团队成功减少的30kb依赖体积是什么

还得开发一个Github机器人,每当有人提交的新代码中包含eslint-disable规则,机器人会通知团队成员,这样我们能尽快介入review代码。

最后,jQuery作为一个模块化的库,为了保证「稳步移除」,我们需要维护一个自定义jQuery版本。

每当确定一个模块不再使用,就从自定义版本中移除他,并提供一个更小体积的版本。

比如:当完全用fetch替换$.ajax后,就能将AJAX模块剔除。

“这一通操作下来,没有半年工作量,我看不行。”组长轻靠椅背,轻轻摇了摇头,说道。

Github团队成功减少的30kb依赖体积是什么

升华主题

你以为这就完啦?naive~

前面做的,只能说稳步推进工作。接下来说的,才是KPI的重中之重。

jQuery被移除,项目必然出现很多原生JS。

重复代码多了得抽象、得封装是吧?

“您是说上框架!Vue还是Angular?”新人抢答道。

“小啦!格局小啦!”组长长叹一口气。

Github团队成功减少的30kb依赖体积是什么

“当然是拥抱标准。Vue的模版语法也是根据Web Components标准演化来的。”

“我们要引!领!时!代!”

从现在开始,所有可复用的功能组件都封装为Web Components。

比如「复制粘贴」功能,要封装为clipboard-copy:

   点击复制  src/index.js

 遵照HTML标准习惯,点击clipboard-copy组件后会将for属性指向的id选择器对应内容复制到剪贴板。

示例代码

具体实现

并且开启Shadow DOM,使组件对外封闭,不会影响其他组件。

你问兼容性?小啦!格局又小啦!

我们这样的企业就是要推动浏览器厂商进步的。

Github团队成功减少的30kb依赖体积是什么

最终产出了有1.4k star的Web Components组件库github-elements

经过大半年的努力,Github团队成功将jQuery从项目依赖中根除,减少30kb依赖体积。

如果你审查Github页面代码,会时不时看到Web Component,比如:

Github团队成功减少的30kb依赖体积是什么

以上就是Github团队成功减少的30kb依赖体积是什么,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


网站标题:Github团队成功减少的30kb依赖体积是什么
本文来源:http://chengdu.cdxwcx.cn/article/piicgh.html

其他资讯