Module to support the optimized delivery of web application resources
npm install optimizerRaptorJS Optimizer
==================
 
The RaptorJS Optimizer is a Node.js-style JavaScript module bundler that also provides first-level support for optimally delivering JavaScript, CSS, images and other assets to the browser.
This tool offers many different optimizations such as a bundling, code splitting, lazy loading, conditional dependencies, compression and fingerprinted resource URLs. Plugins are provided to support pre-processors and compilers such as Less, Stylus and Marko. This developer-friendly tool does not require that you change the way that you already code and can easily be adopted by existing applications.
- Example
- Design Philosophy
- Features
- Another Client-side Bundler?
- Installation
- Usage
- Command Line Interface
- JSON Configuration File
- Dependencies
- Conditional Dependencies
- Enabling Flags
- Asynchronous/Lazy Loading
- JavaScript API
- Configuring the Default Page Optimizer
- Optimizing a Page
- Creating a New Page Optimizer
- Optimizer Taglib
- Using the Optimizer Taglib with Marko
- Using the Optimizer Taglib with Dust
- Client/Server Template Rendering
- Runtime Optimization with Express
- Bundling
- Code Splitting
- Configuration
- Default Configuration
- Complete Configuration
- Node.js-style Module Support
- Available Plugins
- Extending the Optimizer
- Custom Plugins
- Custom Dependency Types
- Custom JavaScript Dependency Type
- Custom CSS Dependency Type
- Custom Package Type
- Custom Output Transforms
- Sample Projects
- Discuss
- Maintainers
- Contributors
- Contribute
- License
Install the command line interface for the Optimizer:
``text`
npm install optimizer-cli --global
Install a helper module from npm:
`text`
npm install change-case
Create the main Node.js JavaScript module file:
__main.js:__
`javascript`
var changeCase = require('change-case');
console.log(changeCase.titleCase('hello world')); // Output: 'Hello World'
Create a StyleSheet for the page:
__style.css__
`css`
body {
background-color: #5B83AD;
}
Create an HTML page to host the application:
__my-page.html:__
`html`
Optimizer Demo
Run the following command:
`bash`
optimizer style.css \
--main main.js \
--inject-into my-page.html
Output:
`text`
Output for page "my-page":
Resource bundle files:
static/my-page-9ac9985e.js
static/my-page-1ae3e9bf.css
HTML slots file:
build/my-page.html.json
Updated HTML file:
my-page.html
Open up my-page.html in your web browser and in the JavaScript console you will see the output of our program running in the browser, as well as a page styled by style.css.
As you can see, with the Optimizer you no longer have to struggle with managing complex build scripts. Simply let the Optimizer worry about generating all of the required optimized resource bundles and injecting them into your page so that you can just focus on writing clean and modular code.
There's also a JavaScript API, taglib and a collection of plugins to make your job as a front-end web developer easier. Please read on to learn how you can easily utilize the Optimizer in your application.
* Dependencies should be declarative _or_ discovered via static code analysis
* Common module loading patterns should be supported
* Must be extensible to support all types of resources
* Maximize productivity in development
* Maximize performance in production
* Must be easy to adopt and not change how you write your code
* Can be used at runtime or build time
* Must be configurable
* Optimize Client-side Dependencies
* Supports all types of front-end resources (JavaScript, CSS, images, Less, CoffeeScript, etc.)
* Asynchronous/lazy loading of JS/CSS
* Configurable resource bundling
* Code splitting
* JavaScript minification
* CSS minification
* Fingerprinted resource URLs
* Prefix resources with CDN host name
* Optional Base64 image encoding inside CSS files
* Custom output transforms
* Declarative browser-side package dependencies using simple optimizer.json filesmodule.exports
* Generates the HTML markup required to include optimized resources
* Conditional dependencies
* Image minification
* etc.
* Browser-side Node.js Module Loader
* Full support for Isomorphic JavaScript
* Conflict-free CommonJS module loader for the browser
* Complete compatibility with Node.js
* Supports , exports, require, require.resolve, __dirname, __filename, process, etc.browser
* Supports the package.json field
* Full support for browserify shims and transforms
* Maintains line numbers in wrapped code
* Developer Friendly
* Disable bundling and minification in development
* Line numbers are maintained for Node.js modules source
* Extremely fast _incremental builds_!
* Only modified bundles are written to disk
* Disk caches are utilized to avoid repeating the same work
* Dependency Compilation
* Less
* Marko
* Dust
* etc.
* Extensible
* Custom dependency compilers
* Custom code transforms
* Custom bundle writers
* Custom plugins
* Configurable
* Configurable resource bundles
* Enable/disable transforms
* Development-mode versus production-mode
* Enable/disable fingerprints
* etc.
* Flexible
* Integrate with build tools
* Use with Express or any other web development framework
* JavaScript API, CLI and taglib
* _Future_
* Automatic image sprites
Browserify is an excellent JavaScript module bundler. We are huge supporters of writing Node.js-style modules (i.e. CommonJS), and we also believe npm is an excellent package manager. If you are not using a JavaScript module bundler then you are absolutely missing out. Modularity is equally important for client-side code as it is for server-side code, and a JavaScript module bundler should be part of every front-end developer's toolbox.
So why did we create the RaptorJS Optimizer if Browserify is such a great tool? We created the RaptorJS Optimizer because we wanted a top-notch JavaScript module bundler that _also_ provides first-level support for transporting CSS, "plain" JavaScript, images, fonts and other front-end assets to the browser in the most optimal way. In addition, we want to enable developers to easily create web applications that follow widely accepted rules for creating faster-loading websites (such as putting StyleSheets at the top, and JavaScript at the bottom). We also want to allow for developers to easily load additional JavaScript and StyleSheets after the initial page load.
While high performance is very important for production systems, we want to also provide a more developer-friendly experience by offering fast, incremental builds, simplifying development and by producing debuggable output code. And, of course, we do not want developers to have to learn how to code their applications in a new way so the RaptorJS Optimizer was built to not change how you already code. You'll even find support for Browserify shims and transforms. Therefore, if you try out the RaptorJS Optimizer and it is not the tool for you, then feel free to switch back to something else (it'll of course be ready if your application's requirements change in the future). eBay and other large companies rely on the RaptorJS Optimizer for delivering high performance websites and are committed to its success. If you try it out and find gaps, please let us know!
The following command should be used to install the optimizer module into your project:
`bash`
npm install optimizer --save
If you would like to use the available command line interface, then you should install the optimizer-cli module globally using the following command:
`bash`
npm install optimizer-cli --global
__Sample App:__ To try out and experiment with the code, please see the following project:
raptor-samples/optimizer-cli
Install the command line interface for the Optimizer:
`bash`
npm install optimizer-cli --global
In an empty directory, initialize a new Node.js project using the following command:
`bash`
mkdir my-app
cd my-app
npm init
Install required modules into the new project:
`bash`
npm install jquery
npm install optimizer-less
Create the following files:
__add.js:__
`javascript`
module.exports = function(a, b) {
return a + b;
};
__main.js:__
`javascript
var add = require('./add');
var jquery = require('jquery');
jquery(function() {
$(document.body).append('2+2=' + add(2, 2));
});
`
__style.less:__
`css
@headerColor: #5B83AD;
h1 {
color: @headerColor;
}
`
__my-page.html:__
`html`
Optimizer Demo
Finally, run the following command to generate the optimized resource bundles for the page and to also inject the required