Javascript 在react应用程序中包含脚本会大大降低灯塔性能分数

我一直在测试是什么导致我的低灯塔分数，似乎当我删除以下脚本，它上升了30%！我不知道为什么

以下是脚本（smartupp-一个网络聊天帮助应用程序）

我把它放在我的文章末尾。 当我在lighthouse score中包含这一点时，它会说“减少未使用的JavaScript”，我认为因为smartupp包含以下内容：

有人知道为什么这个脚本会让我的表现如此缓慢吗？我能做些什么来改进它

---

我正在使用NextJs（React）。

您可以在页面加载时加载整个聊天应用程序。但您可能只会在用户单击某个按钮时使用它。
我的建议是添加一个设计相同的按钮，并仅在用户单击smartsuppchat脚本后加载该脚本。

---

加载后需要一些额外的逻辑来打开聊天室，但您需要查阅smartsuppchat文档。

我对脚本有“延迟”功能，并认为这会有所帮助，因此它不会计入灯塔性能分数。怎么会呢？是的，也许我需要一个中间按钮，但感觉不对劲。当然smartsupp应该足够智能。那些第三方工具很少足够智能，defer会在页面解析之后解析脚本，但仍然在用户单击buton之前（在TTI之前，所以lighthouse会将其视为对您不利）嗯，我明白了，谢谢您的解释！

<script
                    defer
                    type="text/javascript"
                    dangerouslySetInnerHTML={{ __html: `
                        var _smartsupp = _smartsupp || {};
_smartsupp.key = 'key';
window.smartsupp||(function(d) {
  var s,c,o=smartsupp=function(){ o._.push(arguments)};o._=[];
  s=d.getElementsByTagName('script')[0];c=d.createElement('script');
  c.type='text/javascript';c.charset='utf-8';c.async=true;
  c.src='https://www.smartsuppchat.com/loader.js?';s.parentNode.insertBefore(c,s);
})(document);
                    ` }}
                />