Inspiring

Question

Combining multiple Javascript files into a single file

Forum|Forum|3 years ago
April 2, 2022
5 replies
1689 views

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

This topic has been closed for replies.

Nancy OShea

Community Expert

The latest version of jQuery is 3.6 released last year.

Version 1.5 is 10+ years outdated.

https://en.wikipedia.org/wiki/JQuery

Best advice, find a modern Template.

Nancy O'Shea— Product User & Community Expert

V

VShaneCurtisAuthor

Inspiring

Nope no joke, and sadly yes I did pay for it Can you provide some suggestions?

BenPleysier

Community Expert

This could be a good start: https://themes.getbootstrap.com/

If you want a more rewarding project, have a look at https://mdbootstrap.com/

Of course, there is always the best option: https://www.youtube.com/playlist?list=PLUjqTJN3byC-4U6FX9_b-x46pdtffuyG-

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

Nancy OShea

Community Expert

#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

BenPleysier

Community Expert

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!

O

osgood_

Legend

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.

BenPleysier

Community Expert

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!

O

osgood_

Legend

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.

BenPleysier

Community Expert

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!

Conclusion

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded