nuxt buildとnuxt generateのパフォーマンス向上させる方法を紹介します。
目次
nuxt buildのパフォーマンス向上
「HardSourceWebpackPlugin」の活用
HardSourceWebpackPluginは、モジュールの中間キャッシュを活用することで、2回目以降のビルドの実行速度を向上させることができます。
参考：mzgoddard/hard-source-webpack-plugin
HardSourcePluginをインストールします。
nuxt.config.jsのbuildのextendに下記の2行を追加します。
・nuxt.config.js
実際に「npm run build」コマンドでビルドしてみます。2回目以降にキャッシュされたデータを読み込むため実行速度が早くなります。
キャッシュの読み取りエラー
キャッシュが正常に読み込めずにエラーになりちょいとはまりました。。
このエラーですが、/node_modules/.cache/hard-source/のキャッシュフォルダーを削除することで、解決できました。
ビルドオプションのparallelの有効化
ビルドオプションのparallelをtrueすることで、webpackのビルドでthread-loaderを有効化されます。
loaderの処理を並列実行することで高速ビルドを可能にするそうで試してみたのですが、今回はbuild時間があまり変わらなかったです。。
・nuxt.config.js
nuxt generateのパフォーマンス向上
「nuxt-generate-cluster」の活用
nuxt-generate-clusterによって静的ファイルのgenerateを並列処理すること可能となり、大幅にパフォーマンスを向上させることができます。
参考：nuxt-community/nuxt-generate-cluster: Multi-threaded generator command for nuxt.js
nuxt-generate-clusterをインストールします。
次にpackage.jsonのscriptsのgenerateコマンドを「nuxt-generate -w 4 -b」に変更します。今回は環境ごとに実行しているため、それぞれに適用させます。
・package.json
「npm run generate」コマンドでgenerateを実行してみます。以下のようにworkerがスタートしていることがわかります。
圧倒的にgenerateの時間が早くなりました。これでビルド時間を半分まで短縮できました。
必要なデータのみAPIから取得
APIからの不要なデータまで取得していたため、必要なデータのみ取得するように修正しました。
payloadが必要ないデータはrouteに必要なidのみ返すようにしました。
・例(Rails)
・例(Rails)
pageに使っていないカラムは返さないようにしました。
さらにパフォーマンス向上
Webpack Bundle Analyzerを使って、ファイルサイズを確認します。
実行すると以下のようなページが生成されます。ここからどのファイルが重いかを特定し、軽量化することでパフォーマンス向上につながります。
例えば、moment.jsをdata.jsにすることで軽量化することができます。
以上、nuxt buildとnuxt generateのパフォーマンス向上させる方法を紹介しました。
