Best way to combine lots of javascript files

JavaScript
1

Hi,

I have about 20 javascript files in my header which I know is way too many. Is there a way to easily combine them all into one? Could I just create a new javascript file and then copy and paste the contents of each file into the new one in the order they are loading on the page?

Thanks!

2

Hi there,

I use grunt for this.
Here’s an excellent tutorial on how to install it and use it to concatenate JS files.

Of course, you could do this manually if you use a lot of libraries that aren’t likely to change.

3

I just put them all in one big file at the bottom of my page. Simple

4

Yes, not in the <head>: [U]Put Scripts at Bottom[/U] (and more “Best Practices for Speeding Up Your Web Site” over there).

  • Maybe (1) there are some exceptions, but 99% of the js-files are functioning when put at the bottom; you’ve to test that before collapsing them into 1 big file. And keep a backup of the separate files: in case of an update of one of them, to make a new big one. :wink:
  • Maybe (2) some of the js-files come from a content delivery network (CDN), which can be faster downloading than if you put them in the big file on your own server. Again some trials and comparing the test-pages will give the best way, I think.
5

With my site in my sig I put most of the head section in a include and the same with the bottom. Extremely easy to manage. Because yes sometimes you have a js file that needs to go up top. In which case adding it is so simple.