How to Dynamically Load JS inside JS?

Last Updated : 14 Oct, 2024

In JavaScript, dynamically loading scripts allows the inclusion of external JavaScript files only when needed, improving performance and efficiency. Instead of using static imports, scripts can be loaded conditionally at runtime.

Approach

ES6 provides us with a construct import(), which provides the facility to import a module on demand.
import() returns a promise to provide a module object of the requested module.
We can utilize the module object for using the various imports.

Syntax:

import("#ModuleSource").then((module)=>{
     //use module object to access any of the imports.
})

Example: Let us say we want to run a script to perform some operation on string depending on the button clicked.

HTML

<!-- index.html:- contains frontend scripts -->
<!DOCTYPE html>
<html>

<head>
    <title>String operations</title>
</head>

<body style="text-align:center;">

    <h1 style="color:green;">
        GeeksForGeeks
    </h1>

    <input type="text" id="myString">

    <button id="reverse" style="padding: 0.5em 0.5em;">
        Reverse the String !!
    </button>

    <button id="palindrome" style="padding: 0.5em 0.5em;">
        Check whether palindrome !!
    </button>

    <div id="answer" style="color: green;
                font-size: 2em; 
                padding: 1em;">
    </div>

    <!-- Script to perform one of the operations. -->
    <script type="text/javascript">
        let reverseButton = document.getElementById("reverse");
        let palindromeButton = document.getElementById("palindrome");

        //module containing the logic to reverse a string.
        let module1 = '/reverseString.mjs';

        //module containing the logic to check 
        //whether the string is palindrome or not.
        let module2 = '/isPalindrome.mjs';

        reverseButton.addEventListener("click", () => {

            //consuming the value of input
            let str = document.getElementById("myString").value;

            import(module1).then(module => {

                document.getElementById("answer").innerHTML =
                    module.reverseString(str);

            });
        });

        palindromeButton.addEventListener("click", () => {

            //consuming the value of input
            let str = document.getElementById("myString").value;

            import(module2).then(module => {

                if (module.isPalindrome(str)) {
                    document.getElementById("answer").innerHTML =
                        "The string is a palindrome";
                } else {
                    document.getElementById("answer").innerHTML =
                        "The string is not a palindrome";
                }
            });
        });
    </script>
</body>

</html>

javascript

// reverseString.mjs
// module to reverse a given string

export function reverseString(str){

    return str.split('').reverse().join('');

}

JavaScript

// isPalindrome.mjs
// module to check whether string is palindrome or not

export function isPalindrome(str){
    
    return (str===str.split('').reverse().join(''))

}

Output:

Note:
The modules can be dynamically loaded inside regular scripts also.
A local server needs to be set up to avoid cross site origin issue while using ES6 modules.

When to use what?

Dynamic imports are useful when there is some module which is seldom required in the script. This improves the performance at the initial load time. But if any exports are used frequently within a script, then it can cause some lag during execution.