前端资源优化:请求与缓存

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

gzipped :人们更喜欢缓存，因为您的页面将通过使用有效负载的第一次页面加载而存活下来

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

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

关于JavaScript，你能做的最好的就是将所有的资产转换成AMD模块，并使用像RequireJS这样的东西来处理依赖关系和执行顺序。

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

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

考虑使用谷歌的PageSpeed Tools，它是一个相当简单的工具，可能会给你一个优化有效负载的提示。

Answer 2

所以你有几个问题：

1. Combine，并为子请求缩减或调度它。对此有两个重要的度量标准:第一，压缩和缩小的.js文件应该有多大？我强烈建议将其保持在300kb以下(在移动使用时甚至更低)。但是如果你所有的pageX.js加起来有100kb，请把它们组合起来。(这是对显而易见的建议吗？)-如果你的文件每页超过300kb，请在下面的大型js assets.
2. What上继续讨论重复的default.css/js代码？如果你将它们分开，把它们放在同一个assets.
3. What上。浏览器缓存URL，如果他们刚刚加载了文件，就不会重新加载它(另请参阅http expiry以改进缓存)。还建议将它们存储在快速复制的外部空间(例如，亚马逊云前端/ 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: lazy loading javascript)。例如，使用jquery作为描述的here

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