キャッシュノートのフロントエンドデバッグ事例の共有 - 私のPCでは動いていたのですが…
(spilist.notion.site)ここ数か月の間に、キャッシュノート(https://cashnote.kr) のフロントエンドチームが React プロダクトを運用しながら経験した、3つの CSS 問題をデバッグした事例を共有
- いずれも create-react-app で CSS module を使っている中で、開発環境では経験しなかった問題が本番環境で見つかったという共通点がある
問題 1: 特定のページに入った後から、すべてのページで画像が歪む現象
-
CSS module がハッシュ化できない形で CSS スタイルを定義していたことが原因
-
そのようなスタイルを定義できないように stylelint plugin を追加して解決
問題 2: 開発環境と本番環境で CSS スタイルの見え方が異なる現象
-
特定のコンポーネントがデザインシステムコンポーネントのスタイルをオーバーライドしているが、本番環境ではデザインシステムコンポーネントの CSS が注入されるタイミングのほうが遅く、スタイルのオーバーライドが行われなかったことが原因
-
当初は Webpack 設定を修正して解決したが、本番環境のパフォーマンスを犠牲にする判断だったため納得できなかった
-
別の方法を探していたところ、デザインシステム側のバンドラ(rollup) 設定を変更することでオーバーライド可能にできることを発見。デザインシステムが注入する CSS は常に head の上部に配置されるよう変更した
問題 3: 開発環境で実行する際は問題ないのに、本番ビルドは失敗する現象
-
Webpack プラグインが CSS Chunk を作る過程で、2つの CSS ファイルが異なる順序で import されているため、2つのチャンクで異なるスタイル結果が出る可能性があるという警告により、本番ビルドが失敗
-
キャッシュノートは CSS module を使っているため、各 CSS ファイルはすべて独立して動作し、order conflict が異なるスタイル結果を生み出すことはない。したがって警告を無視するよう Webpack 設定を変更
後ろの2つの問題は、表面的な現象は異なっていたが、「create-react-app というフロントエンドフレームワークが本番環境で動作する方式への理解不足」から生じた問題という点では似ている
- 根本的な改善のために、CRA と Webpack への理解を深め、さらに CRA を取り除くための準備を進めている
2件のコメント
面白い体験の共有をありがとうございます。やはりローカルではいつも全部うまくいきますよね！
ありがとうございます。文章を簡単に要約するのもなかなか難しいですね（笑）