Conditionally load polyfills in JavaScript

This tutorial shows you how to conditionally load polyfills in JavaScript, polyfills should only be loaded if they are needed. A polyfill that is loaded when not needed can make your code work less good or make it not work at all.

Polyfill.io is a great online service that enables you to conditionally load polyfills and to download the polyfills that you need. Calling an online service for polyfills is risky because the service can be unavailable temporarily or permanently.

Find and collect polyfills

You first need to know which polyfills you need, this depends on your code and the browers you want to support. You can find out which polyfills you need by testing your code in an older target browser. We need polyfills for: Element.prototype.closest, Array.from, Array.prototype.includes, window.CustomEvent, window.Promise, window.XMLHttpRequest, Element.prototype.remove, String.prototype.endsWith, String.prototype.includes and datalist.

You can search the Internet for these polyfills. Set flags to always and gated if you download from polyfill.io, this will give you the full polyfill with feature detection.

https://polyfill.io/v3/polyfill.min.js?flags=gated%2Calways&features=CustomEvent

JavaScript

I have saved each polyfill that I found to a separate file and I store them in a folder. The code below shows the code to load script files if they are needed, it is important that files are loaded synchronous. The file with this code must be loaded before other scripts that depend on these scripts.

(function () {

    'use_strict';

    if (!Element.prototype.closest) {
        loadScript('/js/polyfills/element.prototype.closest.min.js');
    }
    if (!Array.from) {
        loadScript('/js/polyfills/array.from.min.js');
    }
    if (!Array.prototype.includes) {
        loadScript('/js/polyfills/array.prototype.includes.min.js');
    }
    if (typeof window.CustomEvent !== 'function') {
        loadScript('/js/polyfills/customevent.min.js');
    }
    if (!window.Promise) {
        loadScript('/js/polyfills/promise.min.js');
    }
    if (!window.XMLHttpRequest) {
        loadScript('/js/polyfills/xmlhttprequest.min.js');
    }
    if (!Element.prototype.remove) {
        loadScript('/js/polyfills/element.prototype.remove.min.js');
    }
    if (!String.prototype.endsWith) {
        loadScript('/js/polyfills/string.prototype.endswith.min.js');
    }
    if (!String.prototype.includes) {
        loadScript('/js/polyfills/string.prototype.includes.min.js');
    }
    if ('options' in document.createElement('datalist') === false) {
        loadScript('/js/polyfills/html5.datalist.min.js');
    }

    // Load a script file synchronous
    function loadScript(src) {
        var js = document.createElement('script');
        js.src = src;
        js.async = false;
        document.body.appendChild(js);

    } // End of the loadScript method

})();