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

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.