April 3, 2020
Estimated Post Reading Time ~

Overview of Minification in CQ5/AEM

The Problem:
Pages are taking too long to load in production because the JavaScript pages contain comments, whitespaces and long variable names causing bloating in file size.

The Solution:
Minification! What is minification you ask?
The Theory:
In a nutshell, minification is a fancy term for getting rid of unnecessary characters in your JavaScript. It is a subset of obfuscation.

Minification in CQ5 does the following:
Removes the following superfluous characters from the JavaScript code:
White Space Characters
New Line Characters
Comments
Renames long variable and function names in the local namespace to something smaller

You need to be careful to note that if you have ridiculously long function names, you will still wind up with bloated JavaScript files, as the Minification engine in CQ5 does not yet

The Implementation:
To activate minification, you will need to log in to your Felix console and enable the minify option. 

Go to {ServerURL}/system/console/configMgr
Scroll down and click on "Day CQ HTML Library Manager"
Click on the Minify checkbox
(Optional) Enable Gzip

Where to Next?
If minification does not reduce your file size enough yet, you only have a few options. If you can think of more, please let me know so that we can collate them here.

1. Refactor your unnecessarily loquacious names to more simple and understandable names.

2. Use an external JavaScript minifier such as http://closure-compiler.appspot.com/home

NOTE: If anyone out there thinks there is a better minifier, please comment below.

3. See if you can hang your code out to DRY.

Reference: http://therealcq.blogspot.com/2012/10/the-fine-art-of-minification-in-cq55.html


By aem4beginner

No comments:

Post a Comment

If you have any doubts or questions, please let us know.