isomorphic-style-loaderの使い方
概要
- Critical CSS を
<head></head>
の中にサーバ側で展開するためのプラグイン。クライアント側もサーバ側も同じwebpack設定で用いる。 - ただのstyle-loaderだとサーバ側は使用できない(DOM操作を伴うのでビルド時にエラーになる)。そのためサーバ側でHTMLコンテンツだけ組み立てて(半SSRみたいな形で)Responseを返すと、クライアント側で
FOUC
が発生してしまう(HTMLレンダリング --> JS読み込み --><head>
内にCSS展開 --> 適用 という順番で評価されるため)。これを回避するためにSSR時にCSSも展開しちゃおうぜ!みたいなモチベーション。
fix support server side usage by magalhas · Pull Request #115 · webpack/style-loader · GitHub
URL
Using with react-router · Issue #15 · kriasoft/isomorphic-style-loader · GitHub