Setup Require.js in just 2 minutes. or download the code below and have it already working.

I’ve added some better screenshots below of require.js in action.

View project on GitHub

What is Require.js?

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

  • Speed – Asynchronous JavaScript Loading.
  • Manage JavaScript dependencies such as jQuery plugins.
  • File Structure your web app files.
  • When you get good you can code modules which do specific web app stuff.
  • Removes the need for including 100 script tags in your HTML.
  • Can be easily integrate with build scripts.

Does it work?

Yes. Screenshot below was taken from my dev with chrome dev tools open (disabling cache) so is naturally fast but amazingly even here you can see a performance increase.



Web App Scructure

This is a very basic structure you can use for a web app.

  • root/
    • index.html
    • js
      • vendor
        • [External JavaScript Files & jQuery Plugins]
      • app
        • main.js
        • [your modules and web app JavaScript files]
      • app.js
    • css
    • img

HTML Before:

The normal way to load scripts… modernizr goes in the head, the rest in the body.

< !DOCTYPE html>



HTML After:

Require.js goes in the head. Nice and neat.

< !DOCTYPE html>




This file contains the config for require.js. If you change the directory structure this needs to match. I’m showing you the shim version, you can also load jQuery from a CDN.

// Place third party dependencies in the lib folder
// Configure loading modules from the lib directory,
    "baseUrl": "js/vendor",
    "paths": {
      "app": "../app"
    "shim": {
        "backbone": ["jquery", "underscore"],
        "bootstrap": ["jquery"]

// Load the main app module to start the app


This file contains the web app dependencies and once loaded you can start your app using whatever framework you like such as Backbone or Angular.

//Load Web App JavaScript Dependencies/Plugins
], function($)

        //do stuff
        console.log('required plugins loaded...');


Still can’t get it working?

Download Code

Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • Moazam

    Your chrome screenshot with require.js shows loading time 259 ms and normal 29 ms. I am confused!

    • jQuery4u

      Hi Moazam, I’ve added some better screenshots! Hopefully they explain it better. :)

  • Echt Einfach TV

    You haven’t implemented require.js in your site. Why not?

    • jQuery4u

      Which site you referring to mate?

  • jQuery4u

    Haha yeah It’s powered by WordPress, I could integrate requireJS into it but juice not worth the squeeze. If I redesign the blog then yes I’d probably use it or bower/grunt combo but I highly recommend it for quick Web Apps.

  • Carlos B

    What happened to respond.js in the after?

Learn JavaScript for free!
Free course: Introduction to JavaScript

Yours when you take up a free 14-day SitePoint Premium trial.