各エントリから重大な（折り畳み部分の上に）CSSを抽出する方法は？

Question

私は3つのページで簡単な複数ページのアプリを持って、私のwebpack.config.jsようentryに見える：

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

各ページには、最初の倍以上のレンダリング表示されているそのうちのいくつかのコンポーネントを、反応させ、いくつかから構成されており、そのうちのいくつかは見えないものです。

私は宣言各ページ/エントリのために（上記-倍）「重要」であるコンポーネントを定義し、そのCSSが別のファイルに抽出したいのですが。ような何か：私はextract-text-webpack-pluginで遊んでてきたが、中に特定の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', ...] 
} 

のようなものを出力特定のエントリのコンテキスト。特定のエントリ/ページのコンテキストで、私は特定のCSSファイルの内容を抽出するにはどうすればよい

---

？私は同じような状況にいるよ

Answer 1

は、私たちのプロジェクトは、十分な大きさであり、我々は20以上の異なる重要なcssファイルを必要としています。私はクリティカルなCSSをより苦労なく作り出す方法を見つけました。 私はhttps://github.com/zgreen/postcss-critical-cssを使用しています。これにより、さまざまなクリティカルなCSSファイルを作成できます。 （重要なスタイルがあってもなくても）私のCSSファイルと2つの重要な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つのファイルが生成されますv2.cssを、これはあなたを助ける

希望をcrit.css！