0

I am using RequireJS to modularize my code. The website I am using will have several distinct page categories. For each one of them I want to load general JS file with all the dependencies that exist across all page categories, jQuery being most obvious one. I have managed to do that already.

For the rest of the pages, I want to have separate JS files. Each page has its own module but I am thinking that it would make more sense if I download several pages modules all at once and this way when the user comes to other pages, he will have the JS file already cached and won't have to download.

For now I tried to concatenate these modules which did work rather well. However, I am not sure how to load the specific module from a file. So far I am doing this:

require(['./js/common'], function (common) {
    require(['public']);
});

common is the dependencies file and public is my concatenated file with all the dependencies. Inside it has modules for each page but I don't know how to call a specific one. Any ideas?

Karolis Ramanauskas
  • 1,045
  • 1
  • 9
  • 14

2 Answers2

1

Take a look at require-lazy.

It allows you to bundle independent parts of the application into separate bundles. From the developer's point of view, instead of:

define(["module1", "module2"], function(module1, module2) {...});

you write:

define(["lazy!module1", "lazy!module2"], function(module1, module2) {...});

Modules 1 & 2 will not be loaded upfront; they and their dependencies will be loaded lazilly when you call:

module1.get().then(function(realModule1) {
    // here you have access to the real module1
});

Check out the examples for a few use cases.

Nikos Paraskevopoulos
  • 39,514
  • 12
  • 85
  • 90
  • Thanks Nikos, seems like a another good way to do it. However, I don't see how it's more advantageous than Louis solution. – Karolis Ramanauskas Oct 14 '14 at 20:30
  • Hi, the advantage of require-lazy over bundles is that you do not have to explicitly declare bundles; the build system walks the dependency subtrees beginning from each `lazy!xx` dependency and *automatically* builds the dependency list. Moreover a `lazy!xx` dependency is truly lazy, i.e. *you* get to decide when it is actually loaded. Bundles get loaded whenever a module declares a dependency to a module in that bundle. Good luck anyway! – Nikos Paraskevopoulos Oct 15 '14 at 07:23
1

Take a look at the bundles option for RequireJS' runtime configuration. In your case it would be something like:

bundles: {
    public: ['mod1', 'mod2', ...] 
}

I've used mod1, mod2 because I don't see the name of the actual modules in your question but what you'd want there are the names of the modules inside the public bundle and that you want to load individually. With this, RequireJS will know that when you want to load such module, it has to get them from public instead of searching for them indivdually.

Then you should be able to change your loading code to:

require(['./js/common'], function (common) {
    require(['mod1']);
});

Again, mod1 is for illustration.

Louis
  • 146,715
  • 28
  • 274
  • 320
  • Thanks Louis, total life saver. I think what you forgot to add to your answer is that the first require statement also needs to require the combined modules too as otherwise I can't request mod1. – Karolis Ramanauskas Oct 14 '14 at 20:28
  • Happy to help. It's possible that there is something missing but that's not clear from the way your question is framed. My understanding from reading your question is that your combined modules are in `public`, and I don't see something called `js/combinedmods` in your question. – Louis Oct 14 '14 at 20:32