CODEWITHSUNDEEP
javascriptbackbone.jsrequirejs
kodisha
kodisha

Reputation: 894

Require.js how to minify parts of application only?

I have big application which is using Backbone + vanilla AMD modules. Usually I would minify everything with a grunt task, but this is specific scenario. Think of it as a window manager.

This application will have

Is there a pattern where we could minify WindowManagerApp and each of the demo + user apps, but on page load to ONLY load WindowManagerApp and load other apps with normal async mechanism that Require.js provides?

Our rationale is that not all users will use all apps available to them, so we don't want to minify and serve all of them (and yes, it could be few MB of them)

Upvotes: 0

Views: 72

Answers (1)

I-Lin Kuo
I-Lin Kuo

Reputation: 3248

You can create multiple minified layers and delay loading the apps by using nested requires. The following is just an example of a nested require, not how you should necessarily do this.

Using RequireJS's example build file, note that each "module" is a build layer.

modules: [
  { 
    name: "WindowManagerApp" 
  },
  { 
    name: "demoLayer",
    include: ["demo/apps1", "demo/apps2"],
    exclude: ["WindowManagerApp"]
  },
  { 
    name: "userLayer",
    include: ["user/apps1", "user/apps2"],
    exclude: ["WindowManagerApp"]
  }]

You can create multiple layers, making sure they don't overlap in their dependencies by using the exclude value.

You can then use nested requires to load the other layers followed by the specific app

require(["WindowManagerApp","require"], function(manager, require){
  manager.init();
  // ...
  var loader = {
    loadDemos: function(){
      require(["require", "demoLayer"], function(require){
        require(["demo/apps1"], function(app1){
          // Do your stuff
        }
      }
    }
  }
});

The demo layer will not get loaded until you call loader.loaderDemos().

Upvotes: 1

Related Questions