Combining multiple Javascript files into a single file

Report · Apr 01, 2022

Hi Guys,

I'm currently working with a third party template. This template loads several javascript files up front and others at different points in the template. I'm not a wiz at web development and I've never used more than one javascript file at a time. My question is, Is there any reason why I could not combine these files into a single file providing that there are no duplicate function names? This is an example of some of the script files that are being loaded.

<script type="text/javascript" src="../javascript/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="../javascript/jquery.cookie.js"></script>
    <script type="text/javascript" src="../javascript/jquery-ui-1.8.11.custom.min.js"></script>
    <script type="text/javascript" src="../javascript/special_functions.js"></script>
    <script type="text/javascript" src="../javascript/hoverIntent.js"></script>
    <script type="text/javascript" src="../javascript/superfish.js"></script>

Thanks In Advance

Report · Apr 01, 2022

Please read this:

https://webspeedtools.com/should-i-combine-css-js/

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 02, 2022

Depends really. If you are serving your website with http/2 and not http/1 and https// rather than http//, plus have an SSL certificate installed then it doesn't matter, within reason, how many linked javascript or css files you have.

You tend to see this kind of 'ugly' set up in prebuilt template files because they use a lot of individual plugins from various sources, ie, many Wordpress websites as an example exhibit this kind of rubbish code.

If youre working directly in the code it can be rather annoying to have 20/30 linked javascript and css files, but that's the price you pay for relying on a lot of third party dependencies. A good operator would see what can be reasonably combined to lessen the linked files, which makes the code cleaner and easier to work with and manage.

These days l usually only have a couple of javascipt files and a couple of css files linked to each page as all the code is manually written and streamlined which is not going to be the case with third party plugins so you may find you need more linked files to overcome all the bloat which tends to be included.

EDITED

Although in your case I would NOT try to combine the files as 2 are core jQuery library files, 1 is the 'superfish jQuery menu' plugin. I dont know what the others are or do. Whatever template you are using is outadated if its using jQuery 1.5

I'd only recomend combining files IF you are writing your own code, know exactly what it does and its very streamlined, produced just do the job which is needed and nothing else.

Report · Apr 02, 2022

Apparently @osgood_ did not read the article that I mentioned. In particular the last bit:

Conclusion

Combining or merging CSS and JS files worked in the past because of the limitations of the then technology. But now you shouldn't combine your CSS and JS files in order to take advantage of the latest web technologies and to get the best performance from your site.

Edit: HTTP/1 was introduced 1991; HTTP/2 in 2015. This means that any decent web server should be serving HTTP/2 by now. The multipleximg used by HTTPP/2 means that the resources arrive at approximately at the same time. In other words, 1 large file will take longer to load than 10 small files totalling the same number of bytes as the large file.

Edit2: Have a look at the waterfall. Most of the files are loaded at about the same time.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 02, 2022

Apparently osgood_ did not read the article that I mentioned. In particular the last bit:

By BenPleysier

