Using a RequireJS CDN Combination

Updated on October 4, 2018

What is RequireJS?

RequireJS is an open source JavaScript module and file loader. When using RequireJS, code is separated into modules where each module handles a single responsibility. By doing so, this helps improve the speed and quality of your code. Require JS is compatible with all modern browsers including:

IE 6+
Firefox 2+
Safari 3.2+
Chrome 3+
Opera 10+

RequireJS can be downloaded and hosted on your origin server, however, for faster delivery, it can also be referenced using a RequireJS CDN combination. The following section outlines two methods for achieving this.

How to use a RequireJS CDN combination

RequireJS can be accelerated either by using your own CDN account or a third party CDN service. If you already have an existing CDN account, you may already be delivering RequireJS via your CDN's network of POPs. However if not, you can easily reference the file using your CDN URL. Alternatively, for those who do not currently have a CDN account, using a third party CDN service gives users the option to reference the RequireJS file from said service's network of POPs.

Option 1 - Using your own CDN account

If you already have a CDN account, you can use it to help improve the delivery of the RequireJS file. KeyCDN provides you with two options to achieve this, either by using a Pull Zone or a Push Zone.

A Pull Zone automatically pulls all of your static assets from your origin server and caches them at the visitor's nearest POP upon first request. Therefore, upon subsequent requests, your static assets are delivered from the CDN edge server and should return an X-Cache: HIT response header. By using this method, no URL configuration is necessary on the origin server in order to accelerate the RequireJS file.

For Push Zone users, simply upload the latest version of RequireJS via FTP(S) or rsync and reference it in your project similar to (replace example-hexid.kxcdn.com with your Zone URL or Zone Alias):

<script data-main="scripts/main" src="https://example-hexid.kxcdn.com/scripts/require.js"></script>

The data-main attribute is included in the script element to tell RequireJS to load scripts/main after require.js loads. RequireJS uses the main.js file to look for other scripts and dependencies.

Option 2 - Using an open source CDN

If you do not have a CDN account but would still like to use a RequireJS CDN combination, an open source CDN service such as cdnjs.com can be used. To reference cdnjs RequireJS use the following snippet (ensure that you first check for the latest version x.y.z).

<script data-main="scripts/main" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/x.y.z/require.js"></script>

Benefits of a RequireJS CDN implementation

Whether you're delivering RequireJS from your own CDN or a third party CDN, applications using a RequireJS CDN combination will be delivered faster as there will be less distance to travel between the client and server. There also exist many other advantages to users who accelerate their RequireJS file and other static content with KeyCDN such as:

Free access to detailed stats within the KeyCDN dashboard
Access to all strategically placed POPs
HTTP/2 supported edge servers for faster content delivery
Let's Encrypt integration for access to free SSL certificates