ロゴテキスト ロゴ

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

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

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


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



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

    Font Awesome全て読み込んだ時のanalyze結果

    画像だと分かりづらいですが、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つ読み込むようにしました。


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

    Font Awesomeで必要なフォントのみを読み込んだanalyze結果


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

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

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。