*lazy-loader.md

lazy-loader

import lazyLoad from 'lazy-loader';

let mapPromise;
function getMap() {
  return mapPromise || (
    mapPromise = lazyLoad('/chunks/map.js', () => {
      return new GoogleMap({
        markers: [ /* ... */ ]
      });
    }, true)
  );
}

getMap().then(map => {
  // boot up your map stuff
});

lazy-loader.js

const rick = typeof requestIdleCallback === 'function' ? requestIdleCallback : (fn => setTimeout(fn, 1000));

export default function lazyLoad(src, boot, asModule = true) {
  return new Promise((resolve, reject) => {
    const link = document.createElement('link');
    const head = document.head;
    link.rel = asModule && link.relList && link.relList.supports && link.relList.supports('modulepreload') ? 'modulepreload' : 'preload';
    if (asModule) link.crossOrigin = true;
    link.href = src;
    link.onerror = reject;
    link.onload = () => {
      rick(() => {
        const script = document.createElement('script');
        if (asModule) script.crossOrigin = script.type = 'module';
        script.async = true;
        script.src = link.href;
        head.insertBefore(script, link);
        if (boot) {
          rick(() => {
            resolve(boot());
          });
        }
        else {
          resolve();
      });
    };
    head.appendChild(link);
  });
}

package.json

{
  "name": "@developit/lazy-loader",
  "version": "0.1.0",
  "module": "lazy-loader.js"
}