.SHARP{C#DERS}

This is an old post from my now defunct personal blog

Over time I have learned some techniques to optimize my web app. Here are a few steps to enable this for an MVC site.

First, enable dynamic compression in IIS - http://technet.microsoft.com/en-us/library/cc753681(WS.10).aspx

Install this nuget package in your project: http://nuget.org/packages/microsoft.aspnet.web.optimization 

To enable gzip compression add this to web.config in the system.webserver section

<staticContent>
      <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00"/>
      <remove fileExtension=".js"/>
      <mimeMap fileExtension=".js" mimeType="text/javascript"/>
    </staticContent>
    <urlCompression doDynamicCompression="true" doStaticCompression="true" dynamicCompressionBeforeCache="true"/>
    <httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll"/>
      <dynamicTypes>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="text/javascript" enabled="true"/>
      </dynamicTypes>
      <staticTypes>
        <add mimeType="text/*" enabled="true"/>
        <add mimeType="text/javascript" enabled="true"/>
      </staticTypes>
    </httpCompression>

Add a new class to your project called bundleconfig.vb - preferrably in the App_Start folder as that is where MVC4 will put it in a new project. 

Make bundles of CSS and JS files. Make the paths actually match where the real files are. This part "~/bundles/BaseJS' is up to you. You can call it whatever you want like this "~/bundles/MyAmazingBundle"

Don’t try to bundle .min.js files. Delete all of those and bundle the full versions. (except jquery and jqueryui). Below I made some example bundles for reference. 

Imports System.Web
Imports System.Web.Optimization

Public Class BundleConfig
    Public Shared Sub RegisterBundles(ByVal bundles As BundleCollection)
        bundles.Add(New ScriptBundle("~/bundles/BaseJS").Include(
                    "~/scripts/jquery.validate.js",
                    "~/scripts/jquery.validate.unobtrusive.js",
                    "~/scripts/jquery.unobtrusive-ajax.js",
                    "~/scripts/Javascripts/bootstrap.js"))

        bundles.Add(New ScriptBundle("~/bundles/jquery").Include(
            "~/scripts/jquery-1.7.1.js",
            "~/scripts/jquery-ui-1.8.16.js"))


        bundles.Add(New StyleBundle("~/bundles/sitecss").Include(
                   "~/content/styles.css"))

    End Sub
End Class

Next open global.asax and add this reference

Imports System.Web.Optimization

Then add this to "Application_Start"

BundleConfig.RegisterBundles(BundleTable.Bundles)

I wouldn't minify jquery or jqueryui. Use the Google CDN with a fallback like this. It will be faster:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      if (typeof jQuery == 'undefined') {
          document.write(unescape("%3Cscript src='/YOURPATH/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
      }
    </script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      if (!window.jQuery.ui) {
          document.write(unescape("%3Cscript src='/YOURPATH/jquery-ui-1.8.16.min.js' type='text/javascript'%3E%3C/script%3E"));
      }
    </script>

In your layout add these lines for the bundles you want to use. Add the CSS bundle first. 

@System.Web.Optimization.Styles.Render("~/bundles/sitecss")
@System.Web.Optimization.Scripts.Render("~/bundles/BaseJS")

Finally, web.config has to be set to compilation debug false for the minification to happen. If its set to true it will just spit out a bunch of individual script tags to the raw files (which is perfect for development).