如何在组合JavaScript和CSS文件时更新HTML脚本和链接引用？

Question

多个站点引用JavaScript和CSS文件相结合以提高网页性能，包括使用ANT构建脚本在部署之前连接文件的示例。

我已经搜索过，并且没有找到任何有关如何自动更新HTML和其他文档中对这些文件的引用的信息。我希望避免混淆容易出错的事情，并希望向过去使用自动构建的其他人学习。

是否有野外自动化工具来完成我没有看到的任务？是否有推荐的流程来更新HTML中的脚本和链接标签？这些解决方案可以与ANT或类似的构建工具集成吗？

Answer 1

你是对的，这是加速页面加载的伟大的方式。它甚至可以与另一张海报推荐的CDN一起使用。

这是一个小脚本，它将多个文件打包到一个用于部署。它支持JS和CSS，甚至可以通过删除空格等来“缩小”它们。只需将其连接到构建和部署脚本即可。

榨汁机：http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

更好的是，它将遵循JS和CSS import语句，因此您只需要将HTML文件指向loader文件，它将在开发和生产中都有效。 （假设您在部署时将加载文件替换为组合文件。）

还有其他一些，包括一些运行时解决方案。但听起来你无论如何都有一个构建过程。

就HTML更新而言，如果您仍然需要它，因为自动化部署在Ruby世界中非常流行，您可能会发现一些独立的实用程序甚至可以帮助非ruby项目。 （如上所述）尽管如此，最好用你自己项目的模板语言处理这个问题。 （使用静态资源修订版ID等。）

祝你好运，让我们知道你发现了什么。

Answer 2

肯定是，这是明智之举。

我发现 PHP solution ，不知道这对你没关系，但如果不是，你仍然可以阅读它的来源（这并不难）并且学到很多东西。解决方案的工作原理如下：

1. 重写你的请求：从 css / main.css和css / skin.css 到 css / main.css，skin.css（当然你可以放了很多）。
2. 使用apache的 mod_rewrite 将此请求重定向到脚本（在我们的示例中为combine.php），该脚本将所有文件合并为一个文件。
3. 该脚本组合了所有文件并发送组合文件。然后将其保存到缓存文件夹中。
4. 下次检查是否有最新版本的缓存并提供该缓存。如果最新的文件修改时间已更改，则会丢弃缓存。

该解决方案效果很好，甚至使用 HTTP 缓存标头并吐出 [ETags] ，无论如何都应该这样做

Answer 3

我认为你真正想要的是CDN Content Delivery Network。

在这里阅读

http://developer.yahoo.com/performance/rules.html

http://en.wikipedia.org/wiki/Content_delivery_network