javascript按需加载

Posted 2020-12-08 笛儿前端分享

前言

按需加载是性能优化的一部分.在网络环境不好,网速慢的时候,使用按需加载可以节省带宽

按需加载通常用于原生js开发的项目

实现

var obj ={};
/**
   * 按需加载JS
   * @param {string} url 脚本地址
   * @param {function} callback  回调函数
   */
export function dynamicLoadJs (url, callback) {
 if(obj[url]){
         callback();
         return;
       }
       obj[url]=true;
  var head = document.getElementsByTagName(‘head‘)[0]
  var script = document.createElement(‘script‘)
  script.type = ‘text/javascript‘
  script.src = url
  if (typeof (callback) === ‘function‘) {
    script.onload = script.onreadystatechange = function () {
      if (!this.readyState || this.readyState === ‘loaded‘ || this.readyState === ‘complete‘) {
        callback()
        script.onload = script.onreadystatechange = null
      }
    }
  }
  head.appendChild(script)
}