Google 的 Lighthouse 现在推荐 JavaScript 库替代品

使用灯塔的概念作为比喻，谷歌灯塔通过照亮它在逐个资产的基础上发现的问题来引导开发人员远离岩石。 通过对性能和安全改进的具体反馈，报告包括对可以使用压缩调整大小的媒体的引用、新的或不同的缓存策略，以及包含未使用的 CSS 和/或 JavaScript 块的链接文件。

然而，直到 9 月，谷歌自己并没有调用 JavaScript 库。

如果 JavaScript 库被证明成本高昂，请用较小的替代品替换它们。

@ChromeDevTools 中的 Lighthouse 现在建议使用更小的库来改进包大小。 pic.twitter.com/VFe8TFV9Y5

— Addy Osmani (@addyosmani) 2020 年 9 月 12 日

现在，这些警告已逐渐出现在 Page Speed Insights 中。

关于 JavaScript 的一句话

在开源 JavaScript 世界中，开发人员站在他们之前的开发人员的肩膀上，尤其是那些解决了原本必须由新库作者解决的问题的人。 流行的 JavaScript 打包系统 NPM（节点包管理器）简化了在项目中包含预先存在的库。 在起点，给定的 JavaScript 项目总是由下面更多 JavaScript 构成的冰山一角，通常由 NPM 存储在.node_modules目录中。

理所当然地，项目，尤其是那些使用复杂框架创建的项目，只会利用其可用代码的一小部分，主要是通过大量的库依赖项。 这就是为什么有一个称为“摇树”的优化过程，用于尽可能多地捆绑给定项目正在积极使用的内容。 由于跟上现代语法和编码模式的不断变化的目标，Tree Shaking 并不总是适用于较旧的库。

关于框架

框架通过消除选择库、配置捆绑程序和编写脚本以自动化生产优化过程的复杂性，使开发人员的生活更轻松。 借助大多数文档中的“快速入门”配方，开发人员可以启动并运行作为大多数打包框架的一部分提供的预先编写的命令行解释器脚本。 这方面的一个例子是 Create React App，它构建了空白的 React 应用程序代码，供您进一步开发成 Web 应用程序。

$ npx create-react-app 我的应用

运行上述命令会创建一个“my-app”目录并将整个 React 应用程序目录树生成到其中，并包含所有必需的文件和库依赖项。 优化可以包含来自多个 Javascript 库的代码的生产包可能是现代框架包具有清除未使用的代码块并最小化生产输出的工具和步骤的最重要原因。

当您选择使用您接受的框架时，可能不知道所有细节，即该框架的架构、配置和库依赖项的艰难决策。 这是当前许多项目和框架（例如 NextJS）使用的流行前端库的制造商为生产优化 React 的指南。

少数较旧的库（在当时非常有用）已作为依赖项进入项目包中，这太常见了。 在 JavaScript 里程碑之前编写的网站、库和框架在使用已弃用的代码时显示了它们的时代，因为 JavaScript 从根本上以如此惊人的速度发展。 现在，当您的项目包含旧代码和/或易受攻击的代码时，Lighthouse 可用作警告您的灯塔。

MomentJS

一个著名的库 MomentJS（截至 2020 年 9 月每周下载量为 1200 万次）是 Lighthouse 指出的第一个具有更好选择的库。 谷歌在这里的逻辑是无可辩驳的，而且是众所周知的。 作为回应，Moment 自己的主页和文档现在反映了 Lighthouse 报告中提供的建议。 Moment 功能已冻结，仅计划进行稳定性更新。

谷歌在显微镜下拥有的其他库是 Lodash 和可能的 Underscore。 整个开发者社区对此表达了合理的负面情绪，不止一位开发者称其对开源社区“有毒”或“有害”。 这些投诉与谷歌“羞辱”图书馆有关，没有提供足够的背景信息，也没有推广可能损害发现较小和鲜为人知的图书馆替代方案的替代方案。

虽然这一切都是真的，但你必须打破鸡蛋才能制作煎蛋卷也是真的。 进步往往会伤害一些人。 Google 依靠第三方参考 (BundlePhobia) 来收集备用库列表。 他们根据 Lighthouse 团队确定的“等效性高标准”和“易于迁移”进一步审查选择。

鲜为人知的图书馆作者可以通过将他们的图书馆提交给该服务来参与其中。 此外，一位开发人员评论说，由于谷歌现在正式推荐图书馆，他们应该通过向项目捐款来帮助资助开源，Twitter 上的一名团队成员已同意从 2021 年开始这样做。

这真是个好主意。 完全同意这些团队需要支持。 Chrome 目前有一个年度网络性能和框架基金来赞助此类工作。 我们一直在与 OpenCollective 合作，在 2021 年对此进行扩展，并将很快宣布更多资金。

— Addy Osmani (@addyosmani) 2020 年 9 月 12 日

这对 TechSEO 意味着什么

诚然，TechSEO 从业者不必成为开发人员才能出色地完成工作。 确实，您越熟悉开发人员所经历的挣扎，也许通过学习一点编码并至少尽可能多地了解 Google 灯塔的细节，您将能够更好地与开发人员交流问题和实际解决方案.

对于需要更换的新闻的接收者来说，更换 MomentJS 可能非常简单，也可能极其复杂。 除非您自己是一名开发人员，或者至少尝试过使用现代 JavaScript 库和框架进行一些 Web 开发，否则您将很难知道将 Moment 之类的库换成较小的替代品可能会有多痛苦。特定项目。

它与该库已集成到代码库中的程度有关。 可能必须在整个应用程序中完全重写代码模式。 应用程序代码库越大、互连程度越高，完成替换就越困难。 这并不总是像说“只需使用 Google 告诉您使用的备用库之一”那么简单。

学习一个必须替换 Moment 时可能出现的令人生畏的想法之一来自于库中的对象被编写为可变（可变）的事实。 保持这种模式被认为是向后兼容所必需的，这确实使用另一个库替换 Moment 变得复杂。 可能需要编写整个代码块，以便您的应用程序适应这样一个事实，即在调用链中的某处使用 Moment 分配的变量值不能被视为应用程序代码库中的不可变值。

依赖于来自较新库的不可变对象的现代模式更加稳定。 要到达那里，可能需要对使用 Moment 的每个实例进行大量重写。

开发人员的 SEO

为生产优化 JavaScript 作为一项任务在 TechSEO 的代码工作中非常重要，或者向可能不熟悉 SEO 的开发人员提供反馈，因为开发人员首先应该了解性能优化。 不能假定开发人员知道 BundlePhobia、Lighthouse 或 SEO。

如果您做到了这一点，并希望了解更多有关编码的信息，以便为您的客户提供更好的服务，那么您很幸运。 今年，我们将为开发人员研讨会制作 SEO，作为 SMX 会议系列的可选附件。 所提供的信息将旨在指导您从作为 TechSEO 从业者的任何地方到我们的集体路径引导我们进入编码的任何地方的旅程。 考虑到事情进展得有多快，天空是极限！