Nuxt.jsで不要なライブラリを見つけ出す方法

今回は、Nuxt.jsで不要なライブラリを洗い出す方法を解説しています。
開発しているとアンインストールし忘れたライブラリや不要なコードが積み重なっていくと思います。
nuxt analyzeを使用すると、JSやCSSを視覚化できます。

100点を取りました。

LightHouse100

パフォーマンスを改善する方法

  • 画像の軽量化・遅延読み込み
  • ライブラリのJS・CSSの軽量化・最適化
  • プロジェクトのJS・CSSの軽量化・最適化

上記が主にパフォーマンスを改善する方法です。

Nuxt.jsには、あらかじめwebpack-bundle-analyzerというライブラリが組み込まれており、どのライブラリがどれくらいの大きさなのか?を可視化することができます。

ステップ1: nuxt.config.jsの設定

nuxt.config.jsbuildプロパティを下記のように設定することでbuild時にanalyzeを実行することができます。

export default {
  build: {
    analyze: true, // 本番環境ではfalseに設定してください
  },
}

ステップ2: analysisの実行

また、nuxt.config.jsで設定しなくても、コマンドラインのオプションを付けることでanalyzeを実行できます。

yarn build --analyze
# もしくは
nuxt build --analyze

上記コマンドを実行すると、ライブラリの大きさを示した.nuxt/stats/client.htmlが生成されます。

open .nuxt/stats/client.html

ステップ3: 結果をみる

開いた結果が以下の通りです。

analyze

  • Bootstrap
  • moment.js

が大きいようなので、これらのライブラリを変更する。もしくは無くすことができれば、パフォーマンス改善することができます。

また、プロジェクトの内のVueファイルのJSもバンドルされ可視化されているのでコードのリファクタリングに役立てることができます。

ステップ4: 改善 - ライブラリの変更・アンインストール

  • Change moment.js to dayjs.
  • Uninstall Bootstrap.

I tried running the above. The results are as follows.

Light House

Light House

performance20200917

ページスピードインサイト

ページスピードインサイト

PageSpeed Insight20200917

※現状Google Adsenseを使用しているので、点数が落ちています。

以上、「Nuxt.jsで不要なライブラリを洗い出す方法」を解説してきました。
この他にも、Light Houseでの分析結果を見て、パフォーマンスを上げていく方法があります。是非いろいろな改善方法を探してみてください!