Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away