首页 web前端 js教程 清理并加速 JS 生态系统 - 迄今为止的旅程

清理并加速 JS 生态系统 - 迄今为止的旅程

Sep 04, 2024 am 09:33 AM

Cleaning & speeding up the JS ecosystem - Journey so far

一段时间以来,我一直在努力提高整个生态系统的性能。通常通过清理老化的依赖关系树、减少安装占用空间以及提高常用依赖关系的 CPU/内存性能。

这篇博文只是我简短地尝试解释一些导致 e18e 和生态系统清理的旅程。

关于微型公用事业的思考

微型实用程序是安装大小以及许多项目的依赖关系树复杂性的主要贡献者。

is-number 和 is-nan 等包就属于这一类。

重要的是,这些包中的许多在某些情况下确实有用,但肯定不是在常见用例中。

通常在以下情况下可以更换它们:

  • 它们是在等效的本机功能不存在的时代编写的,但现在已经存在
  • 他们所做的超出了消费者的需求

示例:is-number

例如,is-number 确定一个值是数字还是非 NaN 或 +/-Infinity 的类似数字的字符串。

在某些项目中,这是重复的验证,最好将其提取到自己的模块或包中。

但是,在常见情况下,许多消费者从来不需要 NaN 和 Infinity 验证,甚至不需要支持类似数字的字符串。

这为各种项目带来了一些可能的改进。我们可以用更简单的内联逻辑替换这些项目中这个包的使用(例如,在许多现实世界的项目中,我们安全地切换到 typeof n === 'number' 因为这些项目后来假设并依赖于实际值无论如何,号码)。

另一个例子:is-regexp

您可以使用instanceof测试某物是否是正则表达式:v instanceof RegExp。

但是,在某些情况下(例如使用虚拟上下文),这将不起作用,因为 RegExp 与 v 起源的类不同。在这些情况下,我们需要使用这样的东西:

Object.prototype.toString.call(obj) === '[object RegExp]'

如果您不想内联此类代码,并且需要支持虚拟上下文或类似内容,也许库是有意义的。

但是,在许多情况下,项目无论如何都不支持虚拟上下文(并且不想)。这为我们提供了再次简化为简单实例的机会。

支持较旧的运行时

另一个潜在的改进领域是旧版运行时支持。

很多非常流行的包都有各种类似polyfill的模块的非常深的依赖树。这些通常由于以下一个或两个原因而存在:

  • 防止全局命名空间被篡改
  • 维持对缺乏此功能的运行时的支持

我们中的许多人不需要这种级别的向后兼容性,如果我们可以将其修剪掉,可以获得巨大的性能提升。

值得注意的是,当然,仍然有人确实需要在这些限制下工作。这就是为什么在这个领域,我们经常提供分叉或替代方案,而不是尝试更改现有的软件包(无论如何,现有的软件包都不会接受此类更改)。

开始改善事情

在看到我的 node_modules 对于最小的项目来说有多大、嵌套有多深之后,我在 2018 年左右开始思考这些特定领域。

我最初的几次改变尝试是创建某种 ESLint 插件,它可以检测这些包并建议将它们删除。每隔几个月,我就会有同样的想法并再次尝试,但从未真正达到我想要的目标。

这段时间,我至少为各种大型项目做出了贡献,以清理和改进我能做的事情(例如,我长期以来贡献的一个是故事书)。

生态系统清理

然后我创建了生态系统清理,这是一个用于提高整个生态系统可能的性能改进的存储库(基本上是一个问题跟踪器)。再说一次,这基本上是我和我自己的个人问题跟踪器在一段时间内的情况,但至少它是公开可见的。

不久之后,我开始看到人们出现在问题中并为上游项目做出贡献。我很高兴看到这一点,因为我花了很多年的时间独自解决这个问题,并且想知道我是否有所作为。看到其他人的加入对我们了解其他人的关心有很大帮助。

模块更换

虽然清理项目过去和现在都非常有用,但我们确实没有地方可以与社区其他人分享存在的好的替代方案。

为了解决这个问题,我创建了模块替换项目。

这个项目基本上包含一些可能被替换的模块的 JSON 列表及其建议的替代方案。这些目前分为三个级别的“严格性”或“固执己见”:本机(可以用本机功能替换的模块)、微实用程序(可以用简单的内联代码替换的模块)和首选(我们认为的模块)应替换为性能更高的替代品)。

代码模组

替换项目的下一步是创建一组代码模块,以便我们可以自动替换其中一些模块。

在@passle的推动下,这个项目很快收到了大量以各种codemods形式的贡献。

codemod 团队也做了一些很好的工作,将这些移植到 codemod 平台。将来,我们还希望通过某种 CLI 或自动修复规则来提供它们。

e18e

我觉得我们所有关心这个东西的人找到彼此的转折点是 e18e。

Bjorn 在提高 astro 的性能方面做了一些出色的工作,而 Marvin 也一直在撰写有关加速生态系统的类似文章。最终,我们的道路相遇了,我们在旁边进行了一些精彩的讨论。

我们一小群人一起工作,看看我们是否都在同一页面上,以及是否可以以此为基础建立一个社区。然后是 e18e!

