使用 Asp.Net 进行 CSS/JS GZip 压缩答案

【问题标题】：CSS/JS GZip Compression with Asp.Net使用 Asp.Net 进行 CSS/JS GZip 压缩
【发布时间】：2009-03-21 05:11:52
【问题描述】：

我目前在托管的虚拟服务器上，我想为我的 Asp.Net 3.5 站点启用 GZip 压缩，我该如何开始？

我尝试过使用“打包”的 JS 文件，但它们不起作用，我假设是因为它们没有被正确处理...？

【问题讨论】：

标签： asp.net javascript iis compression gzip

【解决方案1】：

GZIP 应该由 IIS 处理，你运行的是什么版本的 IIS？

客户端负责向服务器请求 GZiped 版本。服务器会找两个东西，请求是http 1.1，一个是Accept-Encoding: gzip的header。查找这些标头的一种简单方法是使用firebug

IIS6 - 可以通过 iis 管理单元启用 GZip。 Microsofts MSDN Topic On Gzip With IIS6

IIS7 - 可以通过 web.config 使用 httpCompression xml 标签 Nick Berardi's Getting IIS 7 to Compress JavaScript 启用 GZip

通过压缩和打包 javascript 文件，您可以通过删除空格和缩短变量名称来减小 JavaScript 的总大小。

【讨论】：

伟大的 IIS6 演练：engineering.leads360.com/post/9301650692/…

【解决方案2】：

我的首选方法是使用像YUI Compressor 这样的压缩工具，并将其作为构建过程的一部分（缩小后，压缩率不会那么高。或者你可以同时使用两者。要点是你不应该错过下面给出的更大的性能问题）。

IIS 压缩的主要问题之一是它不会将所有 JS/CSS 文件打包到一个文件中。因此，如果您的站点有 7 个 JS 文件和 20 个 CSS（令人惊讶的是，这很常见），则需要 27 个 HTTP 往返来获取您的数据。编写一个 HTTP 处理程序来执行此操作对于共享主机的人来说是一个好主意。

一个简单的构建算法是在 JS/CSS 根目录中有一个 make 文件

If(build.config == release) {
Add your js file in order to the make files.
    e.g. jQuery.js jQuery.form.js  jQuery.container.js custom.js 
Split and pass it as params to YUI
Compress
O/P to site.js 
Delete all the above files.
}

在发布模式下，你的页面主应该只引用 site.js

编辑：这是一个 link，用于集成 YUI 和 nant。
编辑：Justin Etheredge 发布了一个很棒的工具来组合和压缩 css/js名为SquishIt 的文件。

【讨论】：

【解决方案3】：

您也可以使用代码对脚本进行 GZip。它的工作方式是使用 ASP.NET 页面来传递压缩文件以及正确的标题（告诉浏览器此流已压缩）。我写了一篇文章如何利用 GZip 压缩以及缩小（使用 YUI）和捆绑脚本（减少到服务器的往返次数），您可以在 http://www.codeproject.com/KB/custom-controls/smartinclude.aspx

找到它

【讨论】：

【解决方案4】：

我一直在为我的 CSS 缩小使用一个方便的小型服务器控件，称为 StyleManager。它在引擎盖下使用 YUI Compressor。

添加到您的站点比手动添加 YUI C 更容易，而且它的用法很像 asp.net 的 ScriptManager，所以很快就习惯了。

最重要的是 - 它还结合了您的 CSS 文件。因此，无需下载 10 个 CSS 文件，只需 1 个，这些文件也将被压缩等。

看看 - gStyleManager.com

【讨论】：

【解决方案5】：

我认为 IIS 是配置它的地方。如果您不能直接更改 IIS，您可以将处理程序添加到所有检查 Accept-Encoding: gzip 或 deflate 设置的请求。然后你使用SharpZipLib 之类的东西进行正确的压缩。然而，这很快就会变得笨拙。

您会发现手动 gzip 压缩静态文件（如 css 或 js）的成功率有限。假设您在 html 中包含 styles.css.gz 和 scripts.js.gz，并且您将 gz 扩展名映射到 gzip 压缩文本的 mimetype（是 application/x-gzip 吗？）很多浏览器（即 firefox、safari，也许是 chrome）都会处理就好了。但有些浏览器不会，而且您将它们排除在外（链接，也许是旧歌剧）。

【讨论】：

【解决方案6】：

我会考虑使用“deflate”，因为它比 GZip 更有效。我已经为两者添加了代码。

要将此添加到您的站点，请创建一个文本文件并将未提供的代码复制粘贴到该文件中，然后将其另存为 Global.asax。现在，将此文件添加到您网站的根目录。

<%@ Application Language="C#" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.IO.Compression" %>
<script runat="server">
void Application_PreRequestHandlerExecute(object sender, EventArgs e)
    {
        HttpApplication app = sender as HttpApplication;
        string acceptEncoding = app.Request.Headers["Accept-Encoding"];
        Stream prevUncompressedStream = app.Response.Filter;

        if (!(app.Context.CurrentHandler is Page ||
            app.Context.CurrentHandler.GetType().Name == "SyncSessionlessHandler") ||
            app.Request["HTTP_X_MICROSOFTAJAX"] != null)
            return;

        if (acceptEncoding == null || acceptEncoding.Length == 0)
            return;

        acceptEncoding = acceptEncoding.ToLower();

    if (acceptEncoding.Contains("deflate") || acceptEncoding == "*")
        {
        // defalte
            app.Response.Filter = new DeflateStream(prevUncompressedStream,
                CompressionMode.Compress);
            app.Response.AppendHeader("Content-Encoding", "deflate");
        }
        else if (acceptEncoding.Contains("gzip"))
        {
            // gzip
            app.Response.Filter = new GZipStream(prevUncompressedStream,
                CompressionMode.Compress);
            app.Response.AppendHeader("Content-Encoding", "gzip");
        }
    }
</script>

【讨论】：

【解决方案7】：

上一篇文章适用于 aspx 页面，但不适用于 css 和 js 文件。在压缩中包含css 和js 文件的技巧是：

将.css 和.js 文件的文件扩展名更改为.css.aspx 和.js.aspx
在.css.aspx 和.js.aspx 文件中插入<%@ Page ContentType="text/css" %> 和<%@ Page ContentType="text/javascript" %>
在您的页面中包含 .css.aspx 和 .js.aspx 文件，而不是 .css 和 .js 文件

【讨论】：