1. Building Sites with Oracle Content Management
  2. Developing for Sites
  3. Develop Components
  4. Develop Custom Components with Developer Cloud Service
  5. Optimize Components (Minify) for Better Performance

Optimize Components (Minify) for Better Performance

Improve the performance of your components and reduce download sizes by minifying the JavaScript code with Developer Cloud Service.

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.

Note:

If you have an existing component, with a css folder under assets, rename the css folder to styles to avoid errors during optimization.