Question

如何从每个条目中提取关键（首屏以上）CSS？

2017-10-24

1845

webpack extract-text-plugin extracttextwebpackplugin

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

709942632

每个页面由几个反应组件组成，其中一些组件在第一个渲染时可见，其中一些是不可能的。

我想声明地定义哪个对于每个页面/条目，组件是“关键”（折叠），并且将CSS提取到单独的文件中。类似：

799190291

输出类似：

203410908

我一直在玩 extract-text-text-webpack-plugin 在特定条目的上下文中仅提取特定的CSS。

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

Answer 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

希望这对您有所帮助！