How do you import multiple javascript files in HTML index file without the bloat?

Question

Including a JavaScript file in another JavaScript file is common in web development.

Because many times we include the JavaScript file at run time on the behalf of some conditions.

So, we can achieve this using JavaScript as well as using jQuery.

Method 1: Use JavaScript to include another JavaScript file

1. Add the following function in your web page.

   function loadScript(url)
   {    
       var head = document.getElementsByTagName('head')[0];
       var script = document.createElement('script');
       script.type = 'text/javascript';
       script.src = url;
       head.appendChild(script);
   }
   

2. just call the below loadScript function, where you want to include the js file.

   loadScript('/js/jquery-1.7.min.js');
   

Method 2: Use jQuery to include another JavaScript file.

1. Add jQuery File in your webpage.

   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
   

2. Just call the getScript function functions.

   jQuery(document).ready(function(){
       $.getScript('/js/jquery-1.7.min.js');
   });
   

How to include a JavaScript file in another JavaScript File

There's a way:

You can create a javascript function that takes the path as a parameter and creates these HTML lines:

<script src="js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

And you'll just have to call this:

loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");

But this is not recommended because the load time will be increased due to the number of HTTP requests. You should better use something in the server side to put everything in the same file.

No you can't do it. And by the way this is not good idea to load all 50 separate files. Consider compressing them in one single script to improve performance and decrease page load time.

You can setup grunt to watch the folder of the scripts and concat/minify them into a single file, then you just have to include that in your HTML file.

You will need to specify each file for the browser to know what to retrieve, but depending on the IDE you are using, there may be shortcuts for doing this, (Visual Studios allows you to drag and drop script files into the html to add references).

During development, you want to do just as your doing by keeping the files separate for troubleshooting, but in production, as others have commented, its very good practice to minify your code and combine them into one file. That makes it only one call, and can reduce your overhead significantly.

I recommend you to use JSCompress. It will compress all your javascript code into one single javascript file.