Optimize Your Application

When your visual application is ready to be staged and published, you can optimize each application's resources to reduce load times and network traffic. Optimization minifies application images and stylesheets, and creates RequireJS bundles in the embedded build server that prepares your application for staging and publishing.

1. Select the application in the Navigator, then click Settings to open the app-level Settings editor.
2. Select Optimize application when staging and publishing in the General tab.
   
   
   Description of the illustration optimize.png
   
   
3. Optional: Click the Configure icon () to open the build.json file where you can define your own configuration to include and exclude application resources.
   When optimization is enabled, "optimize": true is automatically defined in build.json (located under webApps/app_name/settings/ in Source view). Here are other properties that you can add to the configuration section of the file:

   Property	Description
   bundles	Custom RequireJS module bundles, defined using this configuration schema: <bundle_name> find ids modules find ids exclude find ids
   bundles.modules	Modules that should be added to the bundle, defined using this configuration schema: find ids
   bundles.exclude	Modules that should not be added to the bundle, defined using this configuration schema: find ids Exclusions are applied to all bundle modules, including those added following transitive module dependencies.
   emptyPaths	Comma-separated list of RequireJS paths that are set to empty. This way, you indicate that this dependency must be ignored (and also that its sub-dependencies must not be recursively traversed).

   See Sample build.json Configurations for Optimization for examples of how you can define your app's build.json file.

   Tip:

   If you use Grunt tasks to optimize your app, the configuration in build.json is similar to what you define in Gruntfile.js. See How to Migrate Gruntfile.js Configuration Into build.json for steps on migrating your existing Grunt configuration into build.json.

You can use the Logs window at the bottom of your browser to view build logs after your optimized application is staged or published. If deployment fails, click Open Logs in the staged or published notification to view and fix build-related errors.

Sample build.json Configurations for Optimization

When an app is enabled for optimization, you can define your own build configuration to specify the resources you want to include and exclude in the application's optimized resources bundle. You do this in the build.json file, which you can access by clicking under Optimization in the app-level Settings editor, or under webApps/app_name/settings/ in Source view.

Include all resources and exclude specific ones

Optimization, by default, includes all application resources that match the regular expression .*(\\.(js|json|html|css))$ to an optimized resources bundle named vb-app-bundle. Here's a look at the default settings:

{
    "optimize": true,
    "configuration": {
        "bundles": {
            "vb-app-bundle": {
                "modules": {
                    "find": [
                        ".*(\\.(js|json|html|css))$"
                    ]
                }
            }
        }
    }
}

You can extend this configuration, for example, to exclude some third-party libraries that are part of the application's sources, say, bcrypt.min and crypto-js (defined for the deal-registration flow). In this case, here's how you might define build.json:

{
    "optimize": true,
    "configuration": {
        "bundles": {
            "vb-app-bundle": {
                "modules": {
                    "find": [
                        ".*(\\.(js|json|html|css))$",
                        "!bcrypt.min",
                        "!^flows/deal-registration/crypto-js",
                    ]
                }
            }
        }
    }
}

The find element specifies a list of regular expressions that are matched against your application. Regular expressions starting with an exclamation mark (!) are considered negative, so resources matching these patterns are not included.

Include and exclude specific resources

Here's an example that adds specific resources to vb-app-bundle, but excludes the fontawesome file:

{
    "optimize": true,
    "configuration": {
        "bundles": {
            "vb-app-bundle": {
                "modules": {
                    "find": [
                        "app-flow.js",
                        "^build",
                        "!^build/components/oj-odcs/2.5.1/fontawesome"
                        "^flows/",
                        "^pages/",
                        "^resources/strings",
                        "^resources/css",
                        "^services/",
                    ]
                }
            }
        }
    }
}

How you organize your app's resources into bundles depends on your application's structure as well as what you deem critical for application start. Try to bundle resources in such a way that what's really needed by the application is placed in one bundle while the rest goes into one or more other bundles.

