前端资源优化：请求与缓存答案

【问题标题】：Frontend resource optimisation: Requests vs caching前端资源优化：请求与缓存
【发布时间】：2015-07-13 18:13:37
【问题描述】：

我目前在一个大型网站上工作，该网站有相当多的技术债务，我们需要解决。网站中加载了相当多的 js 和 css。目前，文件是按层聚合和缩小的。每个页面使用一个层，而其他层仅在实际使用它们的页面上加载。

例如：

page 1:
    - default.css
    - page1.css
    - some-feature.css
    - default.js
    - page1.js
    - some-feature.js

page 2:
    - default.css
    - page2.css
    - default.js
    - page2.js

page 3:
    - default.css
    - page3.css
    - some-feature.css
    - some-other-feature.css
    - default.js
    - page3.js
    - some-feature.js
    - some-other-feature.js

现在，除了这些资源之外，还加载了很多外部资源，用于跟踪、广告、社交整合等。

我觉得如果这些资源在一个 js 和一个 css 文件中聚合和缩小到每页，它们将得到更快的服务（在初始请求和后续请求中）。例如page1.css + page1.js，在另一个页面上它将是page2.css + page2.js。虽然这样会减少请求，但最终也会加载一些常规内容两次（如原始的default.css）

加载这些资源的首选方式是什么？你有这方面的测试结果吗？

【问题讨论】：

如果您已经加载了一个特定的 URL，并且它被缓存了，那么它就不会被重新获取。如果您的服务器仍在提供静态资产 304，请使用远期到期。一旦设置了未来日期，进一步的请求将 100% 在本地完成，这比捆绑和解包不需要的资源要快。

标签： javascript html css performance frontend

【解决方案1】：

TLDR：人们更喜欢缓存，因为您的页面将在使用 gzip 有效负载的第一页加载后仍然存在

我见过的大多数项目都将所有前端资产聚合在单个文件中。 gzip 压缩会很小心，你可能会惊讶于文件大小的减少是多么巨大。

考虑将少量特定于页面的 CSS 代码作为内联样式输出。

关于 JavaScript，您能做的最好的事情是将所有资产转换为 AMD 模块，并使用 RequireJS 之类的东西来处理依赖关系和执行顺序。

内联一小段 JS 代码也很有效，这样可以节省一些主包的大小。

毕竟，拥有大量广告对于前端来说是一个巨大的失望，除非你可以让横幅异步加载（参见postscribe）

考虑使用 Google 的 PageSpeed Tools，这是一个相当简单的工具，可以为您提供优化负载的提示。

【讨论】：

【解决方案2】：

所以你有几个问题：

合并并缩小或安排子请求。有两个重要的指标：首先，压缩和缩小的 .js 文件应该有多大？我强烈建议保持一个低于 300kb（移动使用时甚至更少）。但是如果你所有的 pageX.js 加起来有 100kb，请把它们合并起来。（这个建议明显吗？） - 如果您的文件每页超过 300kb，请继续下面的巨大 js 资产。
重复的 default.css/js 代码怎么办？如果您将它们分开，请将它们放在同一个 URL 上。浏览器缓存 URL，如果刚刚加载文件，则不会重新加载文件（另请参阅 http expiry header 以改进缓存）。还建议将它们存储在快速、复制的外部空间（例如 Amazon Cloud Front / S3）

总体推荐：

common (externally hosted, same url): 
- default.minified.css
- default.minified.js

page 1:
- page1.css
- page1.js

page 2:
- page2.css
- page2.js

page 3:
- page3.css
- page3.js

** 巨大的 JS 资产 **

好的，假设您的 page3.js 变大 (>500kb)。那么你真的应该考虑延迟加载。这意味着，首先加载用户交互所必需的核心功能。

之后，有几种方法可以为每个库异步加载单个 javascript 文件（Google：延迟加载 javascript）。例如。用 jquery 描述here

$.getScript('tinymce.js', function() {
    TinyMCE.init();
});

【讨论】：