Checking results and JavaScript file dependencies

View the preflight optimization report to see a list of components by category and to compare the static content’s original size to its optimized size.

On the report screen, you can analyze any rule that has the Open icon displayed next to it.

Prerequisite: Run a preflight optimization on a portal.

  1. On the Preflight Optimization screen, click the View report link for the optimized portal with static content data that you want to review.

    The Usage tab of the report screen lists the components—rules, layouts, controls, actions, and processes—that are used in the application and their corresponding usage counts.

  2. On the Usage tab, expand any component to see the rules that use that component.

    • Green check marks – A component with a green check mark is used in the application. (A component without a green check mark is not used.)

    • Asterisks – A component without an asterisk has a UI component definition. Click the Open icon to display the UIComponent Definition screen, which lists the files on which the component depends as well as any associated actions. For each file you can see the application name, file extension, file name, and, where appropriate, the corresponding feature. A component with an asterisk does not have a UI component definition.

    For example, if you click the Open icon for the pxTextArea component, the UIComponent Definition screen displays, listing the files on which the pxTextArea control is dependent.

  3. Optional: To see all components that are available in the system, select the Show all components check box.
  4. On the Rules tab, expand folders in the hierarchical table of rules to drill down and click the Open icon to open the rules or to see the UI component definitions.
  5. On the CSS Formats tab, analyze the total number of CSS formats used by the access group (portal), the original size of the Cascading Style Sheet files, and the optimized size, both as the actual file size and as a percentage of the original file size.

    The optimization process skips any skin elements that are not used by the application. Specifically, the optimization skips the generation of CSS:

    • For all skin elements that are not in the model.
    • For any unused formats of skin elements that are in the model.

    The optimization process also removes unnecessary CSS files, such as files that are only needed for specific skin elements, for specific controls, for specific formats of specific controls, and so on.

  6. Optional: Drill down to see detail for the CSS formats.

    • To see the CSS formats that used by a UI component, expand the folder that represents that component.

    • To see the specific rules that use a CSS format, expand the folder that represents that format.

    • To open a specific rule, click the Open icon for that rule.

  7. On the JS Dependencies tab, review the total number of JavaScript files optimized, the original size, and the optimized size (and percentage saved), and explore dependencies to determine which files you can remove without affecting your application’s functionality.

    • Components – Select this option to see the JavaScript files on which various components depend. When you click the Open icon for a component, the UIComponent Definition screen is displayed and you can view the JavaScript files on which the component is dependent.

    • File dependencies – Select this option to drill down from a calling component to find the JavaScript files on which it is dependent. Click the Open icon to see the contents of the JavaScript file.

      For example, you can drill down on the pega_ui_property JavaScript file all the way to the pzpega_ui_environment JavaScript file. You can then click the Open icon to view the contents of the pzpega_ui_environment file on the Text File rules screen so that you can further explore its dependencies, check JavaScript syntax, and so on.

    • File dependency parents – Select this option to reverse the view from the preceding option and trace dependencies from a JavaScript file up to its calling component.

      For example, to continue from the preceding example, you could instead start from the pzpega_ui_environment JavaScript file and drill to find its calling component, the pega_ui_property JavaScript file, to determine why the file is needed.

  8. On the JS Stack tab, review the total number of JavaScript files that were optimized, listed in dependency order; the original size; and the optimized size (and percentage of original size).

    Expand sections to see where JavaScript files are included:

    • Included at top – This section lists all JavaScript files that are included in the JavaScript bundle, in the head tag.

    • Included with Client Template – This section lists all JavaScript files that are needed for templates. These files are bundled and included before template JSON code.

    • Included at bottom – This section lists the remaining JavaScript files, which are bundled and included in the body tag near the bottom of the document.

    Click the Open icon to display the contents of the JavaScript file on the Text File rules screen so that you can check the file's syntax.