キーワード

• 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