Customize Bundle Modules

You can define the content of the requirejs module bundles to create multiple bundles when staging a visual application.

Pages that you want to load initially can be packaged in the main bundle, and other pages and pages in other flows that are not required initially can be packaged in a separate bundle that can be loaded when needed. Customizing the module bundles can help optimize the time needed to load and run the application.

For example, this configuration example shows how the vb-require-bundle task can be configured to create the following require module bundles for a web application named "webapp1".

  • A bundle for all resources that belong to the application flow dashboard. This bundle will include all files that matches the "flows/dashboard" pattern. This will include all pages, models, resources and nested flows stored in the flows/dashboard directory. This bundle will not contain the module named helpers, that is referred to in one of the included page models.
  • A bundle for resources that belongs to the application flow customers. In this case, the nested flows are excluded (as they are placed into a separate bundle). This bundle also excludes the helpers module.
  • A bundle of resources of flows nested into the customers flow.
  • A "base" bundle of application resources (shell pages and application resources, libraries and styles). This bundle explicitly adds the helpers module.

To customize the bundle modules:

  1. Open Gruntfile.js.
  2. Edit the file to configure the vb-require-bundle task.
    {
      "vb-require-bundle": {
         "webapp1": {
             "options": {
                 "transpile": true,
                 "minify": true,
                 "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"]
                           }
                       }
                 }
             }
         }
      }
    }