为什么提取 css
Why extract css
我正在使用 webpack 构建单页应用程序。看过几次建议从生产构建中提取 css 但没有找到原因。
谁能解释为什么它被视为最佳实践以及它对生产有何优势？
是否只需要在客户端单独缓存样式和js，还是有其他原因，利弊？
您可以在下面的 link 中找到此类推荐的示例
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:
之所以推荐，主要是因为两个原因足以遵循实践：
1) 提取的css 样式表可以单独缓存。因此，如果您的应用程序代码发生更改，浏览器只能获取更改的 JS 文件。
2) 如果不提取 css，您可能会遇到 无样式内容闪现 (FUOC)。浏览器必须完全解释 javascript 才能将样式应用于您的页面，这可能会导致 FUOC（并且很可能会）。这总是需要一段时间，然后才会应用样式。通过提取 css，您允许浏览器单独处理样式，最好是在解释 JS (load css before js) 之前，并消除 FUOC。
另一方面，正如 Oscar 在评论中所建议的那样，将 CSS 与 JS 结合使用的优势在于，当您开发具有样式的 npm 包时，该库的使用者不需要添加对样式表的单独引用。
我正在使用 webpack 构建单页应用程序。看过几次建议从生产构建中提取 css 但没有找到原因。
谁能解释为什么它被视为最佳实践以及它对生产有何优势？
是否只需要在客户端单独缓存样式和js，还是有其他原因，利弊？
您可以在下面的 link 中找到此类推荐的示例
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:
之所以推荐，主要是因为两个原因足以遵循实践：
1) 提取的css 样式表可以单独缓存。因此，如果您的应用程序代码发生更改，浏览器只能获取更改的 JS 文件。
2) 如果不提取 css，您可能会遇到 无样式内容闪现 (FUOC)。浏览器必须完全解释 javascript 才能将样式应用于您的页面，这可能会导致 FUOC（并且很可能会）。这总是需要一段时间，然后才会应用样式。通过提取 css，您允许浏览器单独处理样式，最好是在解释 JS (load css before js) 之前，并消除 FUOC。
另一方面，正如 Oscar 在评论中所建议的那样，将 CSS 与 JS 结合使用的优势在于，当您开发具有样式的 npm 包时，该库的使用者不需要添加对样式表的单独引用。