javascript - webpack 样式加载器是用来加载所有 css 的吗？或者只是应用程序特定的 css？

Question

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

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 注入(inject) css 而不是直接在 html 中链接 css 文件时会有任何惩罚吗？此外，如果未启用 javascript，它显然会中断吗？

---

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

Answer 1

在可能的情况下，将 CSS 包含在 HTML 本身中。现代浏览器将在页面解析时开始获取 CSS，有时甚至在 JavaScript 开始下载之前。在加载程序之外执行主要部分，您将提高页面呈现速度。

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

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

---

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