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

Question

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

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

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

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

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

score 15 · Accepted Answer

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

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

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

1 回答 1