雑記ブログ：FontAwesomeを軽量化する
Closedfirst published: 2018/12/22last updated: 2019/01/15
ブログにFontAwesomeを入れてからか、初期表示に結構時間がかかるようになってしまった。
おかしい。使ってるアイコンだけSVGで出力してるからそこまで重くならないはずなのだけど。そう思ってGatsby（webpack）で静的書き出しされたJSを見ていったら発見してしまった。
うわー、SVGアイコンを出力するためのデータが全部JSに書き込まれちゃってる。これがheadにあるってことは、レンダリングブロックの原因だろう。ということはTree Shakingできてないな。
Tree Shaking
FontAwesomeはwebpackでTree Shaking（使っていないリソースを削ぐ）が行える。設定を間違えているようなのでドキュメントを見直す。
修正
もしかして、fas とか fab でまとめて設定していた部分は、コンポーネントで使ったものだけを認識してTree Shakingはしてくれないってことかな。アイコンを明示して設定し直す。
Before
import "@fortawesome/fontawesome-svg-core/styles.css"
import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"
import { far } from "@fortawesome/free-regular-svg-icons"
import { fab } from "@fortawesome/free-brands-svg-icons"
library.add(fas)
library.add(far)
library.add(fab)After
import "@fortawesome/fontawesome-svg-core/styles.css"
import { library } from "@fortawesome/fontawesome-svg-core"
import {
faHistory,
faFont,
faImages,
faVrCardboard,
faCodeBranch,
faHome
} from "@fortawesome/free-solid-svg-icons"
import { faClock } from "@fortawesome/free-regular-svg-icons"
import {
faTwitter,
faGithub,
faReact,
faVuejs,
faBehanceSquare,
faApple
} from "@fortawesome/free-brands-svg-icons"
library.add(faHistory, faFont, faImages, faVrCardboard, faCodeBranch, faHome)
library.add(faClock)
library.add(faTwitter, faGithub, faReact, faVuejs, faBehanceSquare, faApple)結果
Before
After
結果は当たりだった！パフォーマンスが大幅改善。ビルドされたJSも400KBくらい軽くなっているので確実だろう。
可能なら、サイトで使った分を勝手に見てくれると楽なんだけどなw
ちなみに、vue-fontawesomeも同様の仕様でアイコンを指定しないとTree Shakingされず、ビルドされたJSが1MB越えになるため注意する。