Nuxt.jsで必要なFont Awesomeだけをimportする

Nuxt.jsでFont Awesomeを使用する際に使われる nuxt-fontawesome パッケージ。 やり方次第では全てのFont Awesomeのフォントを読み込みます。

（以前書いた記事がまさに全部のフォントを読み込む方法）

Nuxt.jsにFont Awesomeを導入する

その場合中々に容量食います。

画像だと分かりづらいですが、app.jsが 1.34MBあります。

$ npx nuxt-ts build --analyze

使っているフォントのみ読み込むようにする事でapp.jsの容量を削減出来るSEO対策に繋がるため、使っているフォント飲み読み込む方法を記載します。

必要なFont Awesomeのみを読み込む

nuxt.config.jsの設定を変更

fontawesome.importsと記載していた部分を

fontawesome: {
  imports: [
    {
      set: '@fortawesome/free-solid-svg-icons',
      icons: ['fas'],
    },
  ],
},

fontawesome.componentに変更します

fontawesome: {
  component: 'fa',
},

コンポーネントで読み込んでいる箇所の変更

コンポーネント側はnuxt.config.jsより手を加える部分が増えます。

template に <font-awesome-icon> と記載していたところを

<template>
  <font-awesome-icon icon="file-alt" class="icon" />
</template>

• 読み込みたいフォントをimport
• computedでimportしたフォントを呼び出せるように
• <font-awesome-icon> → <fa> に変更

の3点追加/変更します

<template>
  <fa :icon="faFileAlt" />
</template>
 
<script>
import { faFileAlt } from '@fortawesome/free-solid-svg-icons'
 
export default {
  computed: {
    faFileAlt() {
      return faFileAlt
    },
  },
}
</script>

これで必要なフォントのみを読み込む処理は完了です！

削減結果を調べる

私は4つのFont Awesomeを使っていたため、上記の方法で4つ読み込むようにしました。

その状態で改めて調べてみると

app.jsを 1.34MB → 675.46KB まで減らす事が出来ました！

約半分までダイエット完了です。