OPTEN, das einzige Umbraco-zertifizierte Unternehmen der Schweiz

Minify and Bundle JavaScript- and CSS-Files

You probably heard, that you should include *.min.js from the JS-plugins in your project. Because the browser can load the file faster when it’s minified (less kilobytes). But then you can’t debug the plugin when an error occurs, because you just see the minified code.

With ASP.NET 4.5, MVC and Visual Studio and the great Microsoft.AspNet.Optimization-Package you do not have to do that anymore! The package will minify all files for you.

But that’s just the half of it. Do you know that the most of the browsers limit the number of simultaneous connections per each hostname to six? That means additional requests on a host will be queued by the browser and the first page load performance is slower. You should also bundle your scripts and style sheets.

 

Let’s get started

Install the package with the Package Manager Console:

PM > Install-Package Microsoft.AspNet.Optimization

Go to your Global.asax and add following code:

protected void Application_Start()
{
    ...
    BundleConfig.RegisterBundles(BundleTable.Bundles);
    ...
}

 In App_Start you create a cs-File named “BundleConfig.cs” where the fun starts:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
           // Bundle and minify CSS-Files

           bundles.Add(new StyleBundle("~/Css/App").Include(
           "~/Content/Css/app/default.css",
           "~/Content/Css/app/fonts.css",
           "~/Content/Css/app/misc.css"));

           // Bundle and minify JS-Files

           bundles.Add(new ScriptBundle("~/Scripts/jQueryPlugins").Include(
           "~/Scripts/plugins/jQuery/jquery-{version}.js"
           "~/Scripts/plugins/modernizr/modernizr-{version}.js",
           "~/Scripts/plugins/uniform/jquery.uniform-{version}.js",
           "~/Scripts/plugins/fancybox/jquery.fancybox-{version}.js",
           "~/Scripts/plugins/fancybox/helpers/jquery.fancybox.media.js",
           "~/Scripts/plugins/slider/jquery.anythingslider-{version}.js"))
       }
}

 

What does it do?

The framework is really intelligent. When you debug your solution it will take the *.js and not the *.min.js – you can finally read the errors, yay! When you deploy your solution it will take the *.min.js. If you don’t have a minified file, the framework will create one for you.

The {version} wildcard is used to find the appropriate version in your specified folder. You can just replace the scripts with a newer version and it will still work.

There are also other wildcards:

Include(“~/Scripts/*.js”) Includes all files in this folder ending with .js
Include(“~/Scripts/T*”) Includes all files starting with T
IncludeDirectory("~/Scripts/Common", "T*") Includes all files from a directory starting with T
IncludeDirectory("~/Scripts/Common", "T*", true) Includes all files from a directory and their subdirectory starting with T

 

It’s also possible to use CDN – read this blog for more information.

 

How can I use it in my view?

That’s simple:

<!DOCTYPE html>
<html lang="en">
<head>
        <!— Css styles -->
        @Styles.Render("~/Css/App")

        <!— JavaScripts -->
        @Scripts.Render("~/Scripts/jQueryPlugins")

When you now go to your page it will render them as <link href="” /> or <style></style>. You maybe wonder why there are still all files and no bundles. That’s because you’re in the debug mode.

There are two ways to look how the files will be bundled when you deploy:

In your BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
{
    ...
    BundleTable.EnableOptimizations = true;
    ...
}

or in the web.config under <system.web>:

<system.web>
    …
    <compilation debug="true" />
    
</system.web>

Our example will look like this (9 Files are now just 2 Files and 2 requests!):

<link href="/Css/App?v=XQH--hwVZMXp37dcg2cYZsYyLPQwSAeAThBNvfCoKNg1" rel="stylesheet"/>
<script src="/Scripts/jQueryPlugins?v=VkoVq1mQbGLTF-mnMPoRBsMFqW3de6Af63nFFWBXB741"></script>

 

Additional features

You maybe know this issue. Every time you deploy a new version and replace the CSS- and JS-Files you have to clear the browser cache. For a developer that’s not a problem, but the customer has to do that as well.

The optimization framework solves this by adding ?v={Token} on all your bundles. The browser can still cache the file, but when you change any file in the bundle, it will generate a new token and the browser has to load the new file and cache it.

The bundles also work together with the Browser Link in Visual Studio 2013. When you update the CSS-File, the bundle will take care of it and show you the changes immediately on the page without clicking F5! Isn’t it cool?

 

LESS Bundling

If you have never heard of LESS you should try it: http://lesscss.org
We have been using it since last week and we love it!

Unfortunately the implemented less compiler in the optimization framework cannot compile v1.6.3 of less.

Read this blog, when you want to compile v1.6.3 in your bundles. 

If you want to compile older versions you will find the requirements here.


kommentieren


0 Kommentar(e):