Optimization Configurations for build.json

When you create the build.json file (located under /extension1/sources/settings and accessible from the extension-level Settings editor), you can specify the resources you want to include and exclude in the application's optimized resources bundle.

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": {
        "require-js": {
            "vb-bundles-config": {
                "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": {
        "require-js": {
            "vb-bundles-config": {
                "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": {
        "require-js": {
            "vb-bundles-config": {
                "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": {
        "require-js": {
            "vb-bundles-config": {
             "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": {
        "require-js": {
            "emptyPaths": [
                "ckeditor"
            ],
            "vb-bundles-config": {
              "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": {
        "require-js": {
            "emptyPaths": [
                "ckeditor",
                "ckeditor-jquery"
            ],
  ...