It will minify the javascript file. We minify javascript files so it will reduce page loading. JSMin first replaces carriage returns (‘\r’) with linefeeds (‘\n’). It replaces all other control characters (including tab) with spaces. It replaces comments in the // form with linefeeds. It replaces comments in the /* */ form with spaces. There are many supported programming language available to use jsmin. I used php.

What ?

If you’re looking forward to optimize the frontend in your Symfony project or to introduce different CSS or JavaScript versions to each language in your application there’s a nice plugin that will help you with that. It’s called sfMinifyTSPlugin and it integrates Google’s minify library so you know it’s good stuff .

Why ?

What makes it stand out from the rest of Symfony minify plugins is the fact that you don’t need to change anything in your .htaccess file or any other server stuff, just an out-of-the-box cool plugin.

The other nice thing about it is that you can implement it either as a filter or with a helper.

The fun part is also that the authors implemented some symfony tasks to help you clear-cache and fix permissions.

The cache files names are generated with a date so you’ve got all the usefull info about it and speeds up your web application just like that.

So don’t hesitate to experiment with this cool plugin in your future Symfony applications.

That’s right, you read it correctly – free bandwidth. With a very short function we’re going to minify our output.

Makes me think of a song, but I don’t want to ruin the rest of the post.

When people render their WebForms and MVC Views, they send their finished HTML back down to the page. The HTML contains all the markup required to run in the browser. Every developer knows all this though (and if not… well…).

Part of the whole grand ASP.NET pipeline is the Response.Filter. A seemingly innocent property with a lot of potential. Enough boasting about this guy, let’s get onto the code and see what it can do.

First, you’re going to need to create a custom stream. I’m hiding all the inherited members because they aren’t going to mean much in this example, but don’t forget that you need them.

With our custom stream, add a hidden property called the UnderlyingStream (honestly call it whatever you want). Lastly, accept a stream in the constructor and assign it to the underlying stream when you instantiate the new stream you’re building.

Lastly, we’re going to override .Write() routine to actually minify our output. A couple simple Regular Expressions and we can chop out most of the whitespace.

public class MinifyFilter : Stream {

    //inherited members from Stream class - Don't forget
    //See download for more information
    //...

    //The real output stream
    private Stream _UnderlyingStream;

    //Make sure to pass in the current Response.Filter
    public MinifyFilter(Stream stream) {
        this._UnderlyingStream = stream;
    }

    //Override our write event
    public override void Write(byte[] buffer, int offset, int count) {

        //clean out the whitespace characters
        string html = Encoding.UTF8.GetString(buffer);
        html = Regex.Replace(html, @"\n|\t", " ");
        html = Regex.Replace(html, @">\s+<", "><").Trim();
        html = Regex.Replace(html, @"\s{2,}", " ");

        //write the new html
        byte[] output = Encoding.UTF8.GetBytes(html);
        this._UnderlyingStream.Write(output, 0, output.Length);

    }
}

This is a very streamlined version of the code that doesn’t take everything into account. You might want to put some special attention into preventing formatting of text in the <pre> tags or <code> tags, but it’s a great start.

Now using it is as simple as…

//MVC Example: At the start of a controller action
public ActionResult Index() {
  this.Response.Filter = new MinifyFilter(this.Response.Filter);
  //...rest of the action
  return this.View(); 
}

//WebForms Example: At the Page_Init
protected void Page_Init(object sender, EventArgs e) {
  this.Response.Filter = new MinifyFilter(this.Response.Filter);
  //rest of the Page_Init code
}

You could also assign this to a more global event that runs for all requests, but at that point you will need to write code to make sure you don’t accidentally minify something like an image or a file (things that can’t be compressed by just removing white-spaces).

You might wonder how much a little script like this would save. The answer is simple – It depends. Clearly, pages with a lot of white spaces will find a lot more gain. Sometimes it’s 1 or 2 KBs (which will add up over the course of a month). Sometimes though, especially on larger pages, you can see some real savings.

Here are a few popular sites and their savings

GameSpy 94K – (84K minified)

StackOverflow 119K – (102K minified)

Forums.ASP.net 222K – (154K minified)

Keep in mind that this code isn’t bullet-proof, but instead it’s here to get you started. You can continue to tweak the .Write() method to make sure that your code behaves the way you would like.

With all the savings you get from the extra bandwidth make sure you remember to send me a Coke Zero!

Source Code

Download MinifyFilter.cs

.

The package system I originally came up with is getting more complex by the day. First, I wanted to make sure I could load files.

YAHOO.util.Get solved that easily.

Then I wanted to be able to minify and compress them.

YUI Compressor took care of that.

