Exclude Resources from a Bundle

In gruntfile.js, you can configure the vb-require-bundle task to specify resources that the Grunt optimizer (grunt vb-optimize) should exclude from an app's resource bundle when the app is packaged.

Here's an example of a vb-require-bundle task configured to create a resources bundle named "my-bundle". The resources that should be included in and excluded from "my-bundle" are listed under the "find" element (in bold):


module.exports = (grunt) => {
  grunt.initConfig({
    'vb-require-bundle': {
      "webApps/dcs": {
        "options": {
          "transpile": true,
          "minify": true,
          "bundles": {
            "my-bundle": {
              "modules": {
                "find": [
                  "app-flow.json",
                  "app-flow.js",
                  "^build",
                  "!^build/components/oj-odcs/",
                  "^flows/",
                  "^pages/",
                  "^resources/strings",
                  "^resources/css",
                  "^services/",
                ]
              }
            }
          }
        }
      }
    }
  }),
  require('load-grunt-tasks')(grunt);
};

The “find” element contains a list of regular expressions. In the example above, running the Grunt optimizer will include all the listed resources in the bundle except for the resources in the module with the exclamation mark (!) prefix (!^build/components/oj-odcs/). You mark resources you want to exclude from the bundle by prepending an exclamation mark (!).

Note:

You can also define the bundles configuration in settings/build.json. When developing a visual app, build.json is located in webApps/foo/settings/build.json; when developing extensions, it is located in extension1/sources/settings/build.json.

Here is an example of the build.json file:

{
    "configuration": {
        "minify": false,
        "bundles": {
            "coolBundle": {
                "modules": {
                    "find": [
                        ".*\\.(json|js)$"
                    ]
                }
            }
        }
    }
}

In this example, the "configuration" element corresponds to the "webApps/dcs/options" element in the grunt configuration example above.

If the build.json file and the grunt configuration both exist, the build.json file has precedence.

Now assume you have a web component in resources/components/old-component that contains some third-party libraries that you want to exclude from the bundle (for example, ckeditor).

You can exclude the entire component using a line like this:

"!^resources/components/old-component",

This will exclude all resources in the old-component directory, including the component itself. If you want to include the component in the bundle and only exclude the third-party libraries, you can use something like this:

"!^resources/components/old-component/older-libraries",

where the resources/components/old-component/older-libraries directory contains the third-party libraries you want to exclude.

Note:

This does NOT remove the individual files from the deployments. Resources that are not bundled will still be properly loaded in the runtime. The browser will load the required resources, which can impact the performance of your application.

Ignore resources required by dependencies

So you’ve excluded older-libraries in the find element, but when you run the optimizer, older-libraries is still bundled, breaking the app. Why?

It's because there's code in the bundle that refers to older-libraries resources. This might be code in old-component itself, or it might be some other code in your app that refers to older-libraries resources. For example, app-flow.js might include something like this:

define(['old-component/older-libraries/obsoletemodule'], (obsoletemodule) => {
   obsoletemodule.function();
});

When you run the optimizer (grunt vb-optimize), the optimizer excludes older-libraries resources initially, but then includes older-libraries/obsoletemodule in the bundle because of the dependency from app-flow.js.

In cases like this, you can add the emptyPaths element to the bundle configuration to instruct the optimizer to ignore the dependency (and sub-dependencies):

grunt.initConfig({
  'vb-require-bundle': {
    "webApps/dcs": {
      "options": {
        "transpile": true,
        "minify": true,
        "emptyPaths": ["older-libraries"],
        "bundles": {
          "my-bundle": {
            "modules": {
              "find": [

This will instruct the optimizer to ignore (not bundle) any module path prefixed with "older-libraries".

Note:

The module paths example above assumes the physical resources stored in /resources/components/* are mapped in app-flow.json. For example, in a web component you don't refer to resources/components/myWebComponent, but simply to myWebComponent.

The “find” element does not take mappings into account, so the patterns must match the physical file paths. However, the “emptyPaths” element DOES respect the requirejs paths configuration.