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

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

100点を取りました。

LightHouse100

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

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

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

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

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

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

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

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

open .nuxt/stats/client.html

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

analyze

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

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

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

performance20200917

PageSpeed Insight20200917

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

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