如何从每个条目中提取关键(首屏)CSS

Question

我有一个简单的多页应用程序，有三个页面，我的webpack.config.js entry看起来像：

{
  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

我一直在使用提取文本 webpack-插件，但似乎找不到一种方法来告诉它仅在特定条目的上下文中提取特定的 CSS。

---

如何在特定条目/页面的上下文中提取特定的 CSS 文件内容？

Answer 1

我处于同样的情况，我们的项目足够大，我们需要 20 多个不同的关键 css 文件。我找到了一种方法，使生成关键的CSS更加轻松。我正在使用允许创建不同关键 css 文件的 https://github.com/zgreen/postcss-critical-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-critical-css 将生成 3 个文件 - 我的 css 文件（有或没有关键样式）和 2 个关键 css 文件 - v2.css 和 crit.css

希望这对您有所帮助！