こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
Loki->storycapに変えました
上記の定例でビジュアルリグレッションのスクリーンショットを取るのをstorycapからLokiに変えたのですがreg-suitとstorycapを一緒に使うものと勝手に勘違いをしており、よくよく考えてみるとスクリーンショットを取るだけならばstorycapでもいいというのに気づいてstorycapに変えました。
あとはstorycapはstory側でアニメーションによる描画で都度スクリーンショットの画像に差分が出る場合はスキップしたりdelayと遅延させたりの差し込みでの対応がしやすいので採用し直したという理由があります。
https://github.com/reg-viz/storycap#api
別の問題点ですがstory側でmsw(APIモックライブラリ)とstorycapのパラメータ指定するとタイムアウトするのがあってこの問題解決できるか検討中です。
IE対策のpolyfill削除
使用しているpolyfillとしてcore-js/stable(@babel/polyfill)を入れていました。IE対策としてあったものだと思いますがサポート切っているので削除しようと思っています。
こちらを削除するだけでも1つのbundleファイルに対して40KB減らすことが可能なので積極的に削除したいと思っています。
JS,CSSをサーバサイドで記載
前回少しSassの扱いで触れていた「CSSファイルとしてではなくctpファイルなどサーバサイドのテンプレートエンジンのファイルとして出力」の方式を他の静的ファイルに対しても適応した方が良い気がしてきたので方針変えますという話。
headerとかも大きいのでHTML内にあった方がパフォーマンス上がりそうですね。
次回の更新予定は、夏季休暇に入りますので8/19（金）になります！
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。