Obfuscating and reducing JavaScript using Trinidad plugin
Posted by Mike Haller
on Tuesday, July 31. 2007
at 00:00
in Java
Apache MyFaces Trinidad's maven-javascript-plugin can be used to obfuscate and reduce JavaScript source code.I let the plugin work on the JavaScript files coming with Mozilla Firefox 2, a total of 1.4 MB of source code.
The resulting files were reduced to 644 kilobyte.
I'll show you how to set up and run the
maven-javascript-plugin. As your faces project might have a lot of JavaScript, this little helper could get handy some day.Create a JavaScript file, e.g.
src/main/javascript/myscript.js.//
// Some comment
//
function doSomething() {
// Does something
var $someLongVariableName = '123';
alert('Did something:' + $someLongVariableName);
}
Add the plugin to your
pom.xml and register it for the code generation lifecycle goals:<plugin>
<groupId>org.apache.myfaces.trinidadbuild</groupId>
<artifactId>maven-javascript-plugin</artifactId>
<configuration>
<sourcePath>./</sourcePath>
<targetPath>./</targetPath>
<optimizeTargetPath>./</optimizeTargetPath>
</configuration>
<executions>
<execution>
<goals>
<goal>reduce-javascript</goal>
</goals>
</execution>
</executions>
</plugin>
The plugin will reduce JavaScript files by stripping comments and redundant whitespace and renaming local variable names to shorter ones.
The
configuration elements sourcePath and targetPath are required and denote the subfolders within the src/main/javascript.As I put my javascript file directly in there, I use the
./ path as the current folder to trick the maven-javascript-plugin.Usually, you would end up using
META-INF/js/ or something like that in your project. See the trinidad-impl module for an example.Now run Maven
mvn package and have a look on the resulting file in target\maven-javascript-plugin\main\resourcesfunction doSomething(){
var$a0='123';
alert('Did something:'+$a0);
}
var$a0='123';
alert('Did something:'+$a0);
}
As you can see, the comments have been removed and the variable name got shorter.
Running the Mozilla Firefox JavaScript files (1.4 Megabytes of JavaScript code) through the optimizier plugin results in 644 Kilobyte, 50% savings which is a lot when serving many web clients.
I couldn't get the Obfuscating part of
maven-javascript-plugin working (hey, it's the version from trunk, so I didnt expect that everything works), however I'll post my configuration here:<plugin>
<groupId>org.apache.myfaces.trinidadbuild</groupId>
<artifactId>maven-javascript-plugin</artifactId>
<configuration>
<!-- Config for Reduce -->
<sourcePath>./</sourcePath>
<targetPath>./</targetPath>
<optimizeTargetPath>./</optimizeTargetPath>
<!-- Config for Obfuscate -->
<obfuscate>true</obfuscate>
<replaceCharLiterals>true</replaceCharLiterals>
<stripComments>true</stripComments>
<stripNewlines>true</stripNewlines>
<stripSpecialKeywords>true</stripSpecialKeywords>
<stripWhitespaces>true</stripWhitespaces>
<!-- ObfuscatorConfig does not work -->
<obfuscatorConfig>config.xml</obfuscatorConfig>
<sourceDirectory>src/main/javascript</sourceDirectory>
</configuration>
<executions>
<execution>
<goals>
<goal>reduce-javascript</goal>
<goal>obfuscate-javascript</goal>
</goals>
</execution>
</executions>
</plugin>
<groupId>org.apache.myfaces.trinidadbuild</groupId>
<artifactId>maven-javascript-plugin</artifactId>
<configuration>
<!-- Config for Reduce -->
<sourcePath>./</sourcePath>
<targetPath>./</targetPath>
<optimizeTargetPath>./</optimizeTargetPath>
<!-- Config for Obfuscate -->
<obfuscate>true</obfuscate>
<replaceCharLiterals>true</replaceCharLiterals>
<stripComments>true</stripComments>
<stripNewlines>true</stripNewlines>
<stripSpecialKeywords>true</stripSpecialKeywords>
<stripWhitespaces>true</stripWhitespaces>
<!-- ObfuscatorConfig does not work -->
<obfuscatorConfig>config.xml</obfuscatorConfig>
<sourceDirectory>src/main/javascript</sourceDirectory>
</configuration>
<executions>
<execution>
<goals>
<goal>reduce-javascript</goal>
<goal>obfuscate-javascript</goal>
</goals>
</execution>
</executions>
</plugin>
