在反应应用程序中包含脚本会大大降低灯塔性能得分

Question

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

这是脚本（smartupp - 一个网络聊天帮助应用）

<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);
                    ` }}
                />

我将其包含在页面末尾附近。 当我包含它时，在灯塔分数中它显示“减少未使用的 JavaScript”，我认为是因为 smartupp 包含以下内容：

有人知道为什么这个脚本会大大降低我的性能吗？以及我可以做些什么来改进它。

我正在使用 NextJs (React)。

Answer 1

您在页面加载时加载整个聊天应用程序。但是您可能只会在用户单击某个按钮时使用它。
我的建议是添加一个具有相同设计的按钮，并仅在用户单击它后才加载此 smartsuppchat 脚本。 加载后打开聊天需要一些额外的逻辑，但您需要查阅 smartsuppchat 文档。