动态下载javascript，稍后执行

Question

我正在尝试优化页面加载时间。剩下的唯一事情就是优化资产加载时间。我的资产和库脚本很少。一些资产依赖于这个库。

供应商脚本

• 库.min.js
• 供应商.min.js

捆绑脚本

• page.bundle.js（依赖于 library.min.js）
• play.min.js（依赖于 vendor.min.js）
• gtm.min.js（依赖于 library.min.js）

我想要实现的是在页面完全加载时开始加载所有这些资产。当我在服务器端渲染所有内容时，延迟用户交互对我来说不是问题。我只需要下载library.min.js，然后page.bundle.js在正确的顺序，但是，当我需要。

我尝试了几件事，但我无法开始下载并以正确的顺序执行它。目前我计划eval在需要时使用 xhr 和content 。但我不确定这是否是正确的方法。使用此方法时还有更多问题要问。缓存等

有人可以告诉我如何拆分动态加载的 javascript 文件的下载和执行时间吗？

Answer 1

您可以动态创建script元素并将其添加到文档正文，将src属性设置为您的 javascript 文件，然后让它下载它。下载完成后，promise将解析并设置下一个依赖的js文件。

function setExternalScript(src) {
  return new Promise((resolve, reject) => {
       const scriptTag = document.createElement('script');
       scriptTag.type = 'text/javascript';
       scriptTag.src = src;
       scriptTag.onload = () => resolve();
       document.appendChild(document.body, scriptTag);
  });
}

async function afterLoaded() {
    const scripts = ['a.js','b.js','c.js'];
    for(let i=0; i< scripts.length; i++)
       await setExternalScripts(scripts[i]);
}

afterLoaded(); // run this whenever you need