优化/分析 CSS/JS 连接

Optimizing/profiling CSS/JS concatenation

本文关键字：连接 JS 分析优化 CSS 更新时间：2023-09-26

最好合并CSS/JS文件，这样需要向站点发出的请求更少。不过，具体如何做到这一点并非易事。有三种极端策略：

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

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

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

以

站点为中心的CSS和JS应该最小化和组合。您绝对不想手动执行此操作，而是将其作为部署过程的一部分。本地的单个文件越多，开发/维护起来就更容易了。

以页面为中心的CSS和JS应该最小化，但不能合并，因为它只与网站的一部分有关。(我认为以页面为中心的CSS甚至不应该是一个单独的文件，而是页面本身的一部分......当然，CSS的全部意义在于避免以页面为中心的样式，所以也许没有意义(

而且，当然，总是有例外，并且在很大程度上取决于项目的细节。

IMO 您唯一应该考虑合并的是绝对存在于您网站每个页面上的文件，并且您拥有自制资源。任何公共图书馆或类似的东西都不应该合并。缓存已经轻松击败了"许多连接"的论点，并且随着时间的推移，服务器/浏览器在如何有效地缓存内容方面变得越来越智能。生成无数的重组只会阻止您从该进度中获利。

据我所知，css 和 js 文件不能与页面组合，因为它们大多是缓存的，并且比内容修改的频率更低。

谷歌浏览器带有"开发人员工具"(您在检查代码时看到的工具(，它具有许多出色的功能。

审核菜单特别有用，因为它为您提供了优化建议，例如利用浏览器缓存、利用代理缓存、最小化 cookie 大小、优化样式和脚本的顺序、删除未使用的 CSS 规则等......看看吧！

另一种策略是将公共库(阅读：jQuery(移动到CDN。据说更有可能的是客户端已经缓存了它。如果 cdn 文件不可用，可以提供自托管回退。