nuxtアプリにFontAwesomeを導入する際、より「軽く」するためのメモになります。
##前提
nuxtにFontAwesomeをインストールする方法は、公式ドキュメントに載っていますので割愛します。(要約して記事にしている方も多いですし)
参考:nuxt-fontawesome
##FontAwesomeは重い
FontAwesomeは普通に実装すると結構重いです。そのため、軽くするための工夫が必要になります。
以下のように使用するアイコンの名前を直接指定すると、指定されたアイコンのみ読み込みます。
nuxt.config.js
fontawesome: {
imports: [
{
set: '@fortawesome/free-solid-svg-icons',
icons: ['faBars', ],//['fas']だと全て読み込んでしまう
},
],
},
状況にもよるかと思いますが、私のプロダクトの場合は体感で3~4秒ほど初期ロードが短縮されました。