Using RequireJS to Speed Up Your Website

RequireJS is a JavaScript module loader that can help you manage JavaScript dependencies and that can also effectively speed up your website.

RequireJS speeds up your website by loading all of your JavaScript files asynchronously instead of synchronously, preventing them from render blocking your web pages. Render blocking files can significantly slow down your website because those files must be loaded before the rest of the page can complete.

Here is what your included JavaScript files might look like before and after setting up RequireJS.

Before RequireJS:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min"></script>
<script src="/js/my-website-code.js"></script>

After RequireJS:

<script data-main="/js/main" src="/js/require.js"></script>

GETTING STARTED

To get started using RequireJS, you’ll need to download the latest copy of RequireJS here.

After you’ve downloaded RequireJS, here’s how you would include it on your web page, assuming all of your JavaScript files are in a directory named “js” on your server:

<script data-main="/js/main" src="/js/require.js"></script>

This will load the RequireJS script and a custom script identified using the data-main attribute. The data-main script will typically contain your RequireJS configuration and any JavaScript code that you wish to include.

Note: the data-main file should be an absolute or relative URL without the .js extension. In this example, your actual file on the server would be named /js/main.js.

CONFIGURATION

Within the data-main file, you would specify your RequireJS configuration:

requirejs.config({
    "baseUrl": "/js",
    "shim": {
        "bootstrap" : {
            "deps" : [ "jquery" ],
        },  
    },
    "paths": {
        "jquery": "//code.jquery.com/jquery-3.3.1.slim.min",
        "bootstrap": "//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min",
        "my-website-code": "my-website-code",
    }
});

The baseUrl is the path to the JavaScript files that you wish to include with RequireJS. In this setup, it is assumed that you keep all of your JavaScript files in the “js” directory on your server.

The shim config specifies script dependencies. In this example, “bootstrap” depends on “jquery” to function properly, so “jquery” has been included using the deps array. Labels used in the shim section are specified in the paths section (see below).

The paths config specifies the location of the scripts to be included in RequireJS along with a label. The location will be appended to the baseUrl path. In this example, “my-website-code” is the label for the script located at /js/my-website-code.js. Note: the scripts in paths do not include the .js extension.

For external scripts that are not on your server, you would use the full path to the script minus the protocol (http/https) and the .js extension. For example, the jQuery script located at https://code.jquery.com/jquery-3.3.1.slim.min.js would be “//code.jquery.com/jquery-3.3.1.slim.min”.

Any script that you include in the RequireJS configuration should be removed from your web pages as they will now be included using RequireJS.

ADDING JAVASCRIPT CODE

JavaScript code that you wish to load using RequireJS would be included in the data-main file. If the code is plain JavaScript, you can simply add that to the file. If the code depends on a specific JavaScript file, you would indicate that using require.

For example, to add code that depends on jQuery:

require(['jquery'], function() {
    jQuery(".button").click(function() {
        alert("Button clicked!");
    });
});

If your code has more than one dependency:

require(['jquery', 'bootstrap'], function() {
    jQuery('#modal').modal(options);
});

CONCLUSION

There is much more to RequireJS than what we have covered here, but this should help you get started. If you have an existing website that uses a lot of JavaScript, converting to RequireJS might take some time, but it is well worth the effort for the potential web page speed improvement.

CONTACT US TO HELP SPEED UP YOUR WEBSITE