 |
| Image Source: https://webinlinedev.com/ |
Minification is a process of compressing the source code, without changing it’s functionality. This technique is useful sometimes, specially in the case of a web application with huge JavaScript/CSS files. In other cases, it’s probably just a micro-optimization. Minifying JavaScript/CSS files reduces the bandwidth used and also improves the performance of the application as the page loading time is minimal.
As per Wikipedia Source:
Minified source code is especially useful for interpreted languages deployed and transmitted on the Internet (such as JavaScript/StyleSheet), because it reduces the amount of data that needs to be transferred. Minified source code may also be used as a kind of obfuscation. In Perl culture, aiming at extremely minified source code is the purpose of the Perl golf game.
Minified source code is also very useful for HTML/CSS code. As an example, successive whitespace characters in HTML/CSS are rendered as a single space, so replacing all whitespace sequences with single spaces can considerably reduce the size of a page.
If you are using Maven for your build process, then you can use Minify Maven Plugin which is a wrapper above the YUI Compressor and Google Closure Compiler but has a layer of abstraction around these tools which allows for other tools to be added in the future.
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-war-plugin</artifactId>
<version>2.4</version>
<configuration>
<warSourceExcludes>/styles/*.css,/scripts/*.js</warSourceExcludes>
</configuration>
</plugin>
<groupId>com.samaxes.maven</groupId>
<artifactId>minify-maven-plugin</artifactId>
<version>1.7.2</version>
<executions>
<execution>
<id>minify</id>
<phase>process-resources</phase>
<goals>
<goal>minify</goal>
</goals>
<configuration>
<charset>utf-8</charset>
<jsEngine>CLOSURE</jsEngine>
<skipMerge>true</skipMerge>
<nosuffix>true</nosuffix>
<cssSourceDir>styles</cssSourceDir>
<cssTargetDir>styles/minified</cssTargetDir>
<cssSourceIncludes>
<cssSourceInclude>*.css</cssSourceInclude>
</cssSourceIncludes>
<jsSourceDir>scripts</jsSourceDir>
<jsTargetDir>scripts/minified</jsTargetDir>
<jsSourceIncludes>
<jsSourceInclude>*.js</jsSourceInclude>
</jsSourceIncludes>
</configuration>
</execution>
</executions>
</plugin>
I created a sample web application with “scripts” folder to store javascript files and “styles” folder to store stylesheet files and used the above configuration to test the Minification process.
I copied the latest version of certain JavaScript and StyleSheet files weighed as noted below:
- script/category-app.js –> 636 B
- script/jquery.js –> 273199 B
- styles/style-foundation.css –> 44659 B
After the Maven build, the minified versions of JavaSript and StyleSheet files weighed as noted below:
- script/category-app.js –> 256 B
- script/jquery.js –> 94689 B
- styles/style-foundation.css –> 37016 B
The above results show that the Minification process is working well as expected. So, if you are using a lot of JavaScript/StyleSheet files in your web application, consider minifying your js/css code, so that you can reduce the data transferred and also improve the performance of your web application. In some cases, it might be a micro-optimization.
I have added the configuration <skipMerge>true</skipMerge>. Hence you see that all your files are minified but kept under the same file name within the minified folders respectively. If you set the value to <skipMerge>false</skipMerge>, then it merges all your JavaScript/StyleSheet files into one single file.
If the configuration <nosuffix>true</nosuffix>, you see that all the file names still remain same as the original ones. If you set the value ot <nosuffix>false</nosuffix>, then it will suffix all your JavaScript/StyleSheet file names with ‘.min’.
For more detailed information about the plugin, please click here.
