RequireJS Optimizer

The next chapter after Get into RequireJS

This time I will explain how you can optimize your project code when you are using RequireJS.

RequireJS has an optimization tool that does the following

  • Combines related scripts together into build layers and minifies them.
  • Optimizes CSS by inlining CSS files referenced by @import and removing comments.

With the optimizer, you can optimize just a single file, or you can optimize all the CSS and JS files in your project by using a build profile.

Requirements

There are different ways and different tools to do this, but my preference will go to run using Node.

So, if you don’t have node installed on your machine, go to node page and install it. Then, you need to download the optimizer from here.

Place the optimizer in the up folder of your project. Now, you need to create a build file with the all necessary configuration.

For my demo in the Get into RequireJs it looks like this:


({
  appDir: "../",
  baseUrl: "scripts",
  dir: "../../requirejs-demo-build",
  paths: {
    jquery: 'lib/jquery'
  },
  modules: [
    {
      name: "app/blog"
    },
    {
      name: "app/dataservice"
    },
    {
      name: "app/presenter"
    }
  ]
})

Note: Your output folder should always be different from the development folder!

Put your config file in the scripts folder (or you could put it anywhere, but be aware that all the paths are relative to the config file!)

And finally, to run the build, run this command from inside the scripts directory:


node ../../r.js -o app.build.js

The output should be something like this:


Optimizing (standard.keepLines) CSS file: c:/wamp/www/requirejs-demo-build/css/style.css

Tracing dependencies for: app/blog

Tracing dependencies for: app/dataservice

Tracing dependencies for: app/presenter
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/blog.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/dataservice.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app/presenter.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app.build.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/app.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/lib/jquery.js
Uglifying file: c:/wamp/www/requirejs-demo-build/scripts/lib/require.js

css/style.css
----------------
css/style.css

scripts/app/blog.js
----------------
scripts/lib/jquery.js
scripts/app/dataservice.js
scripts/app/presenter.js
scripts/app/blog.js

scripts/app/dataservice.js
----------------
scripts/lib/jquery.js
scripts/app/dataservice.js

scripts/app/presenter.js
----------------
scripts/lib/jquery.js
scripts/app/presenter.js

No if you open the output folder, you will see that your javascript code is now minified!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s