Project optimization with Require.js

Question

I am having problems with minification of my application. My goal is to have as few as possible Javascript files. I am getting partial results, I am able to concatenate all of the files that are located in the lib/ folder. They are all bundled in main.js file and it works fine.

However, the rest of the application files are not bundled in one file, they are only minified and uglified.

I am using node to start the proccess using this command:

node r.js -o build.js

My application folder structure:

CSS

img

js
Collections

Models

lib

routers

Views

Controllers

Templates(handlebar files)

app.js

main.js

config.js

r.js

build.js

My build.js file:

({
appDir: './',
baseUrl: './js',
dir: './dist',
modules: [
    {
        name: 'main'
    }
],
fileExclusionRegExp: /^(r|build)\.js$/,
optimizeCss: 'standard',
removeCombined: true,
paths: {
    underscore        : 'lib/underscore',
    backbone        : 'lib/backbone',
    babysitter  : 'lib/backbone.babysitter',
    wreqr       : 'lib/backbone.wreqr',
    marionette        : 'lib/backbone.marionette',
    handlebars  : 'lib/handlebars',
    jquery                : 'lib/jquery',
    jqueryui        : 'lib/jqueryui',
    text        : 'lib/text',
    templates   : '../templates'
},
shim: {
    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },
    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    }
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
},
deps: ['jquery', 'underscore']
})

This is my main.js file:

require.config({
baseURL: '.',
urlArgs: "ver=2", //Control Client Cache. Change this value for every new release.
paths: {
    underscore          : 'lib/underscore',
    backbone          : 'lib/backbone',
    babysitter    : 'lib/backbone.babysitter',
    wreqr         : 'lib/backbone.wreqr',
    marionette          : 'lib/backbone.marionette',
    handlebars    : 'lib/handlebars',
    jquery                  : 'lib/jquery',
    jqueryui          : 'lib/jqueryui',
    text          : 'lib/text',
    templates     : '../templates'

},
waitSeconds: 60,
shim: {

    underscore: {
        exports: '_'
    },
    backbone: {
        exports: 'Backbone',
        deps: ['jquery', 'underscore']
    },
    jqueryui: {
        exports: '$',
        deps: ['jquery']
    },
    babysitter: {
        exports: 'Backbone.Babysitter',
        deps: ['backbone']
    },
    wreqr: {
        exports: 'Backbone.Wreqr',
        deps: ['backbone']
    },
    marionette: {
        exports: 'Backbone.Marionette',
        deps: [
            'backbone',
            'babysitter',
            'wreqr',
            'lib/json2'
        ]
    },
    handlebars: {
        exports: 'Handlebars'
    },

    'lib/marionette.handlebars': {
        exports: 'Marionette.Handlebars',
        deps: ['handlebars', 'marionette']
    },
    'lib/foundation': {
        exports: '$',
        deps: ['jquery']
    },
    'lib/foundation.orbit': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.reveal': {
        exports: '$',
        deps: ['lib/foundation']
    },
    'lib/foundation.dropdown': {
        exports: '$',
        deps: ['lib/foundation']
    }
},
deps: ['jquery', 'underscore']
});

require(['app', 'backbone', 'config'], function(App, Backbone, Config) {
App.start(Config);
});

"Main is almost identical to build.js" - what do you mean by that? It could be useful to include it as well. — kryger
And how are you verifying that your code is not included into the final bundle? Viewing the (minified) output .js file or watching your browser's network tab and confirming that it loads the individual modules after all? — kryger
I am using fiddler. Fiddler shows that there is no lib/files loaded anymore. I see increase in main.js around 250KB. Also fiddler is showing that all my views are loaded one by one. And as soon as the last one is loaded, then the application starts. — Wexoni

Wexoni Wexoni · Accepted Answer · 2014-06-20T08:01:50

I guess it is time to answer my own question. In build file (you can name it however you want), just add this parameter, and everything will be bundled nicely in one file:

 findNestedDependencies: true,

Project optimization with Require.js

1 Answers