延迟加载第 3 方服务？

如何解决延迟加载第 3 方服务？

有一个帮助服务，我可以通过将它放在我主页的 body 部分的底部来加载它：

<script async type="text/javascript">
    !function (e,t,n) {
        function a() {
            var e = t.getElementsByTagName("script")[0],n = t.createElement("script");
            n.type = "text/javascript",n.async = !0,n.src = "https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)
        }

        if (e.Beacon = n = function (t,n,a) {
            e.Beacon.readyQueue.push({method: t,options: n,data: a})
        },n.readyQueue = [],"complete" === t.readyState) return a();
        e.attachEvent ? e.attachEvent("onload",a) : e.addEventListener("load",a,!1)
    }(window,document,window.Beacon || function () {
    });
</script>

但以这种方式加载它会减慢初始页面加载时间并降低我的 Lighthouse 分数。

我想等到我的页面加载完成后再调用此代码。

是否可以在 React useEffect() 中运行相同的代码？

解决方法

我设置了一个 useInterval() 在初始页面加载完成后调用此代码：

// https://overreacted.io/making-setinterval-declarative-with-react-hooks/
useInterval(() => {
    loadHelpChat();
},2000);

function loadHelpChat(){
    if (typeof(Beacon) !== "undefined") return;
    !function (e,t,n) {
        function a() {
            var e = t.getElementsByTagName("script")[0],n = t.createElement("script");
            n.type = "text/javascript",n.async = !0,n.src = "https://beacon-v2.helpscout.net",e.parentNode.insertBefore(n,e)
        }

        if (e.Beacon = n = function (t,n,a) {
            e.Beacon.readyQueue.push({method: t,options: n,data: a})
        },n.readyQueue = [],"complete" === t.readyState) return a();
        e.attachEvent ? e.attachEvent("onload",a) : e.addEventListener("load",a,!1)
    }(window,document,window.Beacon || function () {
    });
}

似乎将加载延迟 2 秒（即发送到 useInterval() 的 2000 参数）让 Lighthouse 相信 loadHelpChat() 不应被视为初始页面加载的一部分。