为什么要提取css

Question

我正在使用webpack构建单页面应用程序.已经多次看到建议从生产构建中提取css但是没有找到原因.

任何人都可以解释为什么它被视为最佳实践以及它对生产的优势是什么？

是否需要在客户端上单独缓存样式和js,还是有其他原因,缺点,专业人士？

您可以通过以下链接找到此类推荐的示例

https://github.com/webpack-contrib/sass-loader

在生产中

通常,建议使用ExtractTextPlugin将样式表提取到生产中的专用文件中.这样您的样式不依赖于JavaScript:

Answer 1

建议主要是因为有两个原因足以遵循这种做法:

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

2)如果不提取CSS,您可能会遭受无格式内容Flash(FUOC)的影响.浏览器必须完全解释javascript以将样式应用到您的页面,这可能会导致FUOC(并且可能会).它总是需要一段时间,然后才会应用样式.通过提取css,您可以让浏览器单独处理样式,最好在解释JS (在js之前加载css)并消除FUOC之前.

另一方面,我没有看到将css与js结合使用的任何优点,我相信它只是为了易于使用而在webpack中引入,因此开箱即用(在我认为的开发模式中).