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压缩包加载首页加载

我见过的大多数项目都将所有前端资产聚合在一个文件中。 gzip压缩会非常谨慎，您可能会惊讶于文件大小的减少有多大。

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

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

内联小型JS代码也很有用，你可以节省一点主包大小。

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

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

Answer 2

所以你有几个问题：

合并并缩小或安排子请求。有两个指标对此很重要：首先，压缩和缩小的.js文件应该有多大？我强烈建议保留一个低于300kb（移动使用更少）。但如果你的所有pageX.js都有100kb，请将它们组合起来。（这个建议是否明显？） - 如果你的文件每页超过300kb，请在下面继续查看巨大的资产。
重复的default.css / js代码怎么样？如果你将它们分开，请将它们放在同一个URL上。浏览器缓存URL，如果他们刚加载了文件，则不会重新加载文件（另请参阅http expiry标头以改进缓存）。还建议将它们存储在快速复制的外部空间（例如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文件async（Google：lazy loading javascript）。例如。用jquery描述here

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

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

2 个答案: