yutatanaka.tokyo logo

yutatanaka.tokyo

Published on

react-fontawesomeのアイコンがロード時にデカすぎるのを直す

Authors

概要

表題の通り。gatsbyjs で作成したプロジェクトで使っている、アイコンがページ表示時に

一瞬だけデカくなる

。それも初回だけでなく、毎回なる。サイトに来て頂いた方の目に不快なのでサクッと直したい。


なお、そうなるのは

gatsby build

で本番用にデプロイした時のみ。開発環境の

gatsby develop

ではそうはならない。


目標修正時間: 30 分 /実際にかかった時間:

20 分

修正手順

このアイコンは、

react-fontawesome

を使っているのだけれど、一般的な React のライブラリでそんなにトラブルに遭ったという話も聞かない。


なので「react-fontawesome too big」あたりのキーワードでググる。

あったあった。


https://stackoverflow.com/a/58913667


サイトでは、

ヘッダーメニュー

に

<FontAwesome...>

タグを使用しているので、そこで宣言にオプションを追加。（他の画面でも利用していれば必要なだけ追加していく。）


import * as React from &quot;react&quot;
import { Link } from &quot;gatsby&quot;
import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;
import { faComputer, faFlag, faHouseChimney, faMoneyBill, faPerson } from &quot;@fortawesome/free-solid-a
g-icons&quot;
import { config } from &#039;@fortawesome/fontawesome-svg-core&#039;
config.autoAddCss = false // &lt;= この１行のみ追加

const Layout = ({ location, title, children }) =&gt; {
  const rootPath = `${__PATH_PREFIX__}/`
  const isRootPath = location.pathname === rootPath
  let header
  ...

要するに、

FontAwesome については CSS を自動で適用されるのを OFF にしてしまい、自分で明示的に適用する

ということのようだ。


プロジェクトルート直下の`

./gatsby-brower.js

の末尾に以下の１行を追加する。


...
import &#039;@fortawesome/fontawesome-svg-core/styles.css&#039;

ローカルで gatsby build でビルド。修正できたようようなので、デプロイする。


いい感じになった。👌

まとめ

GatsbyJsはメルカリでも使用している（使用していた？）という話を効くぐらい、商用サイトにも利用でき、元がReactなのでカスタマイズも


定評があるフレームワークだとは思う。ただ、

個人開発者など持ち時間が足りない人からすると選択する技術スタックとして、どうかな

という気持ちが拭えない。

今回のようなトラブルに対して、日本語のポストが少ないのもウィークポイントの1つだと思う。

Discuss on Twitter