Automatic Resource Minification with Structr

Structr just got another useful, some would argue essential, web development feature: Minification.

If you want to minify the resources for your web app to optimize performance you dont need to do this manually anymore. Structr supports minification of CSS and JavaScript resources. For this you can create files of type MinifiedCssFile or MinifiedJavaScriptFile respectively. In the properties dialogue of those files other files can be selected which should be included in the minified file.

Should any of the minification resources change, all minification targets will be automatically updated to reflect the changes. The same goes for the specific settings for each type, changing the lineBreak value triggers the minification of the MinifiedCssFile and changing the optimizationLevel triggers a minification of the MinifiedJavaScriptFile. A minification target is also updated when a file is removed, added or the order of the files is changed.

By integrating this new feature, Structr takes one more worry away from users. They can simply include the minified asset into production pages and don’t need to worry about updating their minified assets or even leaving Structr.

JavaScript Minification

For JavaScript Structr integrates the Google Closure compiler. Currently, Structr only supports the configuration of the optimization level. The supported values are WHITESPACE_ONLY, SIMPLE_OPTIMIZATIONS and ADVANCED_OPTIMIZATIONS.

From the closure compiler documentation:

The WHITESPACE_ONLY compilation level removes comments from your code and also removes line breaks, unnecessary spaces, extraneous punctuation (such as parentheses and semicolons), and other whitespace. The output JavaScript is functionally identical to the source JavaScript.

The SIMPLE_OPTIMIZATIONS compilation level [...] also performs optimizations within expressions and functions, including renaming local variables and function parameters to shorter names.

The ADVANCED_OPTIMIZATIONS compilation level [...] adds a variety of more aggressive global transformations to achieve the highest compression of all three levels. The ADVANCED_OPTIMIZATIONS level compresses JavaScript well beyond what is possible with other tools.

The properties dialogue enables the user to add/remove files to/from the minified file, select the optimization level and also shows the warnings and errors which occurred during minification. It also lets the user trigger a manual minification run.

CSS Minification

For CSS YUICompressor is used. Structr support the lineBreak configuration option which can be used to enforce a maximum line-length rule because some source control tools don’t like very long lines.

The dialogue behaves the same way it does for JavaScript files. Changes to settings trigger minification of the source files and the user can add/edit the file list.

Feedback

Do you have comments, feedback or improvements you would like to see in this feature? Some must-have options or configuration switches for closure compiler Structr simply needs to support? Let us know in the comments below, tweet at @structr or open a feature request issue in the structr repository on GitHub