Optimizing Require.js Part 2

‹prev | My Chain | next›

Yesterday I was able to get the optimization tool in require.js to compress the Javascript in my Backbone.js application. The optimizer compressed, but I was forced to explicitly create a jquery.js file.

This was despite already telling require.js how the versioned filename mapped to jquery:

// public/app.js
require.config({
  paths: {
    'jquery': 'jquery-1.7.1'
  }
});

require(['my-calendar'], function(calendar){
  calendar.initialize();
});

Per a tweet from the require.js maintainer, the above configuration is run-time, not optimize-time. It seems that the optimize configuration is completely separate from the above. In other words, the optimizer configuration is currently coming only from my command line:

➜  scripts git:(master) ✗ ../node_modules/requirejs/bin/r.js -o name=main out=main-built.js baseUrl=.

Rather than build that command line up further, I move it into an app.build.js config file, duplicating the paths configuration from my application code:

({
  baseUrl: ".",
  name: "main",
  out: "main-built.js",
  paths: {
    'jquery': 'jquery-1.7.1'
  }
})

Now I instruct the r.js optimizer to get its config from the app.build.js file instead of from the command line:

➜  scripts git:(master) ✗ ../../node_modules/requirejs/bin/r.js -o app.build.js

Tracing dependencies for: main
Uglifying file: /home/cstrom/src/backbone-requirejs-test/public/scripts/main-built.js

/home/cstrom/src/backbone-requirejs-test/public/scripts/main-built.js
----------------
/home/cstrom/src/backbone-requirejs-test/public/scripts/jquery-1.7.1.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/underscore.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/backbone.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/my-calendar/views/paginator.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/my-calendar/routers/paginator.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/my-calendar.js
/home/cstrom/src/backbone-requirejs-test/public/scripts/main.js

That looks good. Checking the results also looks good:

➜  scripts git:(master) ✗ ls -lh
total 540K
-rw-rw-r-- 1 cstrom cstrom  106 2011-12-04 22:23 app.build.js
-rw-rw-r-- 1 cstrom cstrom  42K 2011-12-03 21:46 backbone.js
-rw-rw-r-- 1 cstrom cstrom 243K 2011-11-21 21:11 jquery-1.7.1.js
-rw-rw-r-- 1 cstrom cstrom 119K 2011-12-04 22:23 main-built.js
-rw-rw-r-- 1 cstrom cstrom  140 2011-12-01 23:44 main.js
drwxrwxr-x 4 cstrom cstrom 4.0K 2011-12-02 23:32 my-calendar
-rw-rw-r-- 1 cstrom cstrom  379 2011-12-02 23:54 my-calendar.js
-rw-rw-r-- 1 cstrom cstrom  79K 2011-11-22 02:01 require.js
-rw-rw-r-- 1 cstrom cstrom  34K 2011-11-14 15:28 underscore.js

Finally, the ultimate test, the browser:

Nice.

I suppose that I can understand James' argument that the configuration varies from development to production. Certainly some of it might need to go to a CDN in which the configuration would vary dramatically. Still, it might be nice for things like versioned library mapping to be able to be held in common. Ah well, a concern for another day.



Day #225