Here's an example of configuration defined to create three specific RequireJS module bundles:

• One for all resources that belong to the application flow dashboard. This bundle includes all files that match the flows/dashboard pattern (in other words, all pages, modules, resources, and nested flows stored in the flows/dashboard directory). It, however, excludes the helpers module, referred by one of the page modules.
• Two for resources that belong to the application flow customers. In this case, nested flows (which are placed into a separate bundle later on) are excluded—as is the referred helpers module.
• Three for resources that belong to nested flows of the customers flow.

In addition to these three bundles, a fourth base bundle includes application resources, such as shell pages, libraries, and styles. This bundle explicitly adds the referred helpers module.

{
    "optimize": true,
    "configuration": {
        "bundles": {
            "dashboard": {
                "modules": {
                    "find": [
                        "flows/dashboard"
                    ]
                },
                "exclude": {
                    "ids": [
                        "helpers"
                    ]
                }                
            },
            "customers": {
                "modules": {
                    "find": [
                        "flows/customers",
                        "!flows/customers/flows"
                    ]
                },
                "exclude": {
                    "ids": [
                        "helpers"
                    ]
                }
            },
            "customers-nested": {
                "modules": {
                    "find": [
                        "flows/customers/flows"
                    ]
                }
            },
            "base": {
                "modules": {
                    "find": [
                        "app-flow.js",
                        "^pages/",
                        "resources/strings",
                        "resources/css"
                    ],
                    "ids": [
                        "helpers"
                    ]
                }
            }
        }
    }
}

Exclude resources using emptyPaths

Sometimes, when your app includes a custom web component that refers to a third-party library (for example, resources/components/mycomponent that references ckeditor), you might want to include the component in your bundle but not the third-party library. To do this, you can use "!^resources/components/mycomponent/ckeditor" in build.json. But the library will still be included if code in your bundle references it. It may be code in the custom web component itself, or something in a file that refers to this library, for example, code in the app-flow.js file included in the bundle that refers to 'resources/components/mycomponent/ckeditor'. In such cases, you can add the emptyPaths element to build.json to ignore the dependency and also not recursively traverse its sub-dependencies:

{
    "optimize": true,
    "configuration": {
        "emptyPaths": ["ckeditor"],
        "bundles": {
            "dashboard": {
                "modules": {
                    "find": [
                        "flows/dashboard"
                    ]
                },
                "exclude": {
                    "ids": [
                        "helpers"
                    ]
                }                
            },
            "base": {
                "modules": {
                    "find": [
                        "app-flow.js",

  ...

Here's an example emptyPaths definition that ignores multiple libraries:

 {
    "optimize": true,
    "configuration": {
        "emptyPaths": [
            "ckeditor",
            "ckeditor-jquery"
                    ],
  ...

How to Migrate Gruntfile.js Configuration Into build.json

If you use Grunt tasks to optimize your application, you can easily migrate configuration you've already defined in the Gruntfile.js file into build.json.

1. Open your application's Gruntfile.js (located at the root of your visual application in Source view).
2. Look for the bundles element in Gruntfile.js, which you can now copy and paste into build.json (located under webApps/app_name/settings/ in Source view). Remember to fix the syntax for JSON schema.
   For example, here's a side-by-side comparison of the bundles configuration in Gruntfile.js and build.json:

   Gruntfile.js	build.json
   'use strict'; module.exports = (grunt) => { require('load-grunt-tasks')(grunt); grunt.initConfig({ "vb-require-bundle": { "merge-test": { options: { transpile: false, minify: false, bundles: { 'vb-app-bundle': { modules: { find: [ '.*(\\.(js|json|html|css))$', '!bcrypt.min', '!^flows/deal-registration/crypto-js', ] } } } } } } }); };	{ "optimize": true, "configuration": { "bundles": { "vb-app-bundle": { "modules": { "find": [ ".*(\\.(js|json|html|css))$", "!bcrypt.min", "!^flows/deal-registration/crypto-js", ] } } } } }