这里作为这个问题的扩展 Linking JavaScript Libraries in User Controls我正在寻找一些关于人们如何在运行中或在构建时连接和缩小 JavaScript 的示例。我还想看看它如何在您的母版页中发挥作用。
我不介意页面特定的文件被缩小和单独链接，因为它们目前是这样的(见下文)但是主母版页上的所有 JavaScript 文件(我有大约 5 或 6 个)我想要连接和缩小。
任何还结合了 CSS 连接和缩小的人都会得到加分! :-)
当前母版页，包含我想要连接和缩小的常见 JavaScript 文件:
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<head runat="server">
... BLAH ...
<asp:ContentPlaceHolder ID="AdditionalHead" runat="server" />
... BLAH ...
<%= Html.CSSBlock("/styles/site.css") %>
<%= Html.CSSBlock("/styles/jquery-ui-1.7.1.css") %>
<%= Html.CSSBlock("/styles/jquery.lightbox-0.5.css") %>
<%= Html.CSSBlock("/styles/ie6.css", 6) %>
<%= Html.CSSBlock("/styles/ie7.css", 7) %>
<asp:ContentPlaceHolder ID="AdditionalCSS" runat="server" />
</head>
<body>
... BLAH ...
<%= Html.JSBlock("/scripts/jquery-1.3.2.js", "/scripts/jquery-1.3.2.min.js") %>
<%= Html.JSBlock("/scripts/jquery-ui-1.7.1.js", "/scripts/jquery-ui-1.7.1.min.js") %>
<%= Html.JSBlock("/scripts/jquery.validate.js", "/scripts/jquery.validate.min.js") %>
<%= Html.JSBlock("/scripts/jquery.lightbox-0.5.js", "/scripts/jquery.lightbox-0.5.min.js") %>
<%= Html.JSBlock("/scripts/global.js", "/scripts/global.min.js") %>
<asp:ContentPlaceHolder ID="AdditionalJS" runat="server" />
</body>
在这样的页面中使用(我很满意):
<asp:Content ID="signUpContent" ContentPlaceHolderID="AdditionalJS" runat="server">
<%= Html.JSBlock("/scripts/pages/account.signup.js", "/scripts/pages/account.signup.min.js") %>
</asp:Content>
更新目前(2013 年底)的建议:
我会看看 Microsoft ASP.NET 的内置 Bundling and Minification .
最佳答案
试试这个:
我最近在工作中完成了相当多的研究和后续开发工作，这些工作大大提高了我们网络应用程序前端的性能。我想我应该在这里分享基本的解决方案。
显而易见的第一件事是使用 Yahoo 的 YSlow 和 Google 的 PageSpeed 对您的网站进行基准测试。这些将突出“唾手可得的果实”性能改进。除非您已经这样做了，否则生成的建议几乎肯定会包括组合、缩小和 gzip 压缩您的静态内容。
我们要执行的步骤是:
编写自定义 HTTPHandler 来组合和缩小 CSS。 编写一个自定义的 HTTPHandler 来组合和缩小 JS。 包括一种机制以确保上述仅在应用程序未处于 Debug模式时才发挥其魔力。 编写自定义服务器端 Web 控件以轻松维护 css/js 文件包含。 在 IIS 6 上启用某些内容类型的 GZIP。 对了，让我们从实现.NET IHttpHandler 接口(interface)的CSSHandler.asax 开始:
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;
namespace WebApplication1
{
public class CssHandler : IHttpHandler
{
public bool IsReusable { get { return true; } }
public void ProcessRequest(HttpContext context)
{
string[] cssFiles = context.Request.QueryString["cssfiles"].Split(',');
List<string> files = new List<string>();
StringBuilder response = new StringBuilder();
foreach (string cssFile in cssFiles)
{
if (!cssFile.EndsWith(".css", StringComparison.OrdinalIgnoreCase))
{
//log custom exception
context.Response.StatusCode = 403;
return;
}
try
{
string filePath = context.Server.MapPath(cssFile);
string css = File.ReadAllText(filePath);
string compressedCss = Yahoo.Yui.Compressor.CssCompressor.Compress(css);
response.Append(compressedCss);
}
catch (Exception ex)
{
//log exception
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0"; //your dynamic version number
context.Response.ContentType = "text/css";
context.Response.AddFileDependencies(files.ToArray());
HttpCachePolicy cache = context.Response.Cache;
cache.SetCacheability(HttpCacheability.Public);
cache.VaryByParams["cssfiles"] = true;
cache.SetETag(version);
cache.SetLastModifiedFromFileDependencies();
cache.SetMaxAge(TimeSpan.FromDays(14));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
}
}
}
好的，现在解释一下:
IsReUsable 属性:
我们不处理任何特定于实例的事情，这意味着我们可以安全地重用处理程序的同一个实例来处理多个请求，因为我们的 ProcessRequest 是线程安全的。更多信息。
ProcessRequest 方法:
这里没有太忙的事情。我们正在遍历提供给我们的 CSS 文件(请参阅下面的 CSSControl 以了解它们是如何进入的)并使用 Yahoo 的 YUICompressor 的 .NET 端口压缩每个文件，然后再将内容添加到传出响应流。
该方法的其余部分涉及设置一些 HTTP 缓存属性，以进一步优化浏览器客户端下载(或不下载，视情况而定)内容的方式。
我们在代码中设置了 Etag，以便它们在我们服务器场的所有机器上都相同。 我们在实际文件上设置了 Response 和 Cache 依赖项，因此，如果它们被替换，缓存将失效。 我们设置可缓存性以便代理可以缓存。 我们 VaryByParams 使用我们的 cssfiles 属性，这样我们就可以缓存通过处理程序提交的每个 CSS 文件组。 这里是 CSSControl，一个继承 .NET LiteralControl 的自定义服务器端控件。
正面:
<customcontrols:csscontrol id="cssControl" runat="server">
<CustomControls:Stylesheet File="main.css" />
<CustomControls:Stylesheet File="layout.css" />
<CustomControls:Stylesheet File="formatting.css" />
</customcontrols:csscontrol>
返回:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;
using TTC.iTropics.Utilities;
namespace WebApplication1
{
[DefaultProperty("Stylesheets")]
[ParseChildren(true, "Stylesheets")]
public class CssControl : LiteralControl
{
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public List<Stylesheet> Stylesheets { get; set; }
public CssControl()
{
Stylesheets = new List<Stylesheet>();
}
protected override void Render(HtmlTextWriter output)
{
if (HttpContext.Current.IsDebuggingEnabled)
{
const string format = "<link rel=\"Stylesheet\" href=\"stylesheets/{0}\"></link>";
foreach (Stylesheet sheet in Stylesheets)
output.Write(format, sheet.File);
}
else
{
const string format = "<link type=\"text/css\" rel=\"Stylesheet\" href=\"stylesheets/CssHandler.ashx?cssfiles={0}&version={1}\"/>";
IEnumerable<string> stylesheetsArray = Stylesheets.Select(s => s.File);
string stylesheets = String.Join(",", stylesheetsArray.ToArray());
string version = "1.00" //your version number
output.Write(format, stylesheets, version);
}
}
}
public class Stylesheet
{
public string File { get; set; }
}
}
HttpContext.Current.IsDebuggingEnabled 已连接到您的 web.config 中的以下设置:
<system.web>
<compilation debug="false">
</system.web>
所以，基本上，如果您的网站处于 Debug模式，您会得到如下 HTML 标记:
<link rel="Stylesheet" href="stylesheets/formatting.css"></link>
<link rel="Stylesheet" href="stylesheets/layout.css"></link
<link rel="Stylesheet" href="stylesheets/main.css"></link>
但如果您处于生产模式 (debug=false)，您将获得如下标记:
<link type="text/css" rel="Stylesheet" href="CssHandler.ashx?cssfiles=main.css,layout.css,formatting.css&version=1.0"/>
后者显然会调用 CSSHandler，它会负责组合、缩小和缓存您的静态 CSS 内容。
以上所有内容都可以复制到你的静态 JavaScript 内容中:
`JSHandler.ashx:
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web;
namespace WebApplication1
{
public class JSHandler : IHttpHandler
{
public bool IsReusable { get { return true; } }
public void ProcessRequest(HttpContext context)
{
string[] jsFiles = context.Request.QueryString["jsfiles"].Split(',');
List<string> files = new List<string>();
StringBuilder response = new StringBuilder();
foreach (string jsFile in jsFiles)
{
if (!jsFile.EndsWith(".js", StringComparison.OrdinalIgnoreCase))
{
//log custom exception
context.Response.StatusCode = 403;
return;
}
try
{
string filePath = context.Server.MapPath(jsFile);
files.Add(filePath);
string js = File.ReadAllText(filePath);
string compressedJS = Yahoo.Yui.Compressor.JavaScriptCompressor.Compress(js);
response.Append(compressedJS);
}
catch (Exception ex)
{
//log exception
context.Response.StatusCode = 500;
return;
}
}
context.Response.Write(response.ToString());
string version = "1.0"; //your dynamic version number here
context.Response.ContentType = "application/javascript";
context.Response.AddFileDependencies(files.ToArray());
HttpCachePolicy cache = context.Response.Cache;
cache.SetCacheability(HttpCacheability.Public);
cache.VaryByParams["jsfiles"] = true;
cache.VaryByParams["version"] = true;
cache.SetETag(version);
cache.SetLastModifiedFromFileDependencies();
cache.SetMaxAge(TimeSpan.FromDays(14));
cache.SetRevalidation(HttpCacheRevalidation.AllCaches);
}
}
}
及其附带的 JSControl:
正面:
<customcontrols:JSControl ID="jsControl" runat="server">
<customcontrols:Script File="jquery/jquery-1.3.2.js" />
<customcontrols:Script File="main.js" />
<customcontrols:Script File="creditcardpayments.js" />
</customcontrols:JSControl>
返回:
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Linq;
namespace WebApplication1
{
[DefaultProperty("Scripts")]
[ParseChildren(true, "Scripts")]
public class JSControl : LiteralControl
{
[PersistenceMode(PersistenceMode.InnerDefaultProperty)]
public List<Script> Scripts { get; set; }
public JSControl()
{
Scripts = new List<Script>();
}
protected override void Render(HtmlTextWriter writer)
{
if (HttpContext.Current.IsDebuggingEnabled)
{
const string format = "<script src=\"scripts\\{0}\"></script>";
foreach (Script script in Scripts)
writer.Write(format, script.File);
}
else
{
IEnumerable<string> scriptsArray = Scripts.Select(s => s.File);
string scripts = String.Join(",", scriptsArray.ToArray());
string version = "1.0" //your dynamic version number
const string format = "<script src=\"scripts/JsHandler.ashx?jsfiles={0}&version={1}\"></script>";
writer.Write(format, scripts, version);
}
}
}
public class Script
{
public string File { get; set; }
}
}
启用 GZIP:
正如 Jeff Atwood 所说，在您的网站服务器上启用 Gzip 是轻而易举的事。经过一番追踪，我决定对以下文件类型启用 Gzip:
.css .js .axd(微软 Javascript 文件) .aspx(通常的 ASP.NET Web 表单内容) .ashx(我们的处理程序) 要在您的 IIS 6.0 Web 服务器上启用 HTTP 压缩:
打开 IIS，右键单击网站，服务选项卡，启用压缩应用程序文件和压缩静态文件 停止 IIS 在记事本中打开 IIS 元数据库 (C:\WINDOWS\system32\inetsrv\MetaBase.xml) – 如果您对这些事情感到紧张，请进行备份 使用以下内容找到并覆盖两个 IIsCompressionScheme 和一个 IIsCompressionSchemes 元素:
就是这样!这为我们节省了大量带宽，并导致整个 Web 应用程序的响应速度更快。
尽情享受吧!
关于c# - 动态连接和缩小 JavaScript 或在构建时 - ASP.NET MVC，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/890561/