延迟加载第三方服务？

Question

有一个帮助服务，我可以将它放在我主页 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() 中获取与运行相同的代码？

Answer 1

我设置了一个 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() 不应被视为初始页面加载的一部分。

延迟加载第三方服务？

Lazy-Loading 3rd Party Service?

javascript

lazy-loading

facade

lazy-initialization

reactjs