Merge small js-files into one bigger

Question

I want to tidy up the js-code used on my php-website to increase the loading speed. For the moment i include in every website the required js-file. My plan is to merge all js-files into one big one. Not every page uses every js-code, so i started something but don't know if this makes any sense.

I have already read the article One JS File for Multiple Pages but the method of Paul Irish is way to complicated for me (for the moment) as a beginner.

This is my approach: I create the file core.js and call it on every website like..

<script src="js/core.js"></script>

In core.js i first get the name of the corresponding page.

var path = window.location.pathname;
var page = path.split("/").pop(); 
var page_name = page.slice(0, -4);

Then i check which site requires which js-script (pseudo-code).

if (page_name == 'xyz'){
execute this code which is only used on this site
}

if (page_name == 'abc' || 'xyz' || 'def'){
execute another code which is used on multiple sites
}

if (page_name == 'ghi' || 'jkl' || 'mno' || 'xyz'){
include jquery for multiple sites
}
...
...

This means a lot of work for me, because i have a lot of js, so i wanted to ask first if this is a good solution to tidy up.

By the way: The js code i place on my website doesn't change often.

Thank you

Misch

score 1 · Answer 1 · answered Jun 02 '16 at 09:55

Split your javascript into sensible groups. You may have an admin section to your site, so have admin.js.

It's also worth noting that most browsers will only download the javascript file once and then cache it. You said that your code does not change very often so you may find that putting it all in one file doesn't actually have that much of an affect.

score 1 · Answer 2 · edited Aug 26 '16 at 06:33

Lets say you have pages like page1, page2, page3 etc.

Then your core.js will include all the codes of all the pages and then just initialize the code which you want to use

var page1= (function () {
              var Init = function (){
              //write the codes used by page 1
              };
              return {
                Initialize: function () {
                  Init();
                 }
              };
            })();

var page2= (function () {
              var Init = function (){
              //write the codes used by page 2
              };
              return {
                Initialize: function () {
                  Init();
                 }
              };
            })();
var page3= (function () {......});

var page = path.split("/").pop(); 
var path = window.location.pathname;

var page = path.split("/").pop(); 
var page_name = page.slice(0, -4); 

if (page_name == 'pg1'){
     page1.Initialize();
}

if (page_name == 'pg2' || 'pg3'){
     page2.Initialize();
     page3.Initialize();
}

if (page_name == 'pg4' ){
     page4.Initialize();
}

score 1 · Accepted Answer · answered Jun 02 '16 at 10:09

1

A solution for your problem could be something like:

if(selector) {
 //run code
}

This runs the code inside the block only if a particular selector exists. This way you don't have to go through all the trouble of getting the name of the page, splitting and slicing the string etc (this is also prone to errors).

So let's say you want to add some innerHTML on some node it will look something like this:

function bar (text) {
  alert(text)
}

if(document.getElementById('#foo')) {
   bar('#foo exists!')
}

This way bar is only called when a node with id #foo exists.

answered Jun 02 '16 at 10:09

Emil Haugberg van Veen

26
3

I like your approach but i am not sure if i got it the right way. So i have for example a div with a different id for each site. in the core.js i write for example `($("#id of div").length)` to check if id exists and then `function somefuction(length) { some js-code }` – Mischu Jun 02 '16 at 16:16
In that case it would be something like this: `if($('#idofdiv')) { somefunction($('#idofdiv').length)}` – Emil Haugberg van Veen Jun 03 '16 at 09:33
But your approach should work as well, because if the id does not exist, the `.length` of that div should return `undefined`, which is a falsy value and the if statement should evaluate to `false` (and the code inside that block does not run) – Emil Haugberg van Veen Jun 03 '16 at 09:35

score 0 · Answer 4 · answered Jun 02 '16 at 09:56

To be honest, this is just going to slow down your performance. If your users stay a long time on the website, then one single file reduces a bit of clutter in your code. But, if the user is visiting only a few pages, single file is just extra burden on bandwidth. There is a possibility, most of your users might not even need more than half of your js.

Plus, those extra conditions aren't really helping anyone. So, I would say, don't use single file option.

Merge small js-files into one bigger

4 Answers4