使用 extract-text-webpack-plugin 和在 HTML 标头中链接合并的 CSS 文件有啥区别？

Posted 2023-02-22

【中文标题】使用 extract-text-webpack-plugin 和在 HTML 标头中链接合并的 CSS 文件有啥区别？

【英文标题】：What is the difference between using extract-text-webpack-plugin and linking a merged CSS file in an HTML header?使用 extract-text-webpack-plugin 和在 HTML 标头中链接合并的 CSS 文件有什么区别？

【发布时间】：2018-01-23 23:10:35

【问题描述】：

据我了解，extract-text-webpack-plugin 将 React 组件中导入的所有 css 文件捆绑到一个单独的 CSS 文件中。然后可以在您的 html 标头中引用单独的 CSS 文件，以防止 FOUC（无样式内容的 Flash）。使用 extract-text-webpack-plugin 抵消了在 React 组件 js 文件中导入 CSS 的一些好处，例如热加载。

那么使用 extract-text-webpack-plugin 和用 HTML 模板标题中的合并 CSS 文件的单个链接替换组件文件中的所有样式表导入有什么区别？

使用 CSS 模块还是导入 CSS 是否重要？

更新：添加示例以进行说明。

场景 A：

component1.css（在component1.js中导入） component2.css（在component2.js中导入） extract-text-webpack-plugin 生成的捆绑 CSS 文件（在 HTML 标头中调用）

场景 B：

component1.css（js文件中未引用） component2.css（js文件中没有引用） 使用 SASS、Laravel mix.style 等方法合并的主 CSS 文件（在 HTML 标头中调用）

为什么选择场景 A 而不是场景 B？

【参考方案1】：

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

【参考方案2】：

你在这里问了很多不同的问题，所以这是我最好的选择。

您会在生产中使用 extract-text-plugin。生产中不需要热重载，你说得对，它摆脱了 FOUC。 straight from the source 还列出了其他一些优点。

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

【讨论】：

在尝试使用 extract-text-webpack-plugin 之前，我阅读了优点/警告表。其中很多似乎解决了将 CSS 导入 React 组件 js 文件和创建单独的样式表之间的区别。我对此并不感到困惑。我对使用 extract-text-plugin 和使用备用实用程序合并 CSS 之间的区别感到困惑。我可以简单地删除我的 React 组件中对 css 文件的所有引用，使用替代实用程序来合并我的 CSS 文件并在我的 HTML 标头中引用合并的文件。为什么要使用 extract-text-webpack-plugin？

我的意思是你在回答你自己的问题。由于这些优势，您将在生产中使用 extract-text-plugin。我个人不知道有哪个实用工具能够经受得住 extract-text 处理它的方式。有你知道的吗？ Extract-text 很容易适应任何 webpack 配置并且速度很快，您可以使用 html-webpack-plugin 注入输出。有没有更好的替代实用程序？

对不起，我应该举个例子。场景A：1.component1.css（在component1.js中导入），2.component2.css（在component2.js中导入） 3.extract-text-webpack-plugin生成的捆绑CSS文件（在HTML头部调用）场景B: 1.component1.css（js文件中没有引用） 2.component2.css（js文件中没有引用） 3.使用SASS、Laravel mix.style等方法合并的合并主CSS文件（在HTML头中调用）为什么选择场景 A 而不是 B？

因此，您可以将两者放在一起。您可以编写 Sass，通过 webpack 对其进行编译，并通过 ExtractText 提供服务。示例：您将在开发中编写 Sass，使其热重载，然后通过 ExtractText 捆绑并为您的生产构建提供服务。这不是一个选择吗？

这是一个选项。但是，我们不使用 SASS 或 LESS，因此我们质疑使用提取文本插件除了在 dev 中保持热加载之外是否有任何好处。使用 Laravel 的 mix.styles 来简单地连接我们的样式表会容易得多。我是否错过了使用提取文本插件的任何其他潜在好处？据我了解，它维护上下文，但这似乎只有在您使用 CSS 模块时才是正确的。

【参考方案3】：

好问题！

如果你想使用 css 模块，那么是的，将 css 文件导入到你的 js 文件/react 组件中肯定是有好处的。主要的一点是您不再需要担心范围问题，或者担心在 2 个不同的领域编写同一个课程。级联将本地化到每个组件。

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

希望有帮助！