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

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

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


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



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


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


容量を調べる方法は

$ npx nuxt-ts build --analyze

で調べる事が出来ます




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

検証した環境

1 nuxt 2.14.3
2 nuxt-fontawesome 0.4.0

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

nuxt.config.jsの設定を変更

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

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

fontawesome.componentに変更します

nuxt.config.js
fontawesome: {
  component: 'fa',
},

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

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



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

FontAwesomeを使っているコンポーネント.vue
<template>
  <font-awesome-icon icon="file-alt" class="icon" />
</template>

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

の3点追加/変更します

FontAwesomeを使っているコンポーネント.vue
<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 まで減らす事が出来ました!

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

おすすめ