WordPress – should I seperate scripts into their specific pages or have one master js file?

This is more of a general performance question. On my wordpress projects I will generally have an app.js file which is like a master collection of all of my little js scripts.

Some of these scripts will be specific to a certain page for example ‘Our Brands’. At the moment what I do is check for the page title with localised variables, so for example:

Read More
if (pageTitle == 'our-brands') {

    function loopThroughCharCode(loopStart, loopEnd) {
        var i = loopStart;
        for (var i = loopStart; i <= loopEnd; i++) {
            var letter = String.fromCharCode(i);
                if (i == 49) {
                    // if number 1, use the # symbol instead of 1
                    $('li > a#' + letter).first().parent().before('<li class="full-width">#</li>');
                } else {
                    $('li > a#' + letter).first().parent().before('<li class="full-width">' + letter +'</li>');
                }
        }
    }
    loopThroughCharCode(65, 90); // loop through a to z
    loopThroughCharCode(49, 49); // number 1

}

Is this better than seperating this block of code into its own js file and only enqueueing it on the our brands page?

FYI I minify and combine all my js on the fly using a plugin.

Related posts

2 comments

  1. Since you minify and combine your JavaScript files in production, I will definately advice you to separate your files while developing. That way it’s much simpler to edit and debug and it makes adding or deleting a page much simpler.

  2. Separate your scripts for best maintainability. Just minified your scripts in production environment using gulp or grunt, for example.

Comments are closed.