在最近的一次会议演讲中（抱歉，我忘了是哪一次），有一个关于糟糕的网页性能的快速示例，以第三方小部件的形式出现。该示例展示了一个网站，为了添加一个固定在视口右下角的“联系我们”按钮而安装了该小部件。甚至不是一个实时聊天小部件——只是一个电子邮件功能。它的重量约为 470KB，这简直是疯狂。
如果您是那种因为还不知道如何复制相同的功能而被迫使用十吨重小部件的人，我已经为您准备了一小段 HTML 代码。
它只有 602 字节，大约是另一个小部件大小的 1/1000，无需下载、解析或渲染阻塞。
查看 CodePen 上 Chris Coyier 的作品
Mailto 固定位置小部件 (@chriscoyier)
在 CodePen 上。
也许在您自己的网站上，您可以将样式移到您的样式表中，并添加一些悬停和焦点样式。
并不是说第三方 JavaScript 一定不好。它只是有变坏的倾向。
我的朋友 Richard 向我展示了他开发的一款新产品，名为 Surfacer。它就像一个 RSS 小部件，您可以将其放置在任何位置。
查看 CodePen 上 Chris Coyier 的作品
Surfacer (@chriscoyier)
在 CodePen 上。
这是一个 773 字节的 JavaScript 文件，它会发出一个 3.5KB 的 Ajax 请求来获取数据，您可以在文档末尾放置它以避免任何渲染阻塞。希望看到更多类似的东西。
酷。请告诉我更多关于小部件与应用程序的信息。对不起，我是一个新手，但学习速度很快，也很渴望学习。谢谢！Diane Diamond
嗨，Diane，
在这篇文章的语境中，我使用“小部件”一词来描述其他服务要求您放到网站上以添加功能的任意代码。
每个人都听说过 Facebook，对吧？以及您可能在非 Facebook 的其他网站上看到的那些 Facebook“点赞”按钮？您可以将那个小按钮视为一个“小部件”。我不确定“小部件”是否有官方定义，但这就是我在这里的用法。
我的天哪……我和团队中的一个初级开发人员一直在争论这个问题。我分配任务/定义需求，而他的第一站就是 npm。他的论点总是“为什么要重新发明轮子？”。好吧，也许你找到的那个轮子是从一个滚动的垃圾箱里掉下来的。他的编码能力很强，但我担心总是寻找现成解决方案的本能会阻碍他作为开发人员的成长。再说一遍，我更接近 40 岁而不是 20 岁，还记得不得不从头编写所有内容的日子。我们这些老家伙过去常常带着自己的个人库四处走动，就像装满极客徽章的自豪感的袋子一样。
另一方面，我不确定如果他坚持自己编写所有内容，你是否会更开心。检查现有解决方案是避免大量不必要的开发和维护工作的好方法。显然，有一些限制……引入一个 500KB 的“联系我们”按钮小部件是荒谬的。
哈哈。我认为你给了我一些好的建议。我将开始更多地编写自己的代码。这些天我也一直在避免提出自己的逻辑，认为已经有现成的逻辑可以导入。我认为这也会对我的开发人员成长产生负面影响。
你的担忧是合理的。我犯过愚蠢的错误，因为我太习惯于使用插件了，我还与非常高级别的开发人员（团队负责人、副总裁）进行过对话，他们实际上对常见 UI 组件的工作原理一无所知，因为他们一直都在使用插件。（模态框就是一个很好的例子。）
每当我参与这种对话时，我都会提出以下几点
– 开源意味着我们可以阅读源代码，但不能维护它。我们只能在插件周围编写代码或复制它。
– 责任：在大多数情况下，插件作者实际上没有合同义务为我们提供支持。
– 许可：我们的公司是否可能因使用它而被起诉？它是复制许可的？
– 需求：我们是否真的需要执行此插件执行的所有操作？同样，我们仍然需要在它周围进行维护。
– 膨胀：我们需要将额外的代码发送到用户的设备上。这对我们公司和用户都产生了经济成本。
– 美学一致性：UI 的不一致性会损害应用程序的信誉。
– 程序化一致性：它是否符合我们的应用程序结构？新开发人员是否知道如何处理它以及期望什么，或者它是否是规范的例外情况的集合？
如果开发人员坚持大量使用第三方工具，您可以提出的最后一点是“帮助您构建事物的工具是好的（React、Angular、Lodash），为您构建事物的工具是不好的。”
您还可以争辩说“轮子”已经被重新发明了很多次。这就是为什么拖拉机轮子不适合溜冰鞋的原因，因此最初的隐喻从一开始就不正确。
嗨，Chris，
非常有趣。你能解释一下这么简单的东西怎么会达到 470k 吗？
谢谢
这些小部件可能
* 从包含 100 个动画的完整动画 js 库中加载一个动画。
* 从包含 100 个样式的 css 文件中加载一个样式。
* 拥有 100 个您不使用的额外功能，但仍然加载所有相关的资源。
软件小部件是一个相对简单易用的软件应用程序或组件，适用于一个或多个不同的软件平台。桌面附件或小程序是简单独立的用户界面的示例，与更复杂的应用程序（如电子表格或文字处理器）形成对比。
这似乎可以与依赖库或框架来实现一两个特定功能的用例进行良好的平行讨论。例如，使用 jQuery 因为您想要访问
$.ajax()，或者在所有项目中都包含 Bootstrap 以便可以使用它们的 Carousel 组件。我对 JavaScript 的了解不如我想象的那么深入……但是当我遇到第三方库无法完成我需要的某一项特定任务，或者做得太多的时候，我通常会将其作为一个机会来自己编写一些东西。并不总是有效，但这是一个很好的学习方法。