如何处理跨站点的 javascript 和 css 文件？答案

【问题标题】：How to handle javascript & css files across a site?如何处理跨站点的 javascript 和 css 文件？
【发布时间】：2011-03-01 21:07:39
【问题描述】：

我最近对如何处理跨网络应用程序共享的 javascript 和 css 文件有一些想法。

在我正在处理的当前 Web 应用程序中，我得到了大量不同的 javascripts 和 css 文件，它们被放置在服务器上的一个文件夹中。一些文件被重复使用，而另一些则没有。

在生产站点中，加载大量 HTTP 请求以及加载大量不必要的 javascript 和冗余 css 是非常愚蠢的。解决方案当然是在每页创建一个仅包含必要信息的大捆绑文件，然后将其最小化并压缩 (GZIP) 发送到客户端。

如果您打算创建一组 javascript 文件并手动将其最小化一次，则无需担心，但由于应用程序会持续维护并且事情确实会发生变化和发展，因此手动执行此操作很快就会变得令人头疼同时将包含对 javascripts 和/或 css 文件更改的新更新推出到生产环境中。

有什么好的方法来处理这个问题？您如何在您的应用程序中处理这个问题？

【问题讨论】：

标签： javascript css development-environment production-environment static-files

【解决方案1】：

我构建了一个库，Combres，它正是这样做的，即缩小、合并等。它还自动检测本地和远程 JS/CSS 文件的更改并将最新的推送到浏览器。它是免费和开源的。查看this article 了解 Combres 的介绍。

【讨论】：

您好 Buu，非常感谢您的回答。我会检查你的链接，看看它是否符合我的需要！
我一直在环顾四周，到目前为止，Combres 拥有我见过的最好的配置和设置。我还没有在生产项目中使用它，但它看起来很棒。
谢谢，罗杰斯。我很高兴你喜欢它。

【解决方案2】：

我正在启动的网站上处理完全相同的问题。

我最近发现了一个名为SquishIt 的项目（参见GitHub）。它是为 Asp.net 框架构建的。如果您不使用 asp.net，您仍然可以在这里了解他所做的工作背后的原理。

SquishIt 允许您创建命名的文件“包”，然后在整个站点中呈现这些组合和缩小的文件包。

【讨论】：

【解决方案3】：

CSS 文件可以分类并划分为逻辑部分（如 common、print、vs.），然后您可以使用 CSS 的导入功能成功加载 CSS 文件。重用这些小文件还可以使用客户端缓存。说到Javascript，我认为你可以在服务器端解决这个问题，将多个脚本文件添加到页面中，你也可以动态生成脚本文件服务器端但是为了客户端缓存工作，这些部分应该有不同的和静态的地址。

【讨论】：

【解决方案4】：

我前段时间编写了一个 ASP.NET 处理程序，它可以按需组合、压缩/缩小、gzip 和缓存原始 CSS 和 Javascript 源代码文件。例如，要引入三个 CSS 文件，它在标记中应该是这样的......

<link rel="stylesheet" type="text/css"
      href="/getcss.axd?files=main;theme2;contact" />

getcss.axd 处理程序读取查询字符串并确定它需要读取和缩小哪些文件（在这种情况下，它将查找名为 main.css、theme2.css 和 contact.css 的文件）。当它读完文件并压缩它时，它会将大的缩小字符串存储在服务器端缓存 (RAM) 中几个小时。它总是先在缓存中查找，以便在后续请求时不必重新压缩。

我喜欢这个解决方案，因为......

尽可能减少请求次数
部署不需要额外的步骤
非常容易维护

唯一的缺点是所有样式/脚本代码最终都将存储在服务器内存中。但是现在 RAM 如此便宜，以至于它不像以前那么重要了。

另外，值得一提的是，确保查询字符串不会受到任何有害路径操作的影响（仅允许 A-Z 和 0-9）。

【讨论】：

【解决方案5】：

你说的是minification。

有许多适用于不同平台和语言的库和助手可以帮助解决这个问题。由于您没有发布您正在使用的内容，因此我无法向您指出与您自己更相关的内容。

这是一个关于谷歌代码的项目 - minify。

Here 是一个 .NET Http 处理程序的示例，它可以即时执行所有这些操作。

【讨论】：

好吧，我知道缩小并使用工具手动进行，但我正在寻找一种方法，使其更加自动化以轻松将更新推送到生产中
@Industrial - 这也是我要说的。
嗨，Oded，确实访问了您的链接。很棒的资源。非常感谢！我实际上对你的帖子投了赞成票:)
今天试了一下。不敢相信我之前没有找到缩小！令人难以置信的便捷功能。非常感谢 Oded :)