RequireJS - Del3 - Optimering

Föregående inlägg (RequireJS - Del2 - Konfigurering) handlade om konfigurering av RequireJS. Detta inlägg kommer handla om RequireJS Optimizer , r.js.

r.js kan köras med Node.js (v0.4+) eller i Java (v1.6+ med Rhino) eller direkt i webbläsaren med Javascript. Det sistnämnda är endast till för att göra optimering av enskilda filer (har inte testat detta, se exempel). Rekommendationen är att köra i Node.js eftersom detta enligt uppgift är snabbast.

När vi definierat ett antal AMD-moduler, och lagt dessa i egna filer vill vi inte att besökarna av vår sajt ska behöva hämta alla våra moduler med ett HTTP-request per modul.
Vi vill givetvis slå ihop och minifiera alla våra AMD-moduler till en fil.

r.js körs enklast genom att skriva en byggfil: Som sedan kan anropas:

r.js -o build.js

Det går också bra att starta r.js från konsollen:

node r.js -o baseUrl=js paths.jquery=lib/jquery name=app out=app.min.js

Så, vad är det då som gör r.js speciellt? Räcker det inte att bara köra UglifyJS eller någon annan JS-komprimerare? Nej. För r.js håller koll på pluginmoduler och anonyma moduler:

// anonym modul
define(function() {});

Utan r.js hade anonyma moduler resulterat i script-fel, och plugin-moduler hade inte kunnat användas.

När scripten har minifierats till en fil och ligger ute i test/produktionsmiljön är det ofta svårt att debugga den minifierade koden. En fin sak som r.js också stödjer är Source Maps. Genom att lägga till följande i byggfilen kommer RequieJS Optimizer generera en app.min.js.src - fil:

Dock behöver UglifyJS2 användas, istället för UglifyJS (som används som standard). För att använda UglifyJS2, lägg till optimize=uglify2 som ett argument till byggscriptet:

r.js -o build.js optimize=uglify2

Debug med hjälp av Source Maps!

Har i denna post, endast gett en inblick i hur man kan använda RequireJS Optimizer. Som tur är finns det gott om dokumentation och en exempel-byggfil som innehåller all tänkbar r.js-konfiguration.

Detta var den sista delen i min introduktionsserie till RequireJS. Kommer troligen skriva ett till inlägg om pluginhantering och testning allt eftersom erfarenheterna blir fler.

Slutligen vill jag avsluta med ett sidospår.
Läste en intressant artikel läste på dailyjs.com - Meet the New Stack, Same as the Old Stack :

Five years ago, if you asked any client-side developer which library or framework to use the most likely answer would have been jQuery. Since then, client-side development has become far more complex. A friendly wrapper for DOM programming and a browser compatibility layer isn’t enough to help us write modern applications.

Idag innefattar modern javascript och webbutveckling:

• Packethanterare
• Modulsystem
• Testramverk
• Byggsystem
• Templates

Med mera.

Det räcker alltså inte endast med att kunna några rader jQuery för att manipulera DOM-strukturen längre. I takt med att Javascript blir mer populärt, och används till mer och mer komplexa saker ställs det högre krav än så.

Därför har jag börjat snöa in mer och mer på optimering, testning och beroendehantering.


/Nils