Optimize Your Components

An example of optimizing component source code (optional) is provided for the Sample-Text-With-Image component. You can use the RequireJS optimizer to minify and combine source code. Minifying a component removes unwanted space in the JavaScript code, resulting in better performance and reduced download size. Optimizing involves the following actions:

• Minify the JavaScript.

• Compress the CSS.

• Combine the JavaScript, HTML, and CSS into a single file, render.js.

This optimization reduces download size and improves performance.

Enable Optimization for Your Component

In the Sample-Text-With-Image component, optimization will minify and combine all the files that are marked as dependencies in render.js (template.html, data-defaults.js, and design.css) into render.js as a single file. Other components that already support optimization follow: 

• Sample-Folder-List

• Sample-File-List

• Sample-Documents-Manager

• Sample-Process-Start-Form

• Sample-Process-Task-List

• Sample-Process-Task-Details

To enable optimization for your local component, take the following steps (required):

1. Copy gulpfile.js from the Sample-Text-With-Image component to your component.

2. Fix the module names in gulpfile.js for your render.js dependencies. Refer to the comments in gulpfile.js.