javascript 在 .net 中缩小和合并文件

Minifying and combining files in .net

提问by amateur

I am looking at implementing some performance optimization around my javascript/css. In particular looking to achieve the minification and combining of such. I am developing in .net/c# web applications.

我正在考虑围绕我的 javascript/css 实现一些性能优化。特别是希望实现此类的缩小和组合。我正在开发 .net/c# web 应用程序。

I have a couple of options and looking for feedback on each:

我有几个选项，并在每个选项中寻找反馈：

First one is this clever tool I came across Chirpy which via visual studio combines, minifies etc -> http://chirpy.codeplex.com/This is a visual studio add in but as I am in a team environment, this tool isnt ideal.

第一个是我遇到的这个聪明的工具 Chirpy，它通过 Visual Studio 组合、缩小等 -> http://chirpy.codeplex.com/这是一个 Visual Studio 插件，但因为我在团队环境中，所以这个工具并不理想.

My next option is to use an Msbuild task (http://yuicompressor.codeplex.com/) to minify the files and also combine them (maybe read from an xml file what needs to be combined). While this works for minifying fine, the concern I have is that I will have to maintain what must be combined which could be a headache.

我的下一个选择是使用 Msbuild 任务（http://yuicompressor.codeplex.com/）来缩小文件并组合它们（可能从 xml 文件中读取需要组合的内容）。虽然这可以很好地缩小，但我担心的是我将不得不维护必须组合的东西，这可能会让人头疼。

3rd option is to use msbuild task just for the minifying and at runtime using some helper classes, combine the files on a per page basis. This would combine the files, give it a name and add a version to it.

第三个选项是使用 msbuild 任务仅用于缩小和在运行时使用一些帮助程序类，在每页的基础上组合文件。这将组合这些文件，为其命名并为其添加一个版本。

Any other options I could consider? My concern with the last option is that it may have performance issues as I would have to open the file from the local drive, read its contents and then combine the files. This is alot of processing at run time. I was looking at something like Squishit - https://github.com/jetheredge/SquishIt/downloadsThis minifies the files at run time but I would look at doing this at compile time.

我可以考虑的任何其他选择吗？我对最后一个选项的担忧是它可能存在性能问题，因为我必须从本地驱动器打开文件，读取其内容，然后合并文件。这是运行时的大量处理。我在看像 Squishit 这样的东西 - https://github.com/jetheredge/SquishIt/downloads这会在运行时缩小文件，但我会在编译时考虑这样做。

So any feedback on my approaches would be great? If the 3rd option would not cause performance issues, I am leading towards it.

那么对我的方法的任何反馈都会很棒吗？如果第 3 个选项不会导致性能问题，那么我将走向它。

采纳答案by Matt

We have done something similar with several ASP.NET web applications. Specifically, we use the Yahoo Yui compressor, which has a .NET library version which you can reference in your applications.

我们对几个 ASP.NET Web 应用程序做了类似的事情。具体来说，我们使用Yahoo Yui 压缩器，它有一个 .NET 库版本，您可以在您的应用程序中引用它。

The approach we took was to generate the necessary merged/minified files at runtime. We wrapped all this logic up into an ASP.NET control, but that isn't necessary depending on your project.

我们采用的方法是在运行时生成必要的合并/缩小文件。我们将所有这些逻辑包装到一个 ASP.NET 控件中，但这不是必需的，具体取决于您的项目。

• The first time a request is made for a page, we process through the list of included JS and CSS files. In a separate thread (so the original request returns without delay) we then merged the included files together (1 for JS, 1 for CSS), and then apply the Yui compressor.
• The result is then written to disk for fast reference in the future
• On subsequent requests, the page first looks for the minified versions. If found, it just serves those up. If not, it goes through the process again.

• 第一次对页面发出请求时，我们会处理包含的 JS 和 CSS 文件列表。在一个单独的线程中（因此原始请求不会延迟返回），然后我们将包含的文件合并在一起（1 个用于 JS，1 个用于 CSS），然后应用 Yui 压缩器。
• 然后将结果写入磁盘以供将来快速参考
• 在后续请求中，页面首先查找缩小版本。如果找到，它只会为这些服务。如果没有，它会再次经历这个过程。

As some icing to the cake:

锦上添花：

• For debug purposes, if the query string ?debug=true is present, the merged/minified resources are ignored and the original individual files are served instead (since it can be hard to debug optimized JS)

• 出于调试目的，如果查询字符串 ?debug=true 存在，合并/缩小的资源将被忽​​略，而是提供原始的单个文件（因为很难调试优化的 JS）

We have found this process to work exceptionally well. We built it into a library so all our ASP.NET sites can take advantage. The post-build scripts can get complicated if each page has different dependencies, but the run-time can determine this quite easily. And, if someone needs to make a quick fix to a CSS file, they can do so, delete the merged versions of the file, and the process will automatically start over without need to do post-build processing with MSBuild or NAnt.

我们发现这个过程非常有效。我们将它构建到一个库中，以便我们所有的 ASP.NET 站点都可以利用。如果每个页面具有不同的依赖项，构建后脚本可能会变得复杂，但运行时可以很容易地确定这一点。而且，如果有人需要对 CSS 文件进行快速修复，他们可以这样做，删除文件的合并版本，该过程将自动重新开始，无需使用 MSBuild 或 NAnt 进行构建后处理。

回答by Matt Wrock

RequestReduceprovides a really nice solution for combining and minifying javascript and css at run time. It will also attempt to sprite your background images. It caches the processed files and serves them using custom ETags and far future headers. RequestReduceuses a response filter to transform the content so no code or configuration is needed for basic functionality. It can be configured to work in a web farm environment and sync content accross several servers and can be configured to point to a CDN. It can be downloaded at http://www.RequestReduce.comor from Visual Studio via Nuget. The source is available at https://github.com/mwrock/RequestReduce.

RequestReduce为在运行时组合和缩小 javascript 和 css 提供了一个非常好的解决方案。它还将尝试对您的背景图像进行精灵。它缓存处理过的文件并使用自定义 ETag 和未来的标头为它们提供服务。RequestReduce使用响应过滤器来转换内容，因此基本功能不需要代码或配置。它可以配置为在 Web 场环境中工作并跨多个服务器同步内容，并且可以配置为指向 CDN。它可以从http://www.RequestReduce.com或通过 Nuget 从 Visual Studio 下载。源可在https://github.com/mwrock/RequestReduce 获得。

回答by danfromisrael

have you heard of Combres ? go to : http://combres.codeplex.comand check it out

你听说过 Combres 吗？去：http: //combres.codeplex.com并检查出来

it minifies your CSS and JS files at Runtime meaning you can change any file and upload it and each request the client does it minifies it. all you gotta do is add the files u wanna compress to a list in the combres XML file and just call the list from your page / masterpage.

它会在运行时缩小您的 CSS 和 JS 文件，这意味着您可以更改任何文件并上传它，并且客户端所做的每个请求都会缩小它。您所要做的就是将您想要压缩的文件添加到combres XML 文件中的列表中，然后从您的页面/母版页中调用该列表。

if you are using VS2010 you can easily install it on your project using NuGet here's the Combres NuGet link: http://combres.codeplex.com/wikipage?title=5-Minute%20Quick%20Start

如果您使用的是 VS2010，您可以使用 NuGet 轻松将其安装到您的项目中，这里是 Combres NuGet 链接：http://combres.codeplex.com/wikipage?title=5-Minute%20Quick%20Start

回答by Markis

Microsoft's Ajax minifieris suprisingly good as a minification tool. I wrote a blog post on combining files and using their minifier in a javascript and stylesheet handler:

微软的 Ajax 压缩器作为一种压缩工具出奇地好。我写了一篇关于在 javascript 和样式表处理程序中组合文件和使用它们的压缩器的博客文章：

http://www.markistaylor.com/javascript-concatenating-and-minifying/

http://www.markistaylor.com/javascript-concatenating-and-minifying/

回答by Tomas Jansson

I did a really nice solution to this a couple of years back but I don't have the source left. The solution was for webforms but it should work fine to port it to MVC. I'll give it a try to explain what I did in some simple step. First we need to register the scripts and we wrote a special controller that did just that. When the controller was rendered it did three things:

几年前我为此做了一个非常好的解决方案，但我没有剩下的来源。该解决方案适用于 webforms，但将其移植到 MVC 应该可以正常工作。我将尝试通过一些简单的步骤来解释我所做的事情。首先，我们需要注册脚本，然后我们编写了一个特殊的控制器来做到这一点。当控制器被渲染时，它做了三件事：

1. Minimize all the files, I think we used the YUI compression
2. Combine all the files and store as string
3. Calculate a hash for the string of the combined files and use that as a virtual filename. You store the string of combined files in a cached dictionary on the server with the hash value as key, the html that is rendered needs to point to a special folder where the "scripts" are located.

1. 最小化所有文件，我想我们使用了 YUI 压缩
2. 合并所有文件并存储为字符串
3. 计算组合文件字符串的哈希值，并将其用作虚拟文件名。您将组合文件的字符串以哈希值作为键存储在服务器上的缓存字典中，呈现的 html 需要指向“脚本”所在的特殊文件夹。

The next step is to implement a special HttpHandler that handles request for files in the special folder. When a request is made to that special folder you make a lookup in the cached dictionary and returns the string bascially.

下一步是实现一个特殊的 HttpHandler 来处理对特殊文件夹中文件的请求。当对该特殊文件夹发出请求时，您在缓存的字典中进行查找并基本返回字符串。

One really nice feature of this is that the returned script is always valid so the user will never have to ask you for an update of the script. The reason for that is when you make a change to any of the script files the hash value will change and the client will ask for a new script.

一个非常好的特性是返回的脚本始终有效，因此用户永远不必要求您更新脚本。原因是当您对任何脚本文件进行更改时，哈希值都会更改，并且客户端会要求提供新脚本。

You can use this for css-files as well with no problems. I remebered making it configurable so you could turn off combine files, minimize files, or just exclude one file from the process if you wanted to do some debugging.

您也可以毫无问题地将其用于 css 文件。我记得把它设置为可配置的，这样你就可以关闭合并文件、最小化文件，或者如果你想做一些调试，就从进程中排除一个文件。

I might have missed some details, but it wasn't that hard to implement and it turned out very well.

我可能遗漏了一些细节，但实施起来并不难，而且结果非常好。

Update:I've implemented a solution for MVC and released it on nugetand have the source up on github.

更新：我已经为 MVC 实现了一个解决方案，并在nuget上发布了它，并将源代码放在github 上。

回答by g t

It's worthwhile combining the files at run time to avoid having to synchronise new versions. However, once they are programmatically combined, cache them to disk. Then the code which runs each time the files are fetched need only check that the files haven't changed before serving the cached version.

值得在运行时组合文件以避免必须同步新版本。但是，一旦以编程方式组合它们，就将它们缓存到磁盘。然后每次获取文件时运行的代码只需要在提供缓存版本之前检查文件是否没有更改。

If they have changed, then the compression code can run as a one-off. Whilst there will be a slight performance cost, you will also receive a performance benefit from fewer file requests.

如果它们发生了变化，那么压缩代码可以一次性运行。虽然会有轻微的性能成本，但您还将从更少的文件请求中获得性能优势。

This is the approach that the Minifytool uses to compress JS/CSS, which has worked really well for me. It's Linux/PHP only, but you might get some more ideas there too.

这是Minify工具用来压缩 JS/CSS 的方法，对我来说效果非常好。它仅适用于 Linux/PHP，但您也可能会在那里获得更多想法。

回答by AlliterativeAlice

I needed a solution for combining/minifying CSS/JS on a .NET 2.0 web app and SquishIt and other tools I found weren't .NET 2.0-compatible, I created my own solution that uses a syntax similar to SquishIt but is compatible with .NET 2.0. Since I thought other people might find it useful I put it up on Github. You can find it here: https://github.com/AlliterativeAlice/simpleyui

我需要一个解决方案来组合/缩小 .NET 2.0 Web 应用程序和 SquishIt 上的 CSS/JS 以及我发现与 .NET 2.0 不兼容的其他工具，我创建了自己的解决方案，该解决方案使用类似于 SquishIt 的语法但与.NET 2.0。因为我认为其他人可能会觉得它有用，所以我把它放在了 Github 上。你可以在这里找到它：https: //github.com/AlliterativeAlice/simpleyui