Optimize your JavaScript with RequireJS

Default avatar.
February 11, 2013
Optimize your JavaScript with RequireJS.

ThumbnailRequireJS is an effective way to improve the speed and quality of your JavaScript code additionally making it a lot more readable and easier to maintain.

In this article I’ll introduce you to RequireJS and how you can begin using it. We will go through requiring files and defining a module and even touch on optimization.

In simple terms require.js is a script loader that allows you to slip your JavaScript code into files and modules thus managing the dependencies of each model.

Requiring Files

To start working with RequireJS and its Asynchronous Module Definition (AMD) we must first download it, then link to the require.js file in the head of our document like so:

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

You may be wondering what that data-main attribute is, well using RequireJS means that when you call require in the head of your document you are also linking to the main file of your JavaScript application, the data-main attribute is a link to the main JavaScript file for your application, in this case main.js. (Note that RequireJS automatically adds the .js at the end of the filename.)

In this main.js file you will place the configuration for RequireJS, load in your modules and define a base path for use when requiring files.

The Require Function

RequireJS uses a simple require function to load in scripts, in this example RequireJS loads jQuery:

require(["jquery"], function($) {
return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

One of the best things about RequireJS is that it is extremely readable, if you look at that block of code you will see that first require grabs the file with the name of jquery.js and it passes an anonymous function with jQuery’s $ as a parameter, when that is done you are free to use all the JQuery code you please.

Now, you normally wouldn’t have the jQuery library in a file named jquery.js, as with most plugins and frameworks, we normally choose to load then from their GitHub or the Google CDN, and for that we need to configure the paths so that they point to the right place:

require.config({
paths: {
"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
}
});

This means you can require jQuery via Google and use it without a problem. (Note that I’ve used the name jquery” in this example, but you could call it anything you like.)

Defining a module

Using the AMD pattern means that our code can be structured in modules; these models are just bits of code that do something in our application. You can place two lines of code in a module or 100, it just depends on what you want that module to do.

To define a module we use code like this:

define(function () { 
function add (x,y) {
return x + y;
}
});

In this example I have created a simple add function with no dependencies, but if this function needed jQuery to work properly, the define function would be structured like this:

define([‘jquery’], function () { 
function place(mydiv) {
return $(mydiv).html(‘My Sample Text’);
}
});

Using this syntax we tell JavaScript to go get jQuery first, and then run the code so that jQuery is available when needed. We can also use this in modules we have written in JavaScript files, it’s not limited to frameworks or plugins.

Optimization

As you can see RequireJS is a great tool for organizing your files into modules and only loading what you need. The downside is that too many JavaScript files result in poor load times, which is why RequireJS includes an optimizer to collect the data from all the files and place it in a single minimized file.

All in all, RequireJS is one of the best ways to organize and optimize your JavaScript for the modern web.

Have you used RequireJS in a project? Has it improved your workflow? Let us know in the comments.

Featured image/​thumbnail, boxes image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…