RequireJS - Optimizer

In this chapter, we will discuss optimization in RequireJS. The Optimizer in RequireJS has the following characteristics −

  • Combines script files together with the help of UglifyJS for default usage or Closure Compiler for Java usage

  • Combines CSS files together.

The optimizer is a component of the r.js adapter for Node and Nashorn. It is developed to be a part of a build process and not for the development process.

Example

After downloading the r.js in your project folder, the structure of the folder should look as given below −

projectfolder/
   |-->index.html
   |-->CSS/
      |--->main.css
      |--->other.css
   |-->libs
      |--->require.js
      |--->main.js
         |--->dependent1.js
         |--->dependent2.js
         |--->dependent3.js

Your HTML file will look as shown below −

<html>
   <head>
      <script data-main = "libs/main" src = "libs/require.js"></script>
   </head>
   
   <body>
      <h1> RequireJS Sample Page </h1>
   </body>
</html>

Your main.js file will look as shown below −

require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2, 
   dependent3) {
});

Your main.css file will look as shown below −

@import url("other.css");

.app {
   background: transparent url(../../img/app.png);
}

Basic Setup of Optimizer

You can use the command line arguments or profile building properties for setting the project, both are exchangeable with each other.

Following is the syntax for command line −

node r.js -o baseUrl = . paths.jquery = content/path/jquery 
   name = main out = main-built.js

Following is the syntax for building profile −

({
   baseUrl: ".",
  
   paths: {
      jquery: "content/path/jquery"
   },
   
   name: "main",
   out: "main-built.js"
})

After this, you can pass on the build profile name to the optimizer in the command line, as shown below −

node r.js -o build.js

There are some shortcomings on the command line argument syntax. A combined use of both command line arguments or profile building properties can overcome these shortcomings.

Optimizing a Single JS File

To optimize a single JS file, you need to create a JS file that contains the content of all its dependencies. Your file should look as given below −

({
   baseUrl: "js/shop",
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "department": ["underscore", "jquery"],
         "dependent": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   name: "../main",
   out: "../built/js/main.js"
})

Now, you can create the main.js file which has all the dependencies for app. This file is used in HTML file to load all the JS files with one request. Note, that files created should not be there in the source code directory; the files should be in the copy of the project.

Usage of CDN Resources

The optimizer does not load scripts using the network resources/ CDN (Content Delivery Network). In case, the scripts need to be loaded using a CDN then you need to map these files to a module name and download the files to your local file path. You can use the special word “empty” in the build profile's path configuration as shown in the following syntax −

({
   baseUrl: "js",
   name: "mainCDN",
   out: "js/mainCDN-built.js",
   
   paths: {
      jquery: "empty:"
   }
   
})

The main file will look as shown below −

requirejs.config({
   paths: {
      'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
   }
});

require(['jquery'], function ($) {
});

Optimizing Single CSS File

CSS files are optimized using the following parameters directly in the command line as shown below −

node ../../r.js -o cssIn = main.css out = main-built.css

CSS files can also be optimized in a build file using the same properties as shown below −

...
cssIn:"main.css",
out:"main-built.css"
...

Both of the above methods are allowed and will create a file called projectfolder/css/mainbuild.css. This file will have the contents of main.css, the url() paths properly adjusted, and comments removed.

Optimizing Whole Project

The optimizer uses build profile to optimize all the css and js files. In the following example, the build.js file is created.

({
   baseUrl: "js/shop",
   appDir: '.',
   paths: {
      "jquery": "jquery",
      "backbone": "backbone",
      "underscore": "underscore"
   },
   
   shim: {
      "backbone": {
         "deps": ["underscore", "jquery"],
         "exports": "Backbone"  
      },
      
      "underscore": {
         exports: "_" 
      }
   },
   
   optimizeCss: "standard.keepLines",
   modules: [
      {
         name: "app"
      }
   ],
   
   dir: "../built"
})

The build.js file instructs RequireJS to copy all the app folders (appDir parameter) to the output folder built (dir parameter) and apply all the optimizations to the files located in the output folder. Run the following command to build a profile in the app folder −

node r.js -o build.js
Advertisements