[Tutorial] MVC 4 Java/Css bundles compression solution RSS

• • Reply
  

  sp00k

  Participant

  1916 Points

  435 Posts

  [Tutorial] MVC 4 Java/Css bundles compression solution

  May 25, 2012 03:40 PM|LINK

  Hi, i am Jonas i've been testing the mvc 4 bundling.

  i been searching google today on how to use the bundling in mvc 3 because i want to use it in a huge project.

  google will tell you anything on how to make these bundles but i wanted my bundles not only minified

  i wanted them compressed... so i began searching for how to compress and found out there actually was no method.

  so here is my solution in compressing your bundles

  so let's start with the tricky part let's say your javascripts are in ~/scripts/ normally we make a bundletable.resolveurl("~/scripts/js")

  that's what makes them pass the compression of iis 7.. the first but ugliest solution would be adding a web.config file to the ~/scripts folder.

  now the second and better solution would be if we make it a bundletable.resolveurl("~/js") that adds our scripts from the scripts folder... or a few files from there...

  here the code i used to get my compression working and getting a grade a on yslow :)

  //Start Bundle class
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using Microsoft.Web.Optimization;
  
  namespace ScT_Bookey.Bundles
  {
  public class Bundles
  {
  public static void init()
  {
  BundleTable.Bundles.EnableDefaultBundles();
  var bundle = new Bundle("~/css", typeof(CssMinify));
  bundle.AddFile("~/Content/Bookey.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.theme.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.accordion.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.autocomplete.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.button.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.core.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.datepicker.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.dialog.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.progressbar.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.resizable.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.selectable.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.slider.css");
  bundle.AddFile("~/Content/themes/base/jquery.ui.tabs.css");
  BundleTable.Bundles.Add(bundle);
  
  bundle = new Bundle("~/js", typeof(JsMinify));
  bundle.AddDirectory("~/Scripts", "*.js", true);
  BundleTable.Bundles.Add(bundle);
  }
  }
  }
  
  //End Bundle Class
  
  //Start Global.asax
  protected void Application_Start()
  {
  //AreaRegistration.RegisterAllAreas();
  Bundles.Bundles.init();
  
  ViewEngines.Engines.Clear();
  ViewEngines.Engines.Add(new RazorViewEngine());
  RegisterGlobalFilters(GlobalFilters.Filters);
  RegisterRoutes(RouteTable.Routes);
  }
  //End Global.asax
  
  //Start Web.config
  <system.webserver>
  ....
  <httpCompression>
  <remove name="gzip"/>
  <scheme name="gzip" dynamicCompressionLevel="9" staticCompressionLevel="9" doDynamicCompression="true" doStaticCompression="true" dll="%Windir%\system32\inetsrv\gzip.dll"/>
  <dynamicTypes>
  <add mimeType="text/*" enabled="true"/>
  <add mimeType="message/*" enabled="true"/>
  <add mimeType="application/javascript" enabled="true"/>
  <add mimeType="application/x-javascript" enabled="true"/>
  <add mimeType="application/javascript; charset=utf-8" enabled="true"/>
  <!--<add mimeType="*/*" enabled="true"/>-->
  </dynamicTypes>
  <staticTypes>
  <add mimeType="text/*" enabled="true"/>
  <add mimeType="text/css" enabled="true"/>
  <add mimeType="text/javascript" enabled="true"/>
  <add mimeType="message/*" enabled="true"/>
  <add mimeType="application/javascript" enabled="true"/>
  <add mimeType="application/x-javascript" enabled="true"/>
  <add mimeType="application/javascript; charset=utf-8" enabled="true"/>
  <!--<add mimeType="*/*" enabled="true"/>-->
  </staticTypes>
  </httpCompression>
  <staticContent>
  <clientCache cacheControlMaxAge="30.00:00:00" cacheControlMode="UseMaxAge" />
  </staticContent>
  <urlCompression doStaticCompression="true" doDynamicCompression="true" dynamicCompressionBeforeCache="true" />
  
  
  </system.webserver>
  //End web.config

  //Start View
  
      <link href="@Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/css")" rel="stylesheet" type="text/css" />
  
      <script src="@Microsoft.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/js")" type="text/javascript"></script>
  
  //End View

  gzip compression mvc

  Challenge the best, die like the rest.
  • Edited by sp00k on May 25, 2012 03:42 PM
  • Edited by sp00k on May 25, 2012 03:42 PM
  • Edited by sp00k on May 25, 2012 03:42 PM
  • Edited by sp00k on May 25, 2012 04:14 PM
  • Marked as answer by sp00k on May 25, 2012 04:16 PM
  • Moved by bbcompent1 on May 25, 2012 05:48 PM