webpack - 为什么要提取css

Question

我正在使用 webpack 构建一个单页应用程序。多次看到建议从生产构建中提取css但没有找到原因。
谁能解释为什么它被视为最佳实践以及它对生产有什么好处？
是否需要仅在客户端上单独缓存样式和 js 还是有其他原因、缺点、优点？
您可以通过以下链接找到此类建议的示例
https://github.com/webpack-contrib/sass-loader

In production

Usually, it's recommended to extract the style sheets into a dedicated file in production using the ExtractTextPlugin. This way your styles are not dependent on JavaScript:

Answer 1

推荐它主要是因为两个足以遵循实践的原因:

1)提取的css样式表可以单独缓存。因此，如果您的应用程序代码发生更改，浏览器只能获取更改的 JS 文件。

2) 如果不提​​取 css，你可能会遇到 无样式内容闪现 (FUOC) .浏览器必须完全解释 javascript 才能将样式应用于您的页面，这可能会导致 FUOC(并且可能会)。这总是需要一段时间，然后才会应用样式。通过提取 css，您可以让浏览器单独处理样式，最好在解释 JS 之前 (load css before js)并消除 FUOC。

另一方面，正如 Oscar 在评论中所建议的，当您开发具有样式的 npm 包时，将 CSS 与 JS 结合的优势可能是该库的使用者不需要添加对样式表的单独引用。