2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【nuxt.js】FontAwesomeを「軽く」使用する方法

Posted at

nuxtアプリにFontAwesomeを導入する際、より「軽く」するためのメモになります。
##前提
nuxtにFontAwesomeをインストールする方法は、公式ドキュメントに載っていますので割愛します。(要約して記事にしている方も多いですし)
参考:nuxt-fontawesome
##FontAwesomeは重い
FontAwesomeは普通に実装すると結構重いです。そのため、軽くするための工夫が必要になります。
以下のように使用するアイコンの名前を直接指定すると、指定されたアイコンのみ読み込みます。

nuxt.config.js
fontawesome: {
    imports: [
      {
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['faBars', ],//['fas']だと全て読み込んでしまう
      },
    ],
},

状況にもよるかと思いますが、私のプロダクトの場合は体感で3~4秒ほど初期ロードが短縮されました。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?