SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    130
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Best way to combine lots of javascript files

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,047
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    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!
    I just put them all in one big file at the bottom of my page. Simple

  4. #4
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PicnicTutorials View Post
    I just put them all in one big file at the bottom of my page. Simple
    Yes, not in the <head>: Put Scripts at Bottom (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.
    • 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. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Francky View Post
    Yes, not in the <head>: Put Scripts at Bottom (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.
    • 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.
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •