create-react-appのwebpack + CSS設定。

react 
      // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
      // (second argument), then grabs the result CSS and puts it into a
      // separate file in our build process. This way we actually ship
      // a single CSS file in production instead of JS code injecting <style>
      // tags. If you use code splitting, however, any async bundles will still
      // use the "style" loader inside the async code so CSS from them won't be

create-react-app/webpack.config.prod.js at master · facebookincubator/create-react-app · GitHub

課題

  • つまりrequire.ensure() 等でcode splittingしているページがF5された時、何も考えずにstyle-loader css-loaderだけでSSRを試みると、FOUCが発生してしまう。
  • これはサーバ側でコンテンツ内容はHTMLレンダリングしているのに、CSS情報を埋め込むことができないからである。クライアント側ではJS内からCSS展開を試みるので、その間CSSが非適用のコンテンツがユーザに表示される。

対応

  • SSR時に<head></head>内に当該ページで使用するCSSを展開する（isomorphic-style-loaderのアプローチ）。あるいはExtractTextPluginでCSSファイルに外出ししてしまう。

ExtractTextPlugin

  • 全部を1つのCSSファイルにまとめると、容量がやばいので出来ればCSS自体もcode splittingしたい… そういうオプションないかな？ないっぽい。
  • allChunks はあくまで1つのCSSファイルに全てを埋め込むか or 最初のchunkだけ埋め込むかを選択するものらしい。
ExtractTextWebpackPlugin code splitting

Webpackのdocs

stylesheets