Finally, I wanted to be able to combine them into single files. Again, not really hard at all. In fact, I just wrote a script that essentially does “cat file1 file2 file3 > combofile”.

So, now I have the possibility of:

/js/myscript.js

/js/myscript-min.js

/js/corefiles-combo.js

(I had /js/corefiles-min-combo.js for a while too, but then realized if I wanted it minified, I just needed to make the combo definition include minified files to begin with). See, sometimes things get more simple!

Next, I need to make sure that I only download a file once. So, when I want to dynamically load a new file, I need to make sure I don’t have the plain version, a minified version or either one of those as part of a combo file.

I’m only part of the way through this code. No YAHOO.package.manager to save me this time (if I missed it somehow, please let me know!).

So far, I can list all loaded files. I can then strip the “-min” off (since, from the program’s point-of-view, it doesn’t matter if the file is min’ed or not). I can also take a -combo file, check the package definitions for what is in that combo file,  then add those files (again, removing the -min) to the list.

Now, I have a “master” list of all loaded files, which I can check before trying to load a file.

Next up is to determine if it is faster to add files to this array as I load them or to simply rebuild the entire list every time I load a new package. It seems safer to just rebuild, but sloppy. Keeping track means things could sneak in if a file gets loaded and doesn’t “register” itself with the list tracker.

We’ll have to wait and see what I come up with.

The default installation of WordPress use full version of css and javascript library. In order to minify all of these files, I wrote this bash script to minify all of them. There will be no progress bar while minifying, so be patient.

cd wordpress
find -H . -type f -writable  \( -name \*.css -o -name \*.js \)  \
-exec sh -c "yuicompressor {} -o /tmp/yui.tmp && mv /tmp/yui.tmp {}" \;

This will only work under POSIX system.
Findutils should be included in most popular Linux distros.
Yuicompressor can be downloaded from here.

Manually minify files is doable when the files are not changed frequently and you do not have many files to minify. If you have JavaScripts that change frequently due to active development or have a large number of files, you might want to consider to automate it. One way to do so is to use ant target for YUI Compressor.

Here is the configuration that I used to setup the minify. You may wish to change directory/file location and file names to match your environment. You can also update the exclude list (i.e. excludes="/lib/**/**/*.js,**/other_special_file.js") for correct files that YUI Compressor can not handle.

    <target name="-pre-dist">
    <echo level="info" message="Compressing JavaScript and CSS files...." />
    <available file="${basedir}/../libs/jars/YUIAnt.jar" property="YUIANT_AVAILABLE" />
    <fail unless="YUIANT_AVAILABLE" message="Run jar target to generate the required task"/>
    <path id="yuicompressor.classpath">
        <fileset dir="${basedir}/../libs/jars">
            <include name="yuicompressor-2.3.6.jar"/>
            <include name="YUIAnt.jar"/>
        </fileset>
    </path>
    <taskdef name="yuicompress" classname="com.yahoo.platform.yui.compressor.YUICompressTask">
        <classpath>
            <path refid="yuicompressor.classpath"/>
        </classpath>
    </taskdef>
    <yuicompress linebreak="8000" warn="false" munge="no" preserveallsemicolons="true"
         outputfolder="${basedir}/${build.web.dir}" >
         <fileset dir="${basedir}/web" excludes="/lib/**/**/*.js,**/other_special_file.js" >
             <include name="**/*.js" />
             <include name="**/*.css" />
        </fileset>
    </yuicompress>
    <echo level="info" message="Compression Complete" />
    </target>

I didn’t find this information anywhere, so here it is for the Google archives…

To get Prototype to run after squeezing it through ShrinkSafe, you need to put back every instance of the variable $super. ShrinkSafe replaces variable names with shortened versions, and because of some Prototype voodoo, it breaks on this one name. There are about 8 places you’ll find it, and unfortunately, it takes some manual hunting once ShrinkSafe has changed a bunch of names, but there you have it.

I suppose someone smarter than I could tweak ShrinkSafe to ignore this variable name, but for me, this works.

For best performance, it is recommended that you minify the Javascript and CSS that your web application uses.  What this involves is removing all unnecessary whitespace and comments.  So, for example, the following CSS:

body
{
  margin: 5px 10px 10px 10px;
  font-family: arial;
}

would look like this after being minified:

body{margin:5px 10px 10px 10px;font-family:arial;}

And similarly for Javascript. It is common to configure your server to perform GZip compression on files that it serves, including Javascript and CSS, and this can significantly reduce the time that it takes for browsers to load your pages. But minification when used with GZip usually helps to compress the files just a little bit further. And unlike GZip, which only compresses the file only as it is sent over the internet, minification compresses the file as it is seen by a browser. This allows the browser to parse it faster; additionally, smaller files are more likely to be cached by the browser.

