この記事は最終更新日から1年以上が経過しています。

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

2020-09-15
2021-03-06

今回は、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を実行することができます。

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

ステップ2: analysisの実行

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

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

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

bash
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での分析結果を見て、パフォーマンスを上げていく方法があります。是非いろいろな改善方法を探してみてください!