javascript - Lighthouse：删除未使用的 Javascript，但使用了 Javascript

我正在构建一个博客插件，可以对特定页面进行评论。目前它的工作方式是js在 html 页面中包含一个脚本，然后在加载时触发并在页面中添加一个评论框。

一切运行正常，但是在运行 Lighthouse 报告时，我仍然会收到“删除未使用的 Javascript”。

我认为这是因为代码没有立即使用，而是在页面完全加载后启动？

知道如何解决这个问题吗？

标签： javascriptlighthouse

“删除未使用的 JavaScript”并不是告诉您该脚本未使用，而是告诉您在该脚本中您有页面加载不需要的 JavaScript。

它鼓励您做的是“代码拆分”，这意味着您首先为初始页面内容（称为折叠内容）提供必要的 JS，然后再发送网站上持续使用所需的任何其他 JS。

如果您查看报告并打开条目，您将看到它的值显示最初不需要多少代码库。

如果脚本很小（小于 5kb），我想如果它所做的只是创建一个注释框，那么只需忽略这一点。如果它更大（并且您不能轻易将其变小） - 将其拆分为“初始化”代码和“使用”代码/其余代码，并尽早提供“初始化”代码，其余部分在所有基本项目之后加载或有意。

它不会直接影响您的分数，纯粹是为了表明最佳实践并突出可能会降低您的网站速度的潜在因素。

额外的

从评论中作者指出该库相当大，为 70kb，因为它具有 WYSIWYG 等功能。

如果您正在尝试加载大型库，但也需要注意性能，那么诀窍是“按意图”或在加载关键文件之后加载库。

有几种方法可以实现这一点。

如果您有一个复杂的项目要出现在“首屏”并且您想要获得较高的性能分数，您需要做出权衡。

一种方法是不要立即初始化组件，而是推迟库/组件的初始化，直到有人需要使用它。

例如，您可以在页面上有一个按钮，上面写着“发表评论”（或任何适当的），该按钮链接到仅在单击后才加载库的函数。

显然，这里的权衡是加载和初始化库会有轻微的延迟（但一个简单的加载微调器就足够了，因为即使是 70kb 的库，即使在慢速连接上也只需要一秒钟左右的时间来加载）。

一旦某人的鼠标光标悬停在按钮上，您甚至可以获取脚本，这些额外的几毫秒可以增加可感知的差异。

我们显然有asyncanddefer属性。

问题在于，两者都意味着您将库与关键资产一起下载，不同之处在于它们何时执行。

你可以做的是使用一个函数来监听页面加载事件（或者如果你有办法识别它们，则监听正在加载的所有关键资产），然后动态地将脚本添加到页面中。

这样，当对页面加载至关重要的其他项目需要该带宽/网络请求槽时，它就不会占用宝贵的网络资源。