How to dynamically load a JS file in JavaScript

Key Takeaways

Dynamic file/script loading in JavaScript reduces initial page load time. It ensures that only essential resources are loaded up front, improving First Contentful Paint (FCP) and Time to Interactive (TTI).
Scripts are loaded asynchronously or on-demand to keep the page responsive and prevent blocking the DOM rendering, enhancing user experience.
Using promises ensures sequential loading, preventing dependency issues when scripts rely on each other.

Loading JavaScript file dynamically

Dynamic JavaScript file loading refers to the process of adding scripts to the document at runtime. Instead of including all scripts in the HTML file, you can load specific scripts only when they are needed. This technique improves performance, reduces page load time, and optimizes resource usage.

If you know exactly which JavaScript file to load, typically, you would use the script tag:

Explanation

Line 2: We create a new <script> element and store its reference in the newScript .
Line 3: We set the src attribute to point to the JavaScript file you want to load.
Line 4: We specify the script type. It is optional in modern browsers.
Line 5: We ensure the script loads asynchronously (doesn’t block rendering).
Line 7: We define the onload() callback function that fires when the script is successfully loaded.
Line 8: We define the onerror() callback function that handles errors if the script fails to load.
Line 10: We append the script to the document’s <head> section, triggering file load during page initialization.

Let's look at a complete working example.

In the load-script.js file above, we define a loadScript() function that creates a <script> element and sets the src attribute to the target file. The onload() and onerror() handlers display success or error messages inside the HTML. The displayMessage() function updates the content of the #message <div> to show success or error messages. Finally, we attach an event listener to the button, triggering the loading of the file.js file when clicked.

Learn more about JavaScript file loading with hands-on practice with, Build a Microblogging App Using PHP, HTML, JavaScript, and CSS project.

Method 2: Sequential script loading with promises

When we need to ensure sequential script loading, we can use JavaScript promises. This is useful when one script depends on another being fully loaded, and it also avoids race conditions when scripts depend on each other.

function loadScriptSequentially(file) {
  return new Promise((resolve, reject) => {
    const newScript = document.createElement('script');
    newScript.setAttribute('src', file);
    newScript.setAttribute('type', 'text/javascript');
    newScript.setAttribute('async', 'true');
    newScript.onload = () => {
      console.log(`${file} loaded successfully.`);
      resolve();
    };
    newScript.onerror = () => {
      console.error(`Error loading script: ${file}`);
      reject(new Error(`Failed to load: ${file}`)); 
    };
    
    document.head.appendChild(newScript);
  });
}

Explanation

Line 2: The loadScriptSequentially() function returns a new Promise object, which allows us to handle asynchronous behavior. If the script loads successfully, the resolve function will be called, and if it fails, reject will be triggered.
Lines 8-10: We define the onload() callback function, which will run when the script loads successfully. We log a message to the console indicating that the script was loaded successfully. Finally, we call the resolve() function to indicate that the promise has been successfully completed.
Lines 13-15: We define an onerror() callback to handle errors that occur while loading the script. If the script fails to load, we log an error message to the console. We call reject() with a new Error object to signal that the promise has failed.