旨在成为人们协作改善生态系统性能的社区空间,这向我们展示了有多少人关心这些事情。许多人已经加入并贡献了大量资金。我们几乎每天都看到整个生态系统的速度加快和规模缩小。

一些感谢

社区发展迅速,需要感谢太多人的贡献。不过,我要特别感谢这些人,他们帮助使这个社区成为可能:

  • @帕塔克
  • @antfu7
  • @bluwyoo
  • @passle_

类似地,那些已经在为同一目标并行贡献项目的人:

  • @asleMammadam 通过tinylibs
  • pi0 到 unjs

以上是清理并加速 JS 生态系统 - 迄今为止的旅程的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

在打字稿中的高级条件类型 在打字稿中的高级条件类型 Aug 04, 2025 am 06:32 AM

TypeScript的高级条件类型通过TextendsU?X:Y语法实现类型间的逻辑判断,其核心能力体现在分布式条件类型、infer类型推断和复杂类型工具的构建。1.条件类型在裸类型参数上具有分布性,能自动对联合类型拆分处理,如ToArray得到string[]|number[]。2.利用分布性可构建过滤与提取工具:Exclude通过TextendsU?never:T排除类型,Extract通过TextendsU?T:never提取共性,NonNullable过滤null/undefined。3

微观前端体系结构:实施指南 微观前端体系结构:实施指南 Aug 02, 2025 am 08:01 AM

Microfrontendssolvescalingchallengesinlargeteamsbyenablingindependentdevelopmentanddeployment.1)Chooseanintegrationstrategy:useModuleFederationinWebpack5forruntimeloadingandtrueindependence,build-timeintegrationforsimplesetups,oriframes/webcomponents

JavaScript中的VAR,LET和CONST之间有什么区别? JavaScript中的VAR,LET和CONST之间有什么区别? Aug 02, 2025 pm 01:30 PM

varisfunction-scoped,canbereassigned,hoistedwithundefined,andattachedtotheglobalwindowobject;2.letandconstareblock-scoped,withletallowingreassignmentandconstnotallowingit,thoughconstobjectscanhavemutableproperties;3.letandconstarehoistedbutnotinitial

生成可解的双巧克力谜题:数据结构与算法指南 生成可解的双巧克力谜题:数据结构与算法指南 Aug 05, 2025 am 08:30 AM

本文深入探讨了如何为“双巧克力”(Double-Choco)谜题游戏自动生成可解谜题。我们将介绍一种高效的数据结构——基于2D网格的单元格对象,该对象包含边界信息、颜色和状态。在此基础上,我们将详细阐述一种递归的块识别算法(类似于深度优先搜索),以及如何将其整合到迭代式谜题生成流程中,以确保生成的谜题满足游戏规则,并具备可解性。文章将提供示例代码,并讨论生成过程中的关键考量与优化策略。

如何使用JavaScript从DOM元素中删除CSS类? 如何使用JavaScript从DOM元素中删除CSS类? Aug 05, 2025 pm 12:51 PM

使用JavaScript从DOM元素中删除CSS类最常用且推荐的方法是通过classList属性的remove()方法。1.使用element.classList.remove('className')可安全删除单个或多个类,即使类不存在也不会报错;2.替代方法是直接操作className属性并通过字符串替换移除类,但易因正则匹配不准确或空格处理不当引发问题,因此不推荐;3.可通过element.classList.contains()先判断类是否存在再删除,但通常非必需;4.classList

JavaScript中的类语法是什么?它与原型有何关系? JavaScript中的类语法是什么?它与原型有何关系? Aug 03, 2025 pm 04:11 PM

JavaScript的class语法是原型继承的语法糖,1.class定义的类本质是函数,方法添加到原型上;2.实例通过原型链查找方法;3.static方法属于类本身;4.extends通过原型链实现继承,底层仍使用prototype机制,class未改变JavaScript原型继承的本质。

Vercel SPA路由与资源加载:解决深层URL访问问题 Vercel SPA路由与资源加载:解决深层URL访问问题 Aug 13, 2025 am 10:18 AM

本文旨在解决在Vercel上部署单页应用(SPA)时,深层URL刷新或直接访问导致页面资源加载失败的问题。核心在于理解Vercel的路由重写机制与浏览器解析相对路径的差异。通过配置vercel.json实现所有路径重定向至index.html,并修正HTML中静态资源的引用方式,将相对路径改为绝对路径,确保应用在任何URL下都能正确加载所有资源。

掌握JavaScript数组方法:``map`,`filt filter''和`reste'' 掌握JavaScript数组方法:``map`,`filt filter''和`reste'' Aug 03, 2025 am 05:54 AM

JavaScript的数组方法map、filter和reduce用于编写清晰、函数式的代码。1.map用于转换数组中的每个元素并返回新数组,如将摄氏温度转为华氏温度;2.filter用于根据条件筛选元素并返回符合条件的新数组,如获取偶数或活跃用户;3.reduce用于累积结果,如求和或统计频次,需提供初始值并返回累加器;三者均不修改原数组,可链式调用,适用于数据处理与转换,提升代码可读性与功能性。

See all articles