Apparently you didnt read my reply. I said it was 'ugly' to have so many linked files in your code NOT that you can't or shouldn't do (However you of course would not appreciate that as you don't code but rely on someone else to do that for you).

Also what I said is IF you write your own streamlined code there's no need to create dozens of linked independent files as writing ones own code is hugely streamlined as opposed to using a lot of frameworks and plugins. Infact one could probably write all of ones own code and it would still be less than a Bootstrap js file, let alone all the other junk you might wish to include beyond Bootstrap.

The introduction of http/2 has opened the way for poor practices of which Im not associated with - next it will be http/3 purely to negate the even poorer workflows that will follow!

If you follow your practice or readings of course you would be breaking the Bootstrap js file or jQuery file up into 10 files..........to make it load faster.

Of course this is all subjective because we are talking about nano-milliseconds. You may as well start debating how many images should be used and what size they should be if youre concerned about how many milliseconds you can shave off.

I'm more concerned with clean, managable code than saving a few milliseconds, others may have different criterias.

Report · Apr 02, 2022

Also what I said is IF you write your own streamlined code there's no need to create dozens of linked independent files as writing ones own code is hugely streamlined

By osgood_

Am I to understand that you do not use ES6 modules?

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Apr 02, 2022

Also what I said is IF you write your own streamlined code there's no need to create dozens of linked independent files as writing ones own code is hugely streamlined

By osgood_

Am I to understand that you do not use ES6 modules?

By BenPleysier

No, and neither do you beyond your node environment. As l keep trying to inform you l use an uncomplicated method of building websites because it works. I'm not in fantasy land thinking the websites l built are in the same category as where all these solutions usually appear first and then are adopted by those that really have zero need for them. In other words l don't use a sledgehammer to crack a nut when it's not necessary or use trends which come and go.

Report · Apr 02, 2022

Hi Guys,

Thanks for the answers. Let me clarify my intent. It is to streamline the code. I'm a programmer and database designer primarily and I hate messy code. This is code is messy to me. With that in mind what are your thoughts? What is the most current version of the JQuery file you mentioned?

Report · Apr 02, 2022

Hi Guys,

Thanks for the answers. Let me clarify my intent. It is to streamline the code. I'm a programmer and database designer primarily and I hate messy code. This is code is messy to me. With that in mind what are your thoughts? What is the most current version of the JQuery file you mentioned?

By VShaneCurtis

In your case since you are using 3rd party dependencies, jQuery, Superfish etc I would NOT try and combine the scripts into one file.

I would only suggest combining scripts that a developer has written themselves as these are usually less bloated than 3rd party scripts and more understandable to the developer, so combining them into 1 or 2 files is much simpler to do and manage rather than having multiple links to 2k, 4k etc files. All this effectively does is tidy up the code, not much else. So in my opinion this is really about how you view your code rather than any real benefits that it might provide.

It has become the normal in web-development these days to have 20-30 links to scripts and css files, not that I approve as its mostly as a result of unskilled operators who largely depend on point and shoot development rather than actually knowing what they are doing. As a consequence the end result is not what a professional would deem as desirable BUT it works, and that these days is all that counts, it would seem.

The latest version of jQuery is version 3 (I think - I don't use jQuery these days) version 1.5, which you appear to be using is a few years behind BUT beware, you can't just hook up jQuery version 3 as that might break the template you are using.

Report · Apr 02, 2022

Thank you for your thoughts and admonishments they are both appreciated. As I said before I'm not an HTML wiz. I have been trained in it's coding but it is my least favorite environment. I'm not very skilled at coding it from scratch. You said that the template I'm using seems out of date. Can you point me in the direction of something more current/modern? I don't mind back peddling if it's for the "greater good"

Report · Apr 02, 2022

Thank you for your thoughts and admonishments they are both appreciated. As I said before I'm not an HTML wiz. I have been trained in it's coding but it is my least favorite environment. I'm not very skilled at coding it from scratch. You said that the template I'm using seems out of date. Can you point me in the direction of something more current/modern? I don't mind back peddling if it's for the "greater good"

By VShaneCurtis

Maybe somone else can point you in the direction of more up-to-date templates resources as its not an area which I'm familar with being as though I code almost everything myself from scratch. I just see jQuery v1.5 and think this appears to be a bit outdated.

The forum is not that active these days given the decline of Dreamweaver itself but there are still a handful that may have some advice when it comes to sourcing and starting from a template concept.

Report · Apr 02, 2022

Thanks for your thoughts.

Report · Apr 02, 2022

#1 It's a bad idea to combine scripts. Especially if you're not an experienced developer.

#2 That pig-in-a-poke Template is a joke, right? Superfish Menus, jQuery 1.5??? I hope you didn't pay money for this. It's very, very outdated and not fit for modern use.

Nancy O'Shea— Product User, Community Expert & Moderator