キーワード†

• webpack
• スタイルシート, stylesheet
• 画像, images

現象†

画面初期表示時に画像が一瞬大きく表示される。すぐにスタイルシートが適用されて正しい表示になる。

原因†

• webpackでビルドしたスタイルシートの適用が遅れるから
• 遅れるのはlinkタグでスタイルシートを読み込むから
• linkタグで読み込むのはsourceMapを有効にするから

対策†

• sourceMapを無効にする
• 無効にするとstyleタグでスタイルが書かれる
• styleタグで書かれると適用が遅れない

備考†

言われてみればなるほどだが。。

参考†

• css-loader with `sourceMap: true` cause adding style tag delayed · Issue #613 · webpack-contrib/css-loader