Loading External Scripts In Javascript and Family

Have you worked with JavaScript frameworks like Vue Js or Node Js or JavaScript library like React and you want to load an external script from a CDN link and you don't know the best approach?

Of course the easiest and common way of doing this is by attaching the CDN link with a script tag to our body in the index.html but there are some instances whereby we have a large scale application that is fetching from quite a number of endpoints and we do not want to load all the external script at ones so as not to slow down or overload our server. Though frameworks and library has made this easy for us through SPA (Single Page Application) which gives us access to components that are dynamically rendered based on user page of interest.

But this solution only works for components and pages, what about external links that we only want to load when a user visits a page of interest and not when the whole app loads. Some developers may think of cloning the code in the CDN link and then store it in a file but come to thing of a case where we have thousands of lines of code. Here is a simple and easy to use solution for you. Some days back, I was working on a web application which requires this and after making some research, I was able to get an effective solution for this and am sure you are also interested in the solution.

The normal common logic is

<!DOCType html>
<head>

  <!---- Some other meta tags and head components here ---->
<script src="https://CDNLINK.js"></script>
</head>
<body>

<!-----  Body Content here ---->
<script src="https://CDNLINKHERE.js"></script>
</body>
</html>

But in a single page application like a Vue app or a react app that has only one html page, the below method will work effectively and save you a lot of stress.

Follow along,

A simple JavaScript solution

    const Given_Name = document.createElement('script')

    Given_Name.setAttribute('src', 'https://*CDNLINKHERE*.js')

    document.head.appendChild(Given_Name)

Explanation

What the code above does is that it will load the script when the page loads and the attach it to the window global object. So you can make reference to what ever function or method you want to access with either:

    theNameOfTheFunction ()
                or
    window.theNameOfTheFunction ()

In frameworks like Vue Js, of course you can attach it to one of the lifecycle hooks like beforeMount or mounted based on where and when you need the content of the external script

In libraries like React Js, you can attach it also to one of the lifecycle hooks if you are using a class based component (componentDidMount or any other before the page loads as the case may be) and if it is a functional component, you can use a useEffect hook for that or just load it outside the function as long as it is working effectively. React Js also has quite a number of other beginners friendly packages to do this like:
React Helmet
React Script Tags

Do you have a shorter or more effective solution? feel free to drop in the comment section

Thanks for reading-- Follow me to get more amazing contents.

James Oluwabukola's blog

James Oluwabukola's blog

Loading External Scripts In Javascript and Family

An alternative to HTML CDN links

Table of contents

Explanation