How to use requirejs optimizer to create Module specific code chunk instead of big single file for Backbone project?

[sunilsharma2214]

Currently after grunt run... we got main.js file which include all modules.... and while we load our application speed got slow down as main.js file is of 3MB. I used bundles option but that also not work for me and still getting one big main.js file.

index.html

<script data-main="main" src="lib/require.min-2.2.0.js"></script>

main.js

require.config({
waitSeconds: 200,
paths: {
jquery: 'lib/jquery.min-2.2.4',
d3: 'lib/d3.min',
elementary:'lib/elementary-1.0.0',
lodash: 'lib/lodash.min-4.13.0',
q: 'lib/q.min-1.4.1',
backbone: 'lib/backbone.min-1.3.3',
backbonesubroute: 'lib/backbone.subroute.min-0.4.5',
text: 'lib/text.min-2.0.12',
moment: 'lib/moment.min-2.13.0',
momentTimezone: 'lib/moment-timezone.min-0.5.4',
bootstrap: 'lib/bootstrap.min-3.3.6',
'bootstrap-dialog': 'lib/bootstrap-dialog.min-1.35.1',
CryptoJS: 'lib/sha1.min-3.1.2',
ampfComponents: 'lib/ampf-components'
},
map: {
'*': {
// backbone requires underscore...lodash is a superset of underscore
underscore: 'lodash'
}
},

// shims are for 3rd party libraries that have not been written in AMD format.
// A shim allows Require.js to load non-AMD compatible scripts to define AMD modules 
// definitions that get created at runtime.    

// backbone and bootstrap are AMD incompatible.

shim: {
    backbone: {deps: ['underscore', 'jquery'], exports: 'Backbone'},
    bootstrap: {deps: ['jquery']}, 
    elementary: {deps: ['jquery']},
    CryptoJS: { exports: 'CryptoJS' },
}

});

require(['app/application/app', 'bootstrap', 'elementary'], function (app) { // bootstrap will load and attach itself to jquery
app.start();
});

define("main", function(){});

GruntFile.js
/* requirejs optimizer: (concatenate all of the require loaded artifacts into a single js) /
requirejs: {
optimize: {
options: {
baseUrl: "build/stage1",
dir: "build/stage2",
removeCombined: false,
keepBuildDir: false,
optimize: "none",
findNestedDependencies: true,
stubModules: ['text'],
optimizeAllPluginResources: false,
uglify2: {
output: {
beautify: {
semicolons: false
}
},
compress: false,
warnings: true,
mangle: false
},
generateSourceMaps: false,
preserveLicenseComments: false,
paths: {
jquery: 'lib/jquery.min-2.2.4',
elementary:'lib/elementary-1.0.0',
lodash: 'lib/lodash.min-4.13.0',
q: 'lib/q.min-1.4.1',
backbone: 'lib/backbone.min-1.3.3',
backbonesubroute: 'lib/backbone.subroute.min-0.4.5',
text: 'lib/text.min-2.0.12',
moment: 'lib/moment.min-2.13.0',
momentTimezone: 'lib/moment-timezone.min-0.5.4',
bootstrap: 'lib/bootstrap.min-3.3.6',
'bootstrap-dialog': 'lib/bootstrap-dialog.min-1.35.1',
CryptoJS: 'lib/sha1.min-3.1.2',
ampfComponents: 'lib/ampf-components',
d3: 'lib/d3.min'
},
bundles: {
'SaaRouter':'app/modules/saa/SaaRouter'
},
modules: [
{
name:'main',
exclude:[
'config',
'jquery',
'elementary',
'backbone',
'lodash',
'underscore',
'q',
'backbone',
'backbonesubroute',
'text',
'moment',
'momentTimezone',
'bootstrap',
'bootstrap-dialog',
'CryptoJS',
'app/modules/saa/SaaRouter'
]
},
],
map: {
'': {
// backbone requires underscore...lodash is a superset of underscore
underscore: 'lodash'
}
}
}
}
}

[Troy-Yang]

any solutions?

[Troy-Yang]

Just found a solution by using paths empty:
"paths": { "fullcalendar": "empty:", "moment": "empty:", "backbone": "empty:", "underscore": "empty:" },

[prantlf]

Yes. That or the exclude property in the module bundle build configuration.