使用提取文本webpack插件和在HTML头中链接合并的CSS文件有什么区别？

Question

据我所知，摘录-文本-webpack插件包所有的css文件导入您的反应组件到一个单独的CSS文件。然后，可以在HTML头中引用单独的CSS文件，以防止FOUC (非样式内容的Flash)。使用提取-文本-webpack插件抵消了一些好处，导入您的CSS在您的反应组件js文件，如热加载。

那么，使用提取文本webpack插件和用HTML模板头中合并的CSS文件的单一链接替换组件文件中的所有样式表导入有什么区别呢？

您是使用CSS模块还是导入CSS，这是重要的吗？

更新:增加了澄清的例子。

设想A：

1. 组件1.css(在Component1.js中导入)
2. 组件2.css(在Component2.js中导入)
3. 捆绑由提取-文本-webpack-插件(在HTML标题中调用)生成的CSS文件。

设想B：

1. 组件1.css(在js文件中未引用)
2. 组件2.css(在js文件中没有引用)
3. 主CSS文件合并使用SASS、Laravel mix.style方法等(在header中调用)

为什么要用情景A而不是B呢？

Answer 1

问得好！

如果您想使用css模块，那么是的，将css文件导入js文件/react组件肯定有好处。最主要的一点是，您不必再关注范围问题，也不必担心在两个不同的领域编写同一个类。级联将本地化到每个组件。

如果您不使用css模块，那么根本就没有什么好处。当然，您会得到热重装，但还有其他解决方案可供使用。

希望这能帮上忙！

Answer 2

将所有样式表合并为一个的优点是，浏览器为每个样式表提出一个单独的请求。如果将多个合并成一个，则只会提出一个请求。使用这个插件，您的样式将不再内联到您的JS包中，这可以提高性能，因为CSS包将与JS包并行加载。

Answer 3

你问了很多不同的问题，所以这是我最好的机会。

你会在生产中使用提取文本插件。热重装在生产中是不必要的，你是对的，它摆脱了FOUC。还有一些其他优点也列出了直接从源头。

如果您愿意，仍然可以将您的.css导入到组件中--或者将它们分开。导入或需要CSS确实很重要，这与您是否使用es2015有关。