是否有任何操作会导致 css 在 webpack 中异步加载？

Question

参考：https://github.com/amireh/happypack/issues/202

问题是，我不知道为什么 css 被异步加载以及如何正确解决这个问题

------------------更新----------

我的问题是，什么原因导致我的 css 被异步加载，“异步”意味着当我在浏览器中打开 url 时，我会在几秒钟内看到一个没有 css 的页面，因为 css 将在之后加载该脚本执行有关将样式添加到head标签的代码。

但是在我之前的所有项目中，当服务器响应html时，css会被添加到html head标签中，所以我猜异步可能是由SSR引起的（这是我的第一个SSR项目），但我是不确定。

所以我期望的是在构建过程中将 css 添加到 html 中（即当服务器响应 html 时它已嵌入到 html 中），而不是在脚本执行时添加。

Answer 1

是否有任何操作会导致 css 异步加载？

不！但在实现了服务器端渲染时，它可能看起来像这样。当您启动应用程序时，服务器接收请求，将所需的组件呈现为 HTML 字符串（没有 css 模块），然后将其作为响应发送给客户端。从那时起，客户接管渲染职责。这就是为什么您会看到第一个 HTML 渲染但没有样式，因此会产生 CSS 正在异步加载的错觉。

...如何正确解决这个问题？

如果您想在第一次初始服务器渲染时渲染样式，您可以使用this 之类的东西。这个 babel-plugin 做了 css-loader 所做的事情。然而，这个插件的输出对于我们的目的并不重要，而是选择器本身的映射。

假设您有一个 .babelrc 进行配置，您可以像这样更新 env 部分：

"env": {
  "server": {
    "plugins": [
      [
        "css-modules-transform", {
          "generateScopedName": "[hash:8]",
           "extensions": [".css"]
         }
      ]
    ]
  }
}

然后在构建服务器时或（通常）在package.json 中找到的脚本中，只需在构建服务器的命令中指定BABEL_ENV=server 环境变量，这样该插件仅在构建后端时运行，而不是在构建后端时运行构建客户端包。