Loading Dynamic Require.js modules - backbone.js

Question

Have spent the whole day on this and i think its time for a shout out. I am using require.js to include modules in my backbone app. This is what i have:
My requirejs config:
paths:
jquery: "backbone/initializers/jquery_loader"
jqueryui: "backbone/initializers/jqueryui_loader"
modules:
- name: 'application'
- name: 'jquery'
exclude: ['application']
- name: 'jqueryui'
exclude: ['application', 'jquery']
- name: 'email'
exclude: ['application']
- name: 'department_home'
exclude: ['application']
priority: ['application', 'jquery', 'jqueryui']
My jquery_loader:
define ["jquery.min"], () ->
jQuery = $
jQuery.noConflict(true)
My jqueryui_loader:
define ['jquery.ui.all'], () ->
My email module:
define ['marionette', 'jqueryui', 'tags'], (Marionette, ui, tags) ->
My department home module
define ['marionette', 'jqueryui', 'dept_tags'], (Marionette, ui, tags) ->
Everything works as expected and compiles, but maybe i don't understand it or i am missing something, the email module is loaded dynamically on a click event, and it has jqueryui included in it, which i believe is just an r.js optimized file.
Now i do another click event after email module is loaded, and i see that the department module also has jquerui in it, both come in at 90KB, what i expected is for department module to use the jqueryui thats already loaded by the email module.
Appreciate your help!

Answer 1

I think you shouldn't use jquery loader like this. You should use the shim property to initialize the noConflict. I've answered something similar a few days ago.
In your case it would be something like this (but in coffeescript then):
require.config({
paths: {
jquery: "path/to/jquery",
jqueryui: "path/to/jqueryui"
},
shim: {
jquery: {
exports: 'jQuery',
init: function() {
return this.jQuery.noConflict();
},
jqueryui: {
deps: ['jquery']
}
}
});