It is common to manually minify your Javascript and CSS as part of deploying your application, saving a minified copy on your server either manually or as part of an automatic deployment script. But it is also possible to create custom Apache output filters to perform the minification for you. This gives you the best of both worlds — you can edit your files directly without their being minified, but you don’t have to engineer a minification process for when you deploy your application. Here’s how to do it, first for Javascript and then for CSS.

Javascript

1. Ensure you have the Apache mod_ext_filter extension installed.

2. Download the jsmin.py Python script from Douglas Crockford’s website. (There are also other languages available.)  Save it in your Python installation’s site-packages folder (possibly /usr/lib/python2.x/site-packages/).

3. Add the following lines to your main Apache config file (httpd.conf, apache2.conf, etc.):

   <IfModule mod_ext_filter.c>
     ExtFilterDefine jsmin \
                     mode=output \
                     intype=application/x-javascript \
                     outtype=application/x-javascript \
                     cmd="/usr/bin/python /usr/lib/python2.4/site-packages/jsmin.py"
   </IfModule>
   

4. Add the following statement to the context where you would like to minify your Javascript files (you can place this in your server config, but also within a virtual host configuration, a directory directive, or even a .htaccess file if FileInfo overrides are allowed):

   AddOutputFilter jsmin js
   

   This will cause all files with extensions ending in .js to be run through the Javascript minify filter before being sent to a browser. If you have some Javascript without the .js extension, you can add additional extensions, or you can use the AddOutputFilterByType directive instead to apply the filter to any content with the application/javascript MIME type. With appropriate mod_expires directives you can cause these files to be cached for a long time by browsers, thereby ensuring that the minify filter is not run more than necessary.

For debugging purposes you should ensure that the minify filter is applied only to your production server and not to your development server. Until you have verified the correctness of your Javascript it will be harder to locate Javascript errors within minified code!

CSS

1. Ensure you have the Apache mod_ext_filter extension installed, as above.

2. Install the cssmin Ruby gem:

   gem install cssmin

3. Add the following lines to your main Apache config file (httpd.conf, apache2.conf, etc.):

   <IfModule mod_ext_filter.c>
     ExtFilterDefine cssmin \
                     mode=output \
                     intype=text/css \
                     outtype=text/css \
                     cmd="/usr/bin/ruby -e 'require \"rubygems\"; require \"cssmin\"; puts CSSMin.minify(STDIN)'"
   </IfModule>
   

4. Add the following statement to the context where you would like to minify your CSS files (you can place this in your server config, but also within a virtual host configuration, a directory directive, or even a .htaccess file if FileInfo overrides are allowed):

   AddOutputFilter cssmin css
   

   This will cause all files with extensions ending in .css to be run through the CSS minify filter before being sent to a browser. If you have some CSS without the .css extension, you can add additional extensions, or you can use the AddOutputFilterByType directive instead to apply the filter to any content with the text/css MIME type. With appropriate mod_expires directives you can cause these files to be cached for a long time by browsers, thereby ensuring that the minify filter is not run more than necessary.

Apesar de eu ter criado minha própria classe de Minify de CSS, não irei postá-la aqui neste momento, mas sim, irei indicar alguns sites e classes que fazem o Minify de CSS e outros que trabalham com Javascript.

MINIFY JAVASCRIPT

http://www.compressjavascript.com/

http://fmarcia.info/jsmin/test.html

MINIFY CSS (usando PHP)

http://www.vladimirated.com/web-development-minify-css-using-php-and-cssmin-class

MINIFY JAVASCRIPT e CSS

http://code.google.com/p/minify/wiki/UserGuide

MINIFY JAVASCRIPT, CSS e HTML (usando PHP)

http://aciddrop.com/2008/01/21/boost-your-website-load-time-with-3-lines-of-code/

Já que não sou expert na área de Tunning e Boost Performance, será que alguém pode explicar o caso de uso abaixo?

Dado que possuímos 5 arquivos JS já minificados, cada um possuindo 50Kb, temos 5 HTTP-Request e a transferência de 250Kb totais. É mais válido manter esse número de requests (comprometendo o load time), ou unir todos estes arquivos em 1 só de 250Kb, e comprometer toda a página já que arquivos grandes ficam mais vulneráveis a falhas de transferência de pacotes?

Minha grande dúvida é: Existe algum tamanho ótimo de arquivo JS e de CSS? (Sem ser os recomendados pelo Web Site Optimization – os quais considero difícies de serem atingidos)