如何實作動态加載Javascript 檔案子產品

前端開發中僅在需要時的時候加載 JavaScript 子產品。這樣可以提供很大的性能，比如：您有一個元件，例如複雜的視訊播放器，它可以使用大量 js，并且該視訊僅在使用者單擊它時才會啟動。

那麼在這種情況下，使用者甚至可能永遠不會單擊播放按鈕，是以僅在需要時才加載該js子產品。

是以，不要像這樣使用頂級預設聲明：​

import * from "https://cdn.skypack.dev/jquery";      

隻是在需要的時候加載，代碼如下：

const button = document.getElementById("btn");
button.addEventListener("click", e => {
  import('https://cdn.skypack.dev/jquery')
    .then(module => window.$ = module.default)
    .then(makeBgOrangeWithJquery)
    .catch(err => { alert(err) });
});


const makeBgOrangeWithJquery = ()=> {
  $("body").css("background-color", "orangered");
}      

您甚至可以将它與加載訓示器之類的東西一起使用：

button.addEventListener("click", e => {
    import('https://cdn.skypack.dev/jquery')
    .then(module => {
        window.$ = module.default;
    })
    .then(makeBgOrangeWithJquery)
    .catch(err => { alert(err) });
});      

當然，如果您的所有頁面都依賴于像 jQuery 或 react 這樣的庫，那麼動态導入該庫就沒有太大意義。

function loadJS(url, success) {
  var domScript = document.createElement('script');
  domScript.src = url;
  success = success || function () {};
  domScript.onload = domScript.onreadystatechange = function () {
    if (!this.readyState || 'loaded' === this.readyState || 'complete' === this.readyState) {
      success();
      this.onload = this.onreadystatechange = null;
      this.parentNode.removeChild(this);
    }
  }
  document.getElementsByTagName('head')[0].appendChild(domScript);
}
loadJS('https://cdn.skypack.dev/jquery',function(){
  //加載成功執行
});