Using a RequireJS CDN Combination

 requirejs cdn

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 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 lorem-1c6b.kxcdn.com with your Zone URL or Zonealias):

<script data-main="scripts/main" src="https://lorem-1c6b.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 real-time 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

Leave A Comment?