利用ASP.NET WebForm4.5的新特性Bundling压缩css js

关于前端优化，相信大家都知道yahoo出品的yslow的Firefox插件，yslow可以对网站的页面进行分析，指示需要优化的部分。关于yslow优化详细见Best Practices for Speeding Up Your Web Site，之后才出现 css sprite、压缩css/js的工具，目的都是为了减少http请求。

在ASP.NET Web Form4.5中，Bundle类提供了此功能。

Global.asax.cs代码

void Application_Start(object sender, EventArgs e)
{
    // 在应用程序启动时运行的代码
    BundleTable.EnableOptimizations = true;
    ScriptBundle baseScriptBundle = new ScriptBundle("~/js/basev1");
    baseScriptBundle.Include("~/Scripts/jquery-1.8.2.min.js");
    ScriptBundle scriptBundle = new ScriptBundle("~/js/plusv1");
    scriptBundle.Include("~/Scripts/jquery.cookies.2.2.0.min.js",
        "~/Scripts/jquery.easyui.min.js",
        "~/Scripts/jquery.form-2.4.3.js",
        "~/Scripts/jquery.jPrintArea.js",
        "~/Scripts/jquery.jtimepicker.js",
        "~/Scripts/json2.js"
        );

    scriptBundle.Orderer = new NullOrderer();

    StyleBundle cssBundle = new StyleBundle("~/style/allv1");
    cssBundle.Include("~/styles/Site.css");
    BundleTable.Bundles.Add(cssBundle);
    BundleTable.Bundles.Add(baseScriptBundle);
    BundleTable.Bundles.Add(scriptBundle);

}

 

前端使用

<link href="/style/allv1" rel="stylesheet" type="text/css"/>
   <script src="/js/basev1" type="text/javascript"></script>
   <script src="/js/plusv1" type="text/javascript"></script>

注意：使用vs2010 需要引用以下 dll

BundleTransformer.Core.dll

BundleTransformer.MicrosoftAjax.dll

Microsoft.Web.Infrastructure.dll

System.Web.Optimization.dll

WebGrease.dll

当然还可以通过配置文件来处理

<?xml version="1.0" encoding="utf-8" ?>
<root>
  <scripts>
    <script path="~/js/basev1">
      <file>~/Scripts/jquery-1.8.2.min.js</file>
    </script>
    <script path="~/js/plusv1">
      <file>~/Scripts/jquery.cookies.2.2.0.min.js</file>
      <file>~/Scripts/jquery.easyui.min.js</file>
      <file>~/Scripts/jquery.form-2.4.3.js</file>
      <file>~/Scripts/jquery.jPrintArea.js</file>
      <file>~/Scripts/jquery.jPrintArea.js</file>
      <file>~/Scripts/json2.js</file>
    </script>
  </scripts>
  <styles>
    <style path="~/style/allv1">
      <file>~/styles/Site.css</file>
    </style>
  </styles>
</root>

 

Global.asax.cs 代码

XmlDocument doc = new XmlDocument();
doc.Load(HttpContext.Current.Server.MapPath("~/BundleConfig.xml"));

XmlNodeList scriptList = doc.DocumentElement.SelectNodes("scripts/script");
if (scriptList!=null&&scriptList.Count>0)
{
    foreach (XmlNode node in scriptList)
    {
       string virtualPath  =node.Attributes["path"].Value.Trim();
       if (!string.IsNullOrEmpty(virtualPath))
       {
           var scriptBundle = new ScriptBundle(virtualPath);
           foreach (XmlNode fileNode in node.ChildNodes)
           {
               scriptBundle.Include(fileNode.InnerText.Trim());
           }
           BundleTable.Bundles.Add(scriptBundle);
       }
    }
}
XmlNodeList cssList = doc.DocumentElement.SelectNodes("styles/style");
if (cssList != null && cssList.Count > 0)
{
    foreach (XmlNode node in cssList)
    {
        string virtualPath = node.Attributes["path"].Value.Trim();
        if (!string.IsNullOrEmpty(virtualPath))
        {
            var cssBundle = new StyleBundle(virtualPath);
            foreach (XmlNode fileNode in node.ChildNodes)
            {
                cssBundle.Include(fileNode.InnerText.Trim());
            }
            BundleTable.Bundles.Add(cssBundle);
        }

    }
}

 

压缩前后对比

压缩前

压缩后

F5 刷新

头信息

下载代码