how to use AMD on a Single-page application to load only certain dependency

Question

From what I understand, one benefit of using AMD managing dependencies that get loaded, But in single-page application using require.js all of the dependencies will be loaded.

For example using backbone or something similar, lets say I have the following files

main.js requires router.js
router.js requires view_a.js and view_b.js

router.js renders the views

routes: {  
   "view_b":"b",   
   "view_a":"a"  
},  
a:function{  
  showView(new ViewA());  
},   
b:function{  
  showView(new ViewB());  
}

Now lets say I go to example.com/#view_b which only requires the code in view_b.js but doesn't use anything from view_a.js. Is there anyway to only loaded or prioritize the loading view_b.js using require.js or something similar?

But only the one that is needed, doesn't it? So it should require it dynamically — Bergi, Nov 03 '12 at 19:38
@Bergi I just added the structure of router.js, since router handles rendering `showView`, It needs to included all of the views — null_radix, Nov 03 '12 at 19:44
Why not change `showView(new ViewB())` to `require("view_b", function(constr){ showView(new constr()); })`? — Bergi, Nov 03 '12 at 19:47
@Bergi Yep thats what I was looking for. In hindsight its obvious, but I didn't realize that you could have nested require(). Thanks! — null_radix, Nov 03 '12 at 20:32

score 0 · Answer 1 · answered Nov 03 '12 at 22:52

You can't because require.js need all dependencies of your file to be loaded before executing it.

I see two solutions to your problem:

Create two distinct Backbone.Router, like that you only "require" needed modules for each router (IMHO it's not the best solution)
Use require.js optimizer, this will combine all your Javascript files into one. Of course you only use it for production, not in development.

how to use AMD on a Single-page application to load only certain dependency

1 Answers1