Webpack 如何从每个条目中提取关键（高于折叠）CSS？

我有一个简单的多页面应用程序，有三个页面，我的

webpack.config.js

条目看起来像：

{
  entry: {
    a: 'pages/a.js',
    b: 'pages/b.js',
    c: 'pages/c.js',
  }
}

每个页面都由几个React组件组成，其中一些组件在第一次渲染时在折叠上方可见，一些组件不在视图中

我想声明性地定义每个页面/条目中哪些组件是“关键的”（在折叠上方），并将CSS提取到一个单独的文件中。比如：

{
  a: ['compononents/button/style.css', ...],
  b: ['compononents/title/style.css', ...],
  c: ['compononents/header/style.css', ...]
}

- dist/a.critical.css
- dist/b.critical.css
- dist/c.critical.css

输出类似于：

{
  a: ['compononents/button/style.css', ...],
  b: ['compononents/title/style.css', ...],
  c: ['compononents/header/style.css', ...]
}

- dist/a.critical.css
- dist/b.critical.css
- dist/c.critical.css

我一直在玩，但似乎找不到一种方法告诉它只提取特定条目上下文中的特定CSS


在特定条目/页面的上下文中，如何提取特定的CSS文件内容？
我处于相同的情况，我们的项目足够大，我们需要20多个不同的关键CSS文件。我找到了一种让生成关键CSS更轻松的方法。
我正在使用它来创建不同的关键css文件

@critical crit.css {
    .head {
        background: red;
    }

    .head .logo {
        display: block
    }
}

@critical v2.css {
    .head.v2 {
        background: green;
    }
}

.main {
    color: #333;
}

.footer {
   background: black;
}

Postcss关键css将生成3个文件-我的css文件（有或没有关键样式）和2个关键css文件-v2.css和crit.css

希望这对你有帮助
 你看到了吗？