运行通过 defer 加载外部脚本后的内部脚本

Question

众所周知，使用 defer 是减少网站加载时间的有效方法。

在我的项目中，我正在使用 Vue（包含在 header using defer 中）并且在某种情况下，我想使用由另一个人创建的组件。当我尝试在 HTML 的 body 中执行 Vue.Component(...) 时，它说 Vue 未定义。在加载外部脚本之前，我在 body 中的脚本似乎是运行。有什么办法可以解决这个问题吗？

我试过document.onload，但是函数本身不工作。

PS：需要说明的是，外部脚本指的是我定义了 Vue 的 js 文件，我根本不是在谈论第三方库。

Answer 1

您需要使用 window.onload 或 document.body.onload.

而不是 document.onload

但更好的方法是等待 load event on <script> 标签：

<html>
    <head>
        <script id="vue-script" src="vue.js" charset="utf-8" defer></script>
    </head>
    <body>
        <script type="text/javascript">
            function onVueLoaded() {
                Vue.render();
            }

            if ('Vue' in window) {
                onVueLoaded();
            } else {
                var script = document.getElementById('vue-script');
                script.addEventListener('load', onVueLoaded);
                script.addEventListener('error', () => console.warn('failed to load Vue.js'));
            }
        </script>
    </body>
</html>

如果您想显式处理加载错误，我还为 error event 添加了一个处理程序。

运行通过 defer 加载外部脚本后的内部脚本

run internal script after external script has been loaded via defer

javascript

loading

运行 通过 defer 加载外部脚本后的内部脚本

run internal script after external script has been loaded via defer

javascript

loading

运行通过 defer 加载外部脚本后的内部脚本