Combine Multiple JavaScript Files


Part One Chapter 10

JavaScript

It is very common that a mobile web page uses multiple external JavaScript files. JavaScript is essential for some business objectives such as:

  • Enable users to interact with the mobile web page. In most cases, you will write your own JavaScript codes to allow user interactions to perform correctly on your mobile web pages.
  • Allow user behavior on the mobile web page to be tracked. For example, the Google Analytics JavaScript tracking code can record user behavior of your mobile web pages.

Single JavaScript File

The most common way to use JavaScript is to place your JavaScript in an external file and then include this external JavaScript file in the head section of your web page. For example, your external file is named “main.js”.

<head>
<script src="http://m.example.com/main.js"></script>
</head>

Multiple JavaScript Files

In most other cases, you may have multiple external JavaScript files, some in the head section and some other in the body section of a single mobile web page. This is not a good practice as downloading each external JavaScript file adds another unnecessary http request to slow down the loading of your page.

For example, your mobile web page has 3 external JavaScript files, in which two are in the head section and one is in the body section.

<head>
<script src="http://m.example.com/main.js"></script>
<script src="http://m.example.com/script2.js"></script>
</head>
<body>
<script type="text/javascript" src="http://m.example.com/script3.js"></script>
</body>

Reduce HTTP Requests

The fewer external resources your page requires the web browser to download, the faster the page load speed.

Your mobile web page should load faster when the web browser has to download fewer external JavaScript files. To achieve this, you should combine multiple JavaScript files into fewer files or even a single file. This will reduce the number of http requests. Assume you are able to merge all the external JavaScript files into a single file (e.g. “combined.js”).

<head>
<script src="http://m.example.com/combined.js"></script>
</head>

Combine Multiple JavaScript Files into One File

To combine all your JavaScript into a single file:

  • Open all 3 JavaScript files. i.e. “main.js”, “script2.js”, and “script3.js”.
  • Copy and paste all the content of the 3 JavaScript files onto a new file, such as “combined.js”.
  • Update the “script” tag in the head section to request the new file “combined.js”.
  • Remove all the “script” tag that used to request the other 2 JavaScript files.

Reminder

  • If you may not be able to combine all the JavaScript files into a single file, then try your best to reduce the number of external JavaScript files into fewer files. In most cases, it is highly possible to merge 7-8 JavaScript files into 2 or 3 files, and it doesn't cause any JavaScript to malfunction.
  • Often the order of JavaScript files is important. For example, the first JavaScript file is a jQuery file, but in the second JavaScript file's code it makes use of one of the functions in the first file. In this case, you must make sure placing the JavaScript codes in the correct order when they are merged into a single JavaScript file.


Gordon Choi's Mobile Website Book has been available since November 2016.







Content on Gordon Choi's Mobile Website Book is licensed under the CC Attribution-Noncommercial 4.0 International license.

Gordon Choi's Mobile Website Book

Gordon Choi’s Other Websites:
SEO Expert in Hong Kong (Gordon Choi’s Blog)
Analytics Book