What is RequireJS ?
It also comes with a optimization tool r.js which combines related scripts together into build layers and minifies them via UglifyJS (the default) or Closure Compiler (an option when using Java), also it optimizes CSS by inlining CSS files referenced by @import and removing comments.
What is Almond ?
It’s a replacement AMD loader for RequireJS. It is a smaller “shim” loader, providing the minimal AMD API footprint that includes loader plugin support.
A normal web application normally have following script loading structure
1 2 3 4 5 6 7
which will lead into the multiple HTTP requests
RequireJS takes a different approach to script loading than traditional script tags. As mention on its site RequireJS goal is to encourage modular code.
RequireJS loads all code relative to a baseUrl. The baseUrl is normally set to the same directory as the script used in a data-main attribute for the top level script to load for a page or baseUrl can be set manually via the RequireJS config.
And the main file with RequireJS configuration will look like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
Modules in RequireJS are an extension of the Module Pattern, with the benefit of not needing globals to refer to other modules. They can explicitly list their dependencies and get a handle on those dependencies without needing to refer to global objects, but instead receive the dependencies as arguments to the function that defines the module.
There should only be one module definition per file on disk. A sample module with dependency looks like this
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
For older libraries which do not support AMD RequireJS can handle them via shims.
Shims configure the dependencies and exports for older, traditional “browser globals” scripts that do not use define() to declare the dependencies and set a module value.
Here is an example. It requires RequireJS 2.1.0+, and assumes backbone.js, underscore.js and jquery.js have been installed in the baseUrl directory. If not, then you may need to set a paths config for them:
1 2 3 4 5 6 7 8 9
r.js tool combines related scripts together into build layers and minifies them and also optimizes CSS by inlining CSS files referenced by @import and removing comments.
The optimizer can be run using Node, Java with Rhino, or in the browser.
node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js
CSS files can be optimize by the following command
node r.js -o cssIn=main.css out=main-built.css
Or we can configure the whole project by giving a single config file and running the following command
node r.js -o build.js
and build.js config file will look like
1 2 3 4 5 6 7 8
Once we get this we can modify our HTML to include this new file.
when it pass to the r.js optimizer it creates the minified script with require module loader functionality
node r.js -o baseUrl=. name=path/to/almond include=main out=main-built.js wrap=true
So basically this command will wrap everything inside a function
1 2 3 4
This can also be done with config file by just adding the path to almond file
1 2 3 4 5 6 7 8 9
Normal web app will have many images on the page for e.g. logo, icons etc. These images are normally added as the css classes with background images. HTTP request call to load them can be save if they are added as the base64 data:image
so that with CSS optimization and serving them as gzip will reduce the size of them dramatically.