Minification of JS and CSS files

You can minimize the size of JavaScript and CSS files that are deployed with your applications by using MobileFirst Studio settings.

Minification is the process that minifies web resources to make them smaller. The smaller size of the resources means less traffic between the MobileFirst application and MobileFirst Server. This is true both when the app is being initially downloaded by users, and at application start time.

Starting in IBM MobileFirst™ Platform Foundation V7.1.0, you can use minification with all environments.

The feature is a counterpart to another build optimization, concatenation, and is almost always used with it. Use of these features can either improve the applications' start time (concatenation), or reduce the size of the application (minification).

Minification is done at build time by the Google Closure Compiler. You can use three levels of minification in a MobileFirst application, as listed in the following table:

Table 1. Options for the minification `level` attribute
Value	Description
none	No minification is done on your code by the MobileFirst Studio builder.
whitespaces	Removes comments from your code and also removes line breaks, unnecessary spaces, and other white space. The output JavaScript is functionally identical to the source JavaScript. (In the MobileFirst Studio Build Settings Editor, this attribute is called Remove whitespaces and comments.)
simple	Removes the same white space and comments as whitespaces, but also optimizes expressions and functions, including renaming local variables and function parameters to shorter names. Renaming variables to shorter names makes the code smaller. Because the simple setting renames only symbols that are local to functions, it does not interfere with the interaction between the compiled JavaScript and other JavaScript. Compilation with this setting always preserves the functionality of syntactically valid JavaScript, if the code does not access local variables with string names, for example, by using `eval()` statements. (In the MobileFirst Studio Build Settings Editor, this attribute is called Google Closure Compiler Simple Optimization.)

To configure minification in MobileFirst Studio

You create a minification configuration for your application in two steps. First, you edit the Build Settings for the application, and then you turn on minification for the individual environments.

To configure minification, in MobileFirst Studio, double-click the build-settings.xml element of your application to display the Build Settings Editor and select the environment:
Select the wanted minification level from the Level field:
- None (Default) specifies the none attribute in Table 1.
- Remove whitespaces and comments specifies the whitespaces attribute in Table 1.
- Google Closure Compiler Simple Optimization specifies the simple attribute in Table 1.
Enter the list of files to be minified or excluded from minification in the Include and Exclude fields. When you save, these settings become part of the application code.
Use the Ant syntax that is described in MobileFirst application build settings.
To instruct MobileFirst Studio to use minification during the build, in MobileFirst Studio, right-click the element of your application (or the main application node) and choose Run As > Build Settings and Deploy Target from the menu.
The Configure MobileFirst Build and Deploy Target window is displayed.
In the Build optimization area of the dialog, select Use minification to reduce the size of JavaScript and CSS files.
Click OK.
Rebuild your application. No changes take place after an edit of the minification parameters until after the next build.

You can also edit the build-settings.xml file with a standard XML editor, and you can invoke this file by using Ant scripts. See MobileFirst application build settings for examples of the XML syntax.