如何从每个条目中提取关键(首屏)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

我一直在使用extract-text-webpack-plugin,但似乎找不到告诉它只在特定条目的上下文中提取特定CSS的方法.

---

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

Answer 1

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

希望对你有帮助！