There have been many instances
where we have struggled to increase performance of the web site because in
practical situation,
·
applications become very complex with tons of
JavaScript’s and huge CSS
files and
·
downloading that information takes time if the
bandwidth is low.
Here we can increase the
performance using the ideas below without changing any code.
Improving the engineering design of a page or a web
application usually yields the biggest savings and that should always be a
primary strategy.
With the right design in place, there are many
secondary strategies for improving performance such as minification of the
code.
The goal of JavaScript and CSS minification is
always to preserve the operational qualities of the code while reducing its
overall byte footprint (both in raw terms and after gzipping, as most JavaScript
and CSS served from production web servers is gzipped as part of the HTTP
protocol).
The YUI Compressor is JavaScript minifier designed
to be 100% safe and yield a higher compression ratio than most other tools.
The YUI Compressor is written in Java (requires
Java >= 1.4) and relies on Rhino to tokenize the source JavaScript file.
It starts by analyzing the source JavaScript file
to understand how it is structured. It then prints out the token stream,
omitting as many white space characters as possible, and replacing all local
symbols by a 1 (or 2, or 3) letter symbol wherever such a substitution is
appropriate (in the face of evil features such as with, the YUI
Compressor takes a defensive approach by not obfuscating any of the scopes
containing the evil statement).
The CSS compression algorithm uses a set of finely
tuned regular expressions to compress the source CSS file. The YUI Compressor
is open-source, so don't hesitate to look at the code to understand exactly how
it works.
1. Download and Copy
the following YUI Compressor jar file into the ANT LIB folder
2. Change
the following properties in the build.properties file
- javascript.compress=true
- jsp.compress=true
3. Here
is the sample ANT target to do the compression change the directories according
to your needs.
<target
name="compressjsandcss" depends="init">
<taskdef
name="yui-compressor"
classname="net.noha.tools.ant.yuicompressor.tasks.YuiCompressorTask"/>
<mkdir
dir="${web.build.dir}/war/cssmin" />
<mkdir
dir="${web.build.dir}/war/jsmin" />
<!--
invoke compressor -->
<yui-compressor
warn="false"
munge="true"
preserveallsemicolons="false"
fromdir="${web.build.dir}/war/css"
todir="${web.build.dir}/war/cssmin">
</yui-compressor>
<yui-compressor
warn="false"
munge="true"
preserveallsemicolons="false"
fromdir="${web.build.dir}/war/js"
todir="${web.build.dir}/war/jsmin">
</yui-compressor>
<copydir
dest="${web.build.dir}/war/js"
src="${web.build.dir}/war/jsmin" includes="**/*.js"
forceoverwrite="true" />
<copydir
dest="${web.build.dir}/war/css"
src="${web.build.dir}/war/cssmin" includes="**/*.css"
forceoverwrite="true" />
<delete>
<fileset
dir="${web.build.dir}/war/cssmin" includes="**/*.css"/>
</delete>
<delete>
<fileset
dir="${web.build.dir}/war/jsmin" includes="**/*.js"/>
</delete>
</target>
JSP pages when compressed are a
real boom to the performance of a page
I use regular expression to
achieve this.
<target name="compressjsp"
depends="init">
<echo>+------------------------------------------------------------+</echo>
<echo>+ Cleaning the JSP files +</echo>
<echo>+CAT View module name =
${web.build.dir}/war/jsp
+</echo>
<echo>+------------------------------------------------------------+</echo>
<replaceregexp
flags="g" byline="true">
<regexp pattern="&>\n+&<"/>
<substitution
expression="&>&<"/>
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp"/>
</replaceregexp>
<replaceregexp
match="\s+" replace=" " flags="g"
byline="true">
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp"/>
</replaceregexp>
</target>
<target name="stripWhiteSpace"
depends="init">
<echo>+------------------------------------------------------------+</echo>
<echo>+ Cleaning the JSP files +</echo>
<echo>+CAT View module name =
${web.build.dir}/war/jsp
+</echo>
<echo>+------------------------------------------------------------+</echo>
<replaceregexp match="\s+"
replace=" " flags="g" byline="true">
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp"/>
</replaceregexp>
<replaceregexp
match="&>\n+&<" replace="&>&<"
flags="g" byline="true">
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp"/>
</replaceregexp>
</target>
<target name="stripLineBreaks"
depends="init">
<copy todir="${web.build.dir}/war"
overwrite="true">
<filterchain>
<striplinebreaks/>
</filterchain>
<fileset
dir="${web.build.dir}/war">
<include name="**/*.jsp"/>
</fileset>
</copy>
</target>
<target
name="noblanklines" depends="init">
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp"/>
<filterchain>
<tokenfilter><ignoreblank/></tokenfilter>
</filterchain>
<replaceregexp
flags="g" byline="false">
<regexp
pattern="\r\n[\s]*\r\n[\s]*\r\n"/>
<substitution
expression=" "/>
<fileset
dir="${web.build.dir}/war" includes="**/*.jsp">
</fileset>
</replaceregexp>
<replaceregexp
flags="g" byline="false">
<regexp
pattern="\r\n[\s]*\r\n[\s]*\r\n"/>
<substitution
expression=" "/>
<fileset
dir="${web.build.dir}/war" includes="**/*.js">
</fileset>
</replaceregexp>
</target>
1. If
there is an issue in any of the above techniques ensure that the
build.properties has the parameters set to “false”.
