javascript - 前端资源优化 : Requests vs caching

Question

我目前正在一个大型网站上工作，该网站有相当多的技术债务需要我们努力解决。站点中加载了相当多的 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)

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

Answer 1

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

我见过的大多数元素都将所有前端 Assets 聚合在单个文件中。 gzip 压缩会很好，您可能会惊讶于文件大小的减少有多大。

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

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

内联小块 JS 代码也很有效，您可以通过这种方式节省一些主包大小。

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

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