Is that even a word? Be that as it may
it is very important if your trying to optimise your website.
Essentially minification is the process
of making your code as small as possible, to speed load times. Mostly
when you talk about minification we are talking about CSS and
Javascript, even more specifically seperate files downloaded by web
pages.
If your not using js and css files to
share common code between pages, then do so! Sorry! Not only does
this allow one change to effect all pages at once , but you also get
much more control over the loading as opposed to in-line (on page)
code. Which i'll come to in a future article.
There are many minification routines
out there some that just remove white space, some that actually take
your code and process it to make it much more efficient but
infinitely less readable (shared classes, multiple references etc). A
word of warning though, the more savings made the more you have to be
careful of the minified code not working the same as the original
code. I tend to go for the safe option of the removal of unnecessary
white space and try to work the efficiency myself. Even using the
above I see dramatic savings in file sizes.
An advancement of this process is to
make it so that each page only uses one CSS file and one JS file.
This prevents excessive Httprequests being sent from the users
browser.
I set up my directories as follows. I
have a Scripts directory which contains a JS folder and a CSS folder.
Each of these folders has the sub folders src, mini, build, and
ref.(oh and yes that was an oxford comma.) In src we hold the
original easily read files in the original devleopment phase this is
all we need. In build we hold the collected files ( where we add src
files to make one file). In reference I hold an xml file that holds
details of which source files map to which build file.
<?xml
version="1.0"
encoding="UTF-8"?>
<!DOCTYPE
files [
<!ELEMENT
files (sourceFile+)> <!ELEMENT
sourceFile (Equivalents*,
BuildFiles)>
<!ELEMENT
Equivalents (file*)>
<!ELEMENT
file EMPTY>
<!ELEMENT
BuildFile EMPTY>
<!ATTLIST
sourceFile name CDATA
"">
<!ATTLIST
file name CDATA
"">
<!ATTLIST
BuildFile name CDATA
"">
]>
<files>
<sourceFile
name="PlanForm_build.js">
<BuildFiles>
<BuildFile
name="Forms_src.js"/>
<BuildFile
name="Plans_src.js"/>
<BuildFile
name="DynamicTabbedTable_src.js"/>
<BuildFile
name="CreateTable_src.js"/>
</BuildFiles>
</sourceFile>
</files>
|
As you can see the build file
PlanForm_build is made from Forms_src, Plans_src,
DynamicTabbedTable_src, and CreateTable_src. Its not really
necessary but it does come in handy when you leave a project for some
time to know what files link to which on your return. Which brings us
to the mini which is where you put the minified versions of your
build files.
My recommendations are JSMin,
and CssMin which apparently
is no longer avaliable(if anyone asks i'll post the file with
instructions). YUI compressor comes highly recommended but I haven't
personally used it.
|