nuxt buildとnuxt generateのパフォーマンス向上させる方法を紹介します。
目次
nuxt buildのパフォーマンス向上
「HardSourceWebpackPlugin」の活用
HardSourceWebpackPluginは、モジュールの中間キャッシュを活用することで、2回目以降のビルドの実行速度を向上させることができます。
参考：mzgoddard/hard-source-webpack-plugin
HardSourcePluginをインストールします。
1 | $ npm install --save hard-source-webpack-plugin |
nuxt.config.jsのbuildのextendに下記の2行を追加します。
・nuxt.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | ... /* ** Build configuration */ build: { /* ** You can extend webpack config here */ extend (config, ctx) { const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') config.plugins.push(new HardSourceWebpackPlugin()) } }, ... |
実際に「npm run build」コマンドでビルドしてみます。2回目以降にキャッシュされたデータを読み込むため実行速度が早くなります。
1 2 3 | [hardsource:571a2842] Using 180 MB of disk space. 20:09:15 [hardsource:571a2842] Tracking node dependencies with: package-lock.json, yarn.lock. 20:09:15 [hardsource:571a2842] Reading from cache 571a2842... |
キャッシュの読み取りエラー
キャッシュが正常に読み込めずにエラーになりちょいとはまりました。。
1 | ERROR [hardsource:319a7e60] Could not freeze ./~ |
このエラーですが、/node_modules/.cache/hard-source/のキャッシュフォルダーを削除することで、解決できました。
1 | $ rm -rf node_modules/.cache/hard-source/ |
ビルドオプションのparallelの有効化
ビルドオプションのparallelをtrueすることで、webpackのビルドでthread-loaderを有効化されます。
loaderの処理を並列実行することで高速ビルドを可能にするそうで試してみたのですが、今回はbuild時間があまり変わらなかったです。。
・nuxt.config.js
1 2 3 4 5 6 7 | ... build: { parallel: true, } ... |
nuxt generateのパフォーマンス向上
「nuxt-generate-cluster」の活用
nuxt-generate-clusterによって静的ファイルのgenerateを並列処理すること可能となり、大幅にパフォーマンスを向上させることができます。
参考：nuxt-community/nuxt-generate-cluster: Multi-threaded generator command for nuxt.js
nuxt-generate-clusterをインストールします。
1 | $ yarn add nuxt-generate-cluster |
次にpackage.jsonのscriptsのgenerateコマンドを「nuxt-generate -w 4 -b」に変更します。今回は環境ごとに実行しているため、それぞれに適用させます。
・package.json
1 2 3 4 5 6 7 8 9 | ... "scripts": { "generate:dev": "cross-env NODE_ENV=\"development\" nuxt-generate -w 4 -b", "generate:stg": "cross-env NODE_ENV=\"staging\" nuxt-generate -w 4 -b", "generate:prod": "cross-env NODE_ENV=\"production\" nuxt-generate -w 4 -b", } ... |
「npm run generate」コマンドでgenerateを実行してみます。以下のようにworkerがスタートしていることがわかります。
1 2 3 4 5 6 | ℹ retrieving routes ℹ 62 routes will be generated ℹ worker 1 started with pid 12661 ℹ worker 2 started with pid 12662 ℹ worker 3 started with pid 12663 ℹ worker 4 started with pid 12664 |
圧倒的にgenerateの時間が早くなりました。これでビルド時間を半分まで短縮できました。
必要なデータのみAPIから取得
APIからの不要なデータまで取得していたため、必要なデータのみ取得するように修正しました。
payloadが必要ないデータはrouteに必要なidのみ返すようにしました。
・例(Rails)
1 2 3 | def index render json: ::Shop.all.pluck(:id) end |
・例(Rails)
pageに使っていないカラムは返さないようにしました。
1 2 3 | def index render json: ::Shop.select(:id, :name) end |
さらにパフォーマンス向上
Webpack Bundle Analyzerを使って、ファイルサイズを確認します。
1 | $ yarn build --analyze |
実行すると以下のようなページが生成されます。ここからどのファイルが重いかを特定し、軽量化することでパフォーマンス向上につながります。
例えば、moment.jsをdata.jsにすることで軽量化することができます。
以上、nuxt buildとnuxt generateのパフォーマンス向上させる方法を紹介しました。