灯塔：删除未使用的 Javascript，但使用了 Javascript
Lighthouse: Remove unused Javascript, but the Javascript is used
我正在构建一个可以在特定页面上发表评论的博客插件。目前它的工作方式是在 html 页面中包含一个 js 脚本，然后在加载时触发并向页面添加一个评论框。
一切正常 运行，但是当 运行 Lighthouse 报告时，我仍然收到“删除未使用的 Javascript”。
我假设发生这种情况是因为代码没有立即使用，而是在页面完全加载后启动？
知道如何解决这个问题吗？
“删除未使用的 JavaScript”并不是告诉您该脚本未被使用，而是告诉您在该脚本中您有页面加载不需要的 JavaScript .
鼓励您做的是“代码拆分”，这意味着您首先提供初始页面内容（称为首屏内容）所必需的 JS，然后再发送后续所需的任何其他 JS网站上的使用情况。
如果您查看报告并打开条目，您会看到它有一个值，显示最初不需要多少代码库。
如果脚本很小（小于 5kb），我想如果它所做的只是创建一个评论框，那么就忽略这一点。如果它更大（并且您不能轻易地将其变小）-将其拆分为“初始化”代码和“使用”代码/其余代码，并尽早提供“初始化”代码，其余部分在所有基本项目完成后提供加载或意图。
它不会直接影响您的分数，它纯粹是为了指出最佳做法并突出显示可能会降低您网站速度的因素。
额外
根据作者的评论，该库相当大，有 70kb，因为它具有 WYSIWYG 等。
如果您正在尝试加载大型库但同时又要注意性能，那么技巧就是“有意”加载库或在加载关键文件后加载库。
有几种方法可以实现这一点。
有意
如果您有一个复杂的项目显示在“首屏”，并且您想要获得高性能分数，则需要做出权衡。
一种方法是不立即初始化组件，而是推迟库/组件的初始化，直到有人需要使用它。
例如，您可以在页面上有一个按钮，上面写着“发表评论”（或任何合适的内容），该按钮链接到一个仅在单击后才加载库的函数。
显然，这里的权衡是加载和初始化库会有轻微的延迟（但一个简单的加载微调器就足够了，因为即使是 70kb 的库也应该只需要一秒钟左右的时间来加载，即使在慢速连接）。
您甚至可以在某人的鼠标光标悬停在按钮上时获取脚本，这些额外的几毫秒加起来会产生明显的差异。
延期
我们显然有 async 和 defer 属性。
问题在于，两者都意味着您是在下载关键资产的同时下载库，不同之处在于它们何时被执行。
你可以做的是使用一个函数来监听页面加载事件（或者监听所有正在加载的关键资产，如果你有办法识别它们的话），然后动态地将脚本添加到页面。
这样，当页面加载所必需的其他项目需要带宽/网络请求槽时，它不会占用宝贵的网络资源。
显然，这里的权衡是图书馆将比主要的“首屏”内容稍晚准备就绪。再一次，一个简单的加载微调器应该足以解决这个问题。
我正在构建一个可以在特定页面上发表评论的博客插件。目前它的工作方式是在 html 页面中包含一个 js 脚本，然后在加载时触发并向页面添加一个评论框。
一切正常 运行，但是当 运行 Lighthouse 报告时，我仍然收到“删除未使用的 Javascript”。
我假设发生这种情况是因为代码没有立即使用，而是在页面完全加载后启动？
知道如何解决这个问题吗？
“删除未使用的 JavaScript”并不是告诉您该脚本未被使用，而是告诉您在该脚本中您有页面加载不需要的 JavaScript .
鼓励您做的是“代码拆分”，这意味着您首先提供初始页面内容（称为首屏内容）所必需的 JS，然后再发送后续所需的任何其他 JS网站上的使用情况。
如果您查看报告并打开条目，您会看到它有一个值，显示最初不需要多少代码库。
如果脚本很小（小于 5kb），我想如果它所做的只是创建一个评论框，那么就忽略这一点。如果它更大（并且您不能轻易地将其变小）-将其拆分为“初始化”代码和“使用”代码/其余代码，并尽早提供“初始化”代码，其余部分在所有基本项目完成后提供加载或意图。
它不会直接影响您的分数，它纯粹是为了指出最佳做法并突出显示可能会降低您网站速度的因素。
额外
根据作者的评论，该库相当大，有 70kb，因为它具有 WYSIWYG 等。
如果您正在尝试加载大型库但同时又要注意性能，那么技巧就是“有意”加载库或在加载关键文件后加载库。
有几种方法可以实现这一点。
有意
如果您有一个复杂的项目显示在“首屏”，并且您想要获得高性能分数，则需要做出权衡。
一种方法是不立即初始化组件，而是推迟库/组件的初始化，直到有人需要使用它。
例如，您可以在页面上有一个按钮，上面写着“发表评论”（或任何合适的内容），该按钮链接到一个仅在单击后才加载库的函数。
显然，这里的权衡是加载和初始化库会有轻微的延迟（但一个简单的加载微调器就足够了，因为即使是 70kb 的库也应该只需要一秒钟左右的时间来加载，即使在慢速连接）。
您甚至可以在某人的鼠标光标悬停在按钮上时获取脚本，这些额外的几毫秒加起来会产生明显的差异。
延期
我们显然有 async 和 defer 属性。
问题在于，两者都意味着您是在下载关键资产的同时下载库，不同之处在于它们何时被执行。
你可以做的是使用一个函数来监听页面加载事件（或者监听所有正在加载的关键资产，如果你有办法识别它们的话），然后动态地将脚本添加到页面。
这样，当页面加载所必需的其他项目需要带宽/网络请求槽时，它不会占用宝贵的网络资源。
显然，这里的权衡是图书馆将比主要的“首屏”内容稍晚准备就绪。再一次，一个简单的加载微调器应该足以解决这个问题。