ぐるなびのレストラン検索でフロントエンドのパフォーマンスを150%UPさせるために実施した５つのこと - ぐるなびをちょっと良くするエンジニアブログ

こんにちは、フロントエンドエンジニアの秋山です。 主にレストラン検索サービスのフロントエンドのテックリードをしています。 ぐるなびのレストラン検索は2021年10月にフルリニューアルしました。 レスポンシブウェブ対応、地図検索機能の拡充、絞り込みの改善、検索の高速化と盛り沢山のプロジェクトとなりました。これからも随時アップデートをかけて、より早くより使いやすい検索を提供していきますので、これからもよろしくお願いします。 さて、今回はリニューアルに当たってフロントエンドのパフォーマンスを上げるために試行錯誤して、比較的効果の大きかった施策をいくつかピックアップしてお伝えしていきます。 目次 レストラン検索のフロントエンド構成 パフォーマンスの改善 インラインSVGをやめる ファーストビューから非同期コンポーネントをなくす re-export をやめる クライアント JavaScript のロ

[yuuAn]

GraphQL 確かに勝手に重たいクエリ投げられたら困るな。

[ka2nn]

re-export(Barrelと呼ぶやつ)のファイルは自分はパッケージごとにルールを決めてる。あと、使ったことないけど展開する機能もある(babelのプラグインか、swcならこのフラグ https://nextjs.org/docs/advanced-features/compiler#modularize-imports)