🦴
nuxtjs/google-fonts を使って Nuxt.js で Web フォントの読み込みを高速化する
先日、この記事が話題になっていて、Nuxt.js にも同じ機能がないかと調べたら見つかりました。
@nuxtjs/google-fonts
@nuxtjs/google-fonts は Google Fonts 用の Nuxt.js のモジュールです。このモジュールのオプションに download と inject というものがあり、これらを有効化することにより、Next.js の Font Optimizations と同じことが達成できます。
実際に試した
試したリポジトリはこれです。
nuxt.config.js に次の設定を追加しています。
nuxt.config.js
buildModules: [
['@nuxtjs/google-fonts', { families: { Inter: true }, display: 'block', download: true, inject: true }]
],
この状態で nuxt build/generate を実行するとローカルにフォントファイルと、それを読み込む CSS ファイルが生成されます。
オプションの inject を有効にしていると、生成された CSS ファイルをグローバル CSS として自動的に読み込みます。
おわりに
もとの Next.js の記事を見たときに、Nuxt.js に同じ機能がなかったら自作してみようかなと思ったんですが、すでにありましたね。
Next.js の方は HTML を解析して自動的に置き換える仕組みですが、Nuxt.js はモジュールとして提供されていてオプションの設定でインライン展開する仕組みで、思想に違いを感じますね。個人的には Nuxt.js のやり方の方がわかりやすくて好みです。
Discussion