Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
160
Help us understand the problem. What is going on with this article?
@devneko

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

More than 3 years have 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

160
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  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
devneko
フリーのプログラマです。 ウェブシステム開発、スマホアプリ開発にフルスタックで対応可能です。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
160
Help us understand the problem. What is going on with this article?