Vueでtree shakingが効くようにFont Awesomeを使用する

概要

VueでFont Awesomeを使用する際にtree shakingが効くやり方を調べた。(結果的にvueに限らないやり方になった)

依存ライブラリを増やしたくないので今回はvue-fontawesomeの使用は見送った。

やること

基本パッケージのインストール

yarn add @fortawesome/fontawesome-svg-core

必要に応じてアイコンのインストール

yarn add @fortawesome/free-solid-svg-icons

後は以下のように必要なアイコンを都度インポートする

import { dom, library } from "@fortawesome/fontawesome-svg-core";
import { faDog, faCat } from '@fortawesome/free-solid-svg-icons';

library.add(faDog, faCat);

// 動的にタグが生成されても適用されるように
dom.watch();

これでtree shakingが効く状態でFont Awesomeが使えるようになる。めでたしめでたし

ダメな例

以下のように書いてしまうと、tree shakingが効かずにバンドルサイズがどえらいことになる(筆者環境では200kbくらい増えた)

import { library } from "@fortawesome/fontawesome-svg-core"
import { fas } from "@fortawesome/free-solid-svg-icons"

library.add(fas)

参考

1年後に差がつくFont Awesome5 ～フロントエンド開発(ES6,Webpack4,Babel7)への導入～ - Qiita
雑記ブログ：FontAwesomeを軽量化する - Qrac BLOG