Configuring the Application for Oracle CDN Optimization

You can configure the Oracle JET application to minimize the network load at application startup through the use of Oracle Content Delivery Network (CDN) and the Oracle JET distributions that the CDN supports.

The local loading of the required Oracle JET libraries and modules, as configured by default when you create the application, is not recommended for a production application since it does not use Oracle CDN and requires each application running in the browser to load libraries and modules in a standalone manner. This default configuration can be used when you build and serve the application locally until you need to stage the application in a test environment to simulate network access.

To enable Oracle CDN optimization, you configure the path_mapping.json file in your application. The choices you make in the path mapping file determine the libraries and modules settings for the entire application. With this file, you will not need to edit the path URL of the required libraries and modules in any other application file. When you configure path mapping for CDN optimization, you will determine how the tooling updates the require block of the main.js file and how the application will load modules and libraries as follows:

  • If you configure path mappings to use CDN without accessing the bundles configuration, so that modules and libraries will be loaded individually from CDN, the tooling injects the URLs from the path mapping file into the requirejs block of main.js.

  • If you configure the path mappings to use CDN bundle loading, the tooling updates the index.html file to execute the bundles configuration script file (bundles-config.js) from the following script reference:

    <body>
      <script type="text/javascript" src="https://static.oracle.com/cdn/jet/v5.2.0/default/js/bundles-config.js"></script>
    ..
    </body>

The bundles configuration file specifies its own require block that the application executes to load as a set of bundled modules and libraries from CDN. When you configure the application this way, the main.js is updated by the tooling to display only a URL list composed of third-party libraries. In the bundles configuration scenario, the injected require block in main.js becomes a placeholder for any application-specific libraries that you want to add to the list. Where URL duplications may occur between the require block of the bundles configuration file and the application main.js, the bundles configuration takes precedence to ensure bundle loading from CDN has the priority.

Tip:

Configuring your application to reference the bundles configuration script file on Oracle CDN is recommended because Oracle maintains the configuration for each release. By pointing your application to the current bundles configuration, you will ensure that your application runs with the latest supported library and module versions.

To configure bundle loading of the libraries and modules using the bundles configuration script, perform the following steps.

  1. Open the path_mapping.json file in the js subfolder of your application and change the use element to cdn:

    "use": "cdn"
  2. Leave the cdns element unchanged. It should show the following as the default path definitions for Oracle JET and third-party libraries:

    "cdns": {
        "jet": {
           "prefix": "https://static.oracle.com/cdn/jet/v5.2.0/default/js",
           "config": "bundles-config.js"
         },
        "3rdparty": "https://static.oracle.com/cdn/jet/v5.2.0/3rdparty"
    },
    
  3. Optionally, in the case of bundle loading, for each third-party library, update the cdn element from 3rdparty to jet. For example, this knockout library path definition shows "cdn": "jet" to prevent the knockout URL from being injected into main.js:

    "libs": {
    
      "knockout": {
        "cdn": "jet",
        "cwd": "node_modules/knockout/build/output",
       ...
     },

    Note: Setting "cdn": "jet" for each third-party library prevents these librarys’ URL from being injected into the require block of main.js. This update is not necessary to ensure bundle loading of third-party libraries since the bundles configuration script overrides duplicate URL paths that appear in main.js.

  4. Save the file and either build or serve application to complete the bundle loading configuration.

To configure individual loading of the libraries and modules based on the require block of the main.js (without the use of the bundles configuration script), perform the following steps.

  1. Open the path_mapping.json file in the js subfolder of your application and change the use element to cdn.

    "use": "cdn"
  2. Edit the cdns element to remove the config element so cdns path definitions for Oracle JET and third-party libraries are formatted as following:

    "cdns": {
        "jet": "https://static.oracle.com/cdn/jet/v5.2.0/default/js",
        "3rdparty": "https://static.oracle.com/cdn/jet/v5.2.0/3rdparty"
    }
  3. Save the file and either build or serve application to complete the main.js require block configuration.

Note:

When you need to make a change to the list of required libraries, for example, to specify a different release version, do not edit the main.js; edit instead the path_mapping.json file and, in the case of bundle loading, also edit the bundles-config.js URL in your application’s index.html file. You will need to rebuild the application to apply the changes. For details about the path_mapping.json file and the configuration updates performed by the tooling, see Understanding the Path Mapping Script File and Configuration Options.