webpack 样式加载器是不是意味着加载所有 css？或者只是应用程序特定的css？

Posted 2023-02-22

【中文标题】webpack 样式加载器是不是意味着加载所有 css？或者只是应用程序特定的css？

【英文标题】：Is the webpack style loader meant to load all css? Or just application specific css?webpack 样式加载器是否意味着加载所有 css？或者只是应用程序特定的css？

【发布时间】：2014-10-17 20:03:59

【问题描述】：

我正在尝试使我的前端设计过程更加模块化，并且正在探索webpack。它支持style loader，它允许您导入一个css文件并将其注入到文档中，如下所示：

require("style/url!file!./file.css");
// => add a <link rel="stylesheet"> to file.css to document

但是，我的主要关注点是网站而不是 webapps¹，所以通过 javascript 添加 css 感觉很奇怪。但我可能只是过时了，所以我想知道：加载器是要用于所有 css，还是只用于加载 css 的小的、有条件的部分？

如果它可以用于加载所有css，那么在使用webpack生成的bundle.js注入css而不是直接在html中链接css文件时会不会有任何惩罚？此外，如果未启用 javascript，它显然会中断？

---

1：不同之处在于我的动态内容很少，javascript 在这些网站中只扮演次要角色，而且我不是使用 javascript 进行路由，而是有页面的静态 .html 文件

【问题讨论】：

有一种方法可以将 css 分离成一个单独的文件顺便说一句：webpack.github.io/docs/stylesheets.html#separate-css-bundle

通过 javascript 加载的 CSS 也需要更长的时间来加载

【参考方案1】：

在可能的情况下，将 CSS 包含在 HTML 本身中。现代浏览器将在页面解析时开始获取 CSS，有时甚至在 JavaScript 开始下载之前。您将在加载器之外的主要部分中获得页面渲染速度的改进。

此外，如果您坚持主要的“核心”样式，您可以从缓存中受益，这将再次比 JavaScript 更快地加载。

http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/

---

在您的示例中，我通过将其拆分为多个部分并为页面中加载的特定元素使用加载器和捆绑器来完成此操作。应用程序的外观、品牌等是从标记加载的，而控制我的特定 UI 的行为（例如，特定表单的布局）是使用捆绑器或打包器完成的。

【讨论】：

Chrome 和 Firefox 50+ 同时下载 CSS 和 JS。