Up today, I would like to play with require.js optimization (asset packaging). I have a small Backbone.js that I have been using the last couple of days. Let's see if I can optimize it.
Following along with the require.js optimization instructions, I install require.js via npm so that I can get access to the optimization script (
r.js):➜ backbone-requirejs-test git:(master) ✗ npm install requirejs requirejs@1.0.2 ./node_modules/requirejsLet's see if I can figure out how to use it. Maybe point that script at my main.js file?
➜ backbone-requirejs-test git:(master) ./node_modules/requirejs/bin/r.js scripts/main.js
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: Evaluating scripts/jquery-1.7.1.js as module "jquery" failed with error: ReferenceError: window is not defined
at Function.load (/home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:2162:23)
at /home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:1162:37No, that does not seem to work.From the documentation, I try the example arguments in my
scripts directory:➜ scripts git:(master) ../node_modules/requirejs/bin/r.js -o name=main out=main-built.js baseUrl=.
Tracing dependencies for: main
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: Error: Error evaluating module "undefined" at location "/home/cstrom/src/backbone-requirejs-test/scripts/jquery.js":
Error: ENOENT, No such file or directory '/home/cstrom/src/backbone-requirejs-test/scripts/jquery.js'
fileName:/home/cstrom/src/backbone-requirejs-test/scripts/jquery.js
lineNumber: undefined
http://requirejs.org/docs/errors.html#defineerror
In module tree:
main
my-calendar
at Function.onError (/home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:7654:23)
at execManager (/home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:602:28)
at /home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:630:25
at execManager (/home/cstrom/src/backbone-requirejs-test/node_modules/requirejs/bin/r.js:607:17)OK. Now this is starting to get on my nerves. In my
main.js file to which I am pointing the optimizer, I am mapping jquery to jquery-1.7.1:require.config({
paths: {
'jquery': 'jquery-1.7.1'
}
});
require(['my-calendar'], function(calendar){
calendar.initialize();
});So why is the optimizer that reads this file looking for jquery.js instead of jquery-1.7.1.js? Grr...Let's see what happens if I give it the
jquery.js that it so desperately wants:➜ scripts git:(master) ln -s jquery-1.7.1.js jquery.js ➜ scripts git:(master) ✗ ../node_modules/requirejs/bin/r.js -o name=main out=main-built.js baseUrl=. Tracing dependencies for: main Uglifying file: /home/cstrom/src/backbone-requirejs-test/scripts/main-built.js /home/cstrom/src/backbone-requirejs-test/scripts/main-built.js ---------------- /home/cstrom/src/backbone-requirejs-test/scripts/jquery.js /home/cstrom/src/backbone-requirejs-test/scripts/underscore.js /home/cstrom/src/backbone-requirejs-test/scripts/backbone.js /home/cstrom/src/backbone-requirejs-test/scripts/my-calendar/views/paginator.js /home/cstrom/src/backbone-requirejs-test/scripts/my-calendar/routers/paginator.js /home/cstrom/src/backbone-requirejs-test/scripts/my-calendar.js /home/cstrom/src/backbone-requirejs-test/scripts/main.jsIf I load the current page, it needs 9 requests to get all of those javascript files, taking about 350ms:
To see what the optimization does, I switch the page to point to the built / optimized page:
<head>
<title>Router Redirection</title>
<script data-main="scripts/main-built" src="scripts/require.js"></script>
</head>Now, when I load the page, it only needs 3 requests (the HTML page itself, require.js and my main-built.js file):
And, instead of 350ms, it now takes less than 250ms. That is a nice little optimization.
If only I could figure out that jquery version thing. Maybe tomorrow.
Update: I did figure this out in part 2.
Day #224
| If only I could figure out that jquery version thing. Maybe tomorrow.
ReplyDeleteCame across the same problem, I figured 'jquery' resolves to 'jquery-1.7.1' and as RequireJS sees a dot in the filename it assumes the filename extension is '7.1' instead of 'js'.
If you're setting your paths in your main.js then you probably want to add ``mainConfigFile: "path/to/main.js"`` in your build file.
ReplyDeleteGreat, but how would you include html template files loaded via !text in the optimization? Or is it included already? Thanks.
ReplyDelete