Question

As many of you know, most jQuery (or javascript, for that matter) plugins you find these days can be downloaded as either regularly formatted code, minified version, or both. For development purposes, I like to use the non-minified versions of the plugins, in case I need to set a Firebug breakpoint or look through it for any reason.

Now when I package my app and deploy it, I’d rather switch to the minified versions of the plugins, for efficiency’s sake. The only way I know to do this is to have both versions on hand, then manually change all the references in my Views (I use MVC) to point to the minified versions, then package and deploy. Ideally I’ll be minifying (and maybe obfuscating) my own javascript files as well.

Does anyone know of a better, more efficient way of developing with non-minified plugins (for readability) and deploying with minified versions (for efficiency)? Any articles you could point me to that talk about it? I’m pretty new to how to handle javascript deployment, and could probably brush up on best practices.

Thanks.

Answer 1

I tend to always use the minified versions of 3th party JSs unless I specifically need to look into it… In any case, you could write an html helper that inserts the correct script name based on some configuration (can be debug vs release)…

You would end up with something like:

<%= Html.IncludeJQuery() %>

or if all your scripts follow the same convention ( .min.js for minified version) do a helper that inserts the ‘.min’ on the script that you pass is when in release

<%= Html.IncludeCorrectVersionOfScript("jquery-1.4.2.js") %>

Update:

Html helpers, are extension methods to Mvc’s HtmlHelper class that you can use to emit the ActionLink, BeginForm, EditorFor, etc. You basically attach a new method (albiet static only) to that object so you can do Html.MyMethod…. A helper for this would be some like:

public static class ScriptIncludeHelper
{
    public static MvcHtmlString IncludeCorrectVersionOfScript(this HtmlHelper html, string script)
    {
        if (!html.ViewContext.HttpContext.IsDebuggingEnabled)
            script = script.Replace(".js", ".min.js");
        var tag = string.Format("<script type=\"text/javascript\" src=\"{0}\"></script>", script);

        return MvcHtmlString.Create(tag);
    }
}

Note that this is very simplified version (no validation of the string, etc.etc.etc.)

Now you could use the IsDebuggingEnabled or a configuration in your web.config or a static configuration to define if you want to include the minimized version of the debug version…

Hop this helps