Ejemplo Javascript compactor con MVC

La idea principal de este tutorial es mejorar el tiempo de respuesta de nuestra aplicacion, hay veces que tenemos muchos archivos javascript con poco peso, y como lleva mas tiempo realizar el get de 20 archivos de poco peso que el de un solo archivo con todo el contenido,
vamos a implementar una solucion para juntar todos los archivos dentro de la carpeta applicationScripts en uno solo. De esta forma tambien nos olvidamos un poco de tener que declarar los nuevos archivos en la cabecera de la pagina.

Paso a paso

Step 1. Abrimos Global.asax.cs y declaramos un nuevo routing para la peticion del archivo “applicationScripts.js”

        public static void RegisterRoutes( RouteCollection routes )
        {
            routes.IgnoreRoute( "{resource}.axd/{*pathInfo}" );

            routes.MapRoute( "scripts",
            "applicationScripts.js",
            new { controller = "JavascriptCompresor", action = "Index" } );

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Home", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

Step 2. Ahora creamos el controlador segun el codigo inferior.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Text;
using System.IO;

namespace MVCJavascriptCompactorExample.Controllers
{
    public class JavascriptCompresorController : Controller
    {
        //
        // GET: /JavascriptCompresor/

        [OutputCache(Duration=3600000)]
        public ActionResult Index()
        {
            byte[] script;
            StringBuilder sb = new StringBuilder();

            DirectoryInfo di = new DirectoryInfo( this.Request.MapPath( @"/Scripts/ApplicationScripts/" ) );

            if ( di.Exists )
            {
                var files = di.GetFiles( "*.js", SearchOption.AllDirectories );
                if ( files.Length == 0 )
                {
                    throw new HttpException( 404, "applicationScripts couldn't be generated" );
                }

                foreach ( var file in files )
                {
                    using ( StreamReader sr = new StreamReader( file.OpenRead() ) )
                    {
                        sb.Append( sr.ReadToEnd() );
                    }
                }
                script = Encoding.UTF8.GetBytes( sb.ToString() );
                return File( script, "text/javascript", "applicationScripts.js" );
            }
            throw new HttpException(404,"applicationScripts couldn't be generated");
        }

    }
}

Hemos usado el atributo OutputCache, nos permite usar ASP.NET Output Caching con las acciones de los controladores en MVC, muy util. Si miramos el codigo hemos unido todos los archivos javascript en uno, en caso de que no exista el directorio o que no contenga archivos javascript lanzamos una excepcion.

Step 3. Creamos el directorio \Scripts\ApplicationScripts y copiamos dentro los archivos javascripts que necesitemos en _Layout.cshtml

Step 4. Por ultimo escribimos la referencia en _Layout.cshtml y quitamos las referencias a los archivos que ya tenemos dentro del directorio \Scripts\ApplicationScripts

    <script src="@Url.Content( "applicationScripts.js" )" type="text/javascript"></script>

Realizando los Test de rendimiento

He usado fiddler para realizar los performance test y el resultado ha sido muy satisfactorio, demasiado, ahora cargamos 4 veces mas rapido, es porque nuestra aplicacion esta compuesta por 10 javascript files y solo un par de css etc. En un escenario normal quizas podamos reducir el tiempo de carga un 20% .

En el siguiente enlaze puedes Descargar el ejemplo javascript compactor MVC

Un Saludo y espero que les halla gustado el articulo.