Nuxt.jsのパフォーマンス向上テクニック #JavaScript

Nuxt.jsのプロジェクトで使用しているパフォーマンス向上のためのテクニックです。

.nuxt/dist と static ディレクトリはNginxから直接配信する

静的ファイルはNuxt.jsのサーバを使わずにNginxから配信します。CDNなどを使うともっと効果的でしょう。

location / {
    root /path/to/nuxt/static;
    try_files $uri @proxy;
}
location @proxy {
    proxy_pass http://127.0.0.1:3000;
}
location /_nuxt {
    alias /path/to/nuxt/.nuxt/dist;
}

APIエンドポイントをサーバーとクライアントで分ける

SSRのサーバとAPIサーバが同一LAN内の場合は、余計なネットワークコストを発生させないように、SSR時はLAN内で通信が閉じるエンドポイントを使うようにします。

const config = {
  api_host: 'http://example.net/api/v1/',
  api_host_local: 'http://localhost/api/v1/',
}

if (process.server) {
  axios.defaults.baseURL = config.api_host_local
} else {
  axios.defaults.baseURL = config.api_host
}

デバイス種別を判断してDOMレンダリングを抑制する

デバイス種別ごとに表示内容を変化させたい場合、CSSフレームワークのレスポンシブの機能を使う場合が多いと思いますが、この方法だとDOM自体は生成されてしまいます。
デバイス種別を判断してv-ifなどでDOMのレンダリングを抑制することで、DOMのレンダリング量を減らしています。

こちらの例ではnuxt-device-detectというNuxtモジュールを使用しています。自前のモジュールですがnpmで公開していますので良かったら使ってみてください。

<div v-if="$device.isMobile">
  モバイル
</div>
<div v-else>
  デスクトップ
</div>

API呼び出しは並列にする

Nuxt.jsは関係ないですが、asyncData()内などで複数の独立したAPI呼び出しがある場合に、毎回awaitせずにPromise.all()などを使うと並列にAPI呼び出しできるので高速になります。

async asyncData({app}) {
  let [hogeResult, piyoResult] = await Promise.all([
    app.$axios.get('http://example.com/api/v1/hoge'),
    app.$axios.get('http://example.com/api/v1/piyo'),
  ])
}

PWAモジュールを入れる

Nuxtの公式モジュールにpwa-moduleというものがあります。これはモジュールを入れるだけでサービスワーカーなど、PWAに必要な機能を導入してくれる優れものです。
PWAモジュールは複数のモジュールの詰め合わせで、PWAモジュールに含まれるworkboxモジュールによってサービスワーカーが導入され、より強力にキャッシュが効くようになります。

yarn add @nuxtjs/pwa

// nuxt.config.js
{
  modules: [
    '@nuxtjs/pwa'
  ]
}

その他

以前書いたこちらの記事の「JSのサイズを小さくするために」の内容も初回レンダリングのパフォーマンス向上に役立つ場合があると思います。
Nuxt.jsの本格導入で遠回りしないためのTips v1.1