javascript - 优化/分析 CSS/JS 连接

Question

最佳做法是合并 CSS/JS 文件，这样需要向网站发出的请求就会减少。但是，究竟如何做到这一点并不简单。三种极端策略:

1. 不要合并任何东西。适用于缓存，但对于未缓存文件的用户来说会产生大量 HTTP 请求。
2. 将网站上的每个文件合并为一个。也适用于缓存，并且只有一个请求，但文件会过大并且包含很多不需要的东西，这会减慢浏览器速度并可能导致冲突。
3. 只合并当前页面需要的文件。只有一个请求，没有不需要的内容，但缓存很糟糕——如果你有 10 个文件，它们可以以一千种可能的组合出现，所以即使你的访问者看到了一个包含文件 1 和 2 的页面以及另一个包含文件 3 和 4 的页面，他们仍然需要为包含文件 1、2 和 3 的页面下载新的组合文件。(如果我们想保留文件的顺序，情况会变得更糟。)

理想的解决方案可能是这三种策略的组合(组合一些在很多页面上使用的文件并将它们包含在任何地方，并将其余部分组合成几个文件，希望与它的方式相同在其他页面上完成)，但很难找到。您需要知道网站上使用了哪些文件，哪个文件在哪个页面(或哪种类型的页面)上使用，每种页面类型获得了多少访问量，其中有多少来自返回访问者......简而言之，它手动操作似乎是一个巨大的痛苦。我在找

• 理想情况下，工具足够智能，可以为您进行优化或提供帮助。
• 更实际的是，可以统计哪些 CSS/js 文件包含在哪个页面上/这些文件的下载频率/两个文件一起下载的频率的工具。
• 如果没有好的工具，关于如何手动完成的建议/策略/最佳实践

Answer 1

以站点为中心的 CSS 和 JS 应该被最小化和结合。您绝对不想手动执行此操作，而是将其作为部署过程的一部分。更多的本地独立文件使开发/维护更容易。

以页面为中心的 CSS 和 JS 应该尽量减少，但不要合并，因为它们只与网站的一部分有关。 (我认为以页面为中心的 CSS 甚至不应该是一个单独的文件，而应该是页面本身的一部分……当然，CSS 的全部意义在于避免以页面为中心的样式，所以也许没有实际意义)

当然，总是有异常(exception)，这在很大程度上取决于元素的细节。