うしろのこの本ください

なんでもかきます

font-awesomeをtree shakingする

メモ

Nuxtのpluginsでfont-awesome(pro)を読み込んでいたが、脳死で全部importしていてくそでかall.jsが鎮座し虚無だった。 不要なフォントをtree shakingするようにした。

befor

import '@fortawesome/fontawesome-pro/js/all'

after

import { dom, library } from '@fortawesome/fontawesome-svg-core'
import { faAngleRight } from '@fortawesome/pro-regular-svg-icons/faAngleRight'
import { faAngleLeft } from '@fortawesome/pro-regular-svg-icons/faAngleLeft'

library.add(faAngleRight, faAngleLeft)
dom.watch()

これでプロジェクト内ではdeep importされているアイコンが使え、残りはwebpackのビルドで落ちる。

before f:id:apple19940820:20200328003027p:plain

after f:id:apple19940820:20200328003218p:plain

2MBくらい減って笑顔になった。font周りは下手なjsライブラリよりもビルドサイズ肥大化に貢献してくるため注意したい。

参考 https://fontawesome.com/how-to-use/with-the-api/other/tree-shaking