延迟加载第 3 方服务？答案

【问题标题】：Lazy-Loading 3rd Party Service?延迟加载第 3 方服务？
【发布时间】：2021-07-06 11:18:10
【问题描述】：

我可以通过将它放在我主页上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() 中运行相同的代码？

【问题讨论】：

标签： javascript reactjs lazy-loading lazy-initialization facade

【解决方案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() 不应被视为初始页面加载的一部分。

【讨论】：