Using RequireJS for Lazy Loading Modules in an Oracle JET Application

Configure your application to load Oracle JET modules only when needed.

The first require() call in the main configuration file should only request modules that are needed for the initial display of the page. If you need other modules after certain user actions, such as displaying a dialog or transitioning to a different external template, you can load them with separate require() calls.

You can also execute a require() call without a callback function if you want to preload some modules in anticipation of user actions. The modules would still need to be requested using the require() call when they would actually be used, but they would already be downloaded and executed due to the preload.

You can also choose not to wait for some heavier components to be downloaded before calling the initial ko.applyBindings(). To do this, use a ko.observable() to supply the component name and set it initially to null. With the initial value being null, the component will not be displayed. Once the module is loaded, you can change the value to the actual component name.

// In your View Model:
this.statusGaugeComponent = ko.observable(null);

// In your markup:
<div data-bind="ojComponent: {
                  component: statusGaugeComponent,
                  min: 0,
                  max: 100,
                  value: statusGaugeValue,
                }">
</div>

// Request ojs/ojgauge after the rest of the UI is already displayed:
require(['knockout, 'ojs/ojknockout', 'ojs/ojgauge'],
  function(ko)
  {
     // Mutate the observable with the actual component name
      myViewModel.statusGaugeComponent(
        "ojStatusMeterGauge");
  }
);

Note:

You can also configure your application to lazy load content. For example, you can configure an ojTree component to populate child nodes only when selected. See the Oracle JET Cookbook at Lazy Loading (ojTree) for an example.