是否值得在HTTP2环境中从Webpack2包中提取CSS？

Question

当我想使用HTTP2和import()构建应用程序时,是否值得提取CSS,或者如果我离开JS更好？什么是性能,并且在将样式节点添加到DOM中时是否存在任何限制？

Answer 1

这当然取决于项目的具体情况。

但总的来说，在我看来，提取 CSS 是值得的 ——即使使用 HTTP 1.1。通过将 css 文件组合到脚本中，您可以剥夺自己缓存 css 的可能性。此外，您可能会遭受无样式内容闪现 (FOUC) 的困扰。请注意，即使 HTTP/2 引入了多路请求，因此不再需要通过将资产合并为一个来减少请求数量，但最快的请求仍然是未发出的请求。通过拆分 css 和 javascript 文件，您可以对 css 文件使用浏览器缓存，这些文件的更改频率可能低于脚本。

当新代码发布时，如果没有更改，用户将不必再次下载所有包。因此，将您的 css 文件捆绑成多个部分实际上很有用（这就是 HTTP2 可能适用的地方）。在典型情况下，您将拥有：供应商样式 - 不会更改的库，核心样式 - 很少更改的基本 css，组件的 css - 特定组件的 css 模块。

目前很难评估 HTTP/2 的总体性能。技术采用仍处于起步阶段，没有明确的最佳实践可确保成功。在一些 HTTP/2 采用故事和测试[1]、[2] 之后，人们可以得出结论，现实比理论偏差要复杂一些。如上述结果所示，例如使用 HTTP/2 交付许多小资产可能会在压缩方面引入一些额外的开销。

总而言之，在适用场景中尝试采用 HTTP/2 时，应始终尝试测试和衡量性能假设，因为它可能不会带来所需的性能增益。

还可以看看Ilya Grigorik的精彩幻灯片。仅考虑在 HTTP/2 中解绑 css 并非如此。您还应该查看服务器推送和优先级，以提供尽可能快的渲染关键资产。