10

我有一个简单的三页多页应用程序，我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 文件内容？

4

1 回答 1

1

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

希望对你有帮助！

于 2017-12-07T21:10:10.330 回答