nuxt.js ビルドしたときのvendors.app.jsのlimitサイズ上限を上げたい。

Question

前提・実現したいこと

nuxt.jsを使用して、サイトを一通り構築し終えました、
その後にbuildして、distファイルにしようとしたところでエラーが発生。

「vendors.app.jsファイルサイズが大きい」と怒られてしまいました。
調べましたらnuxt.jsではbuild時の1つのjsのリミット値が300kBと上限が決まっていると理解しました。
本来ならばvendors.app.jsが重くならないようにメンテナンスをするのが、サイトの軽量化の意味も込めて大切だと思いますが、

手短な解決策として、この300kB上限値をnuxt.config.jsの設定などで700kBにあげることはできないのでしょうか。
タイトルには「vendors.app.jsのlimitサイズ」と銘打ってしまいましたが、すべてのjsファイルに対してのlimitサイズ変更でも全然かまいません。
nuxt.jsに詳しい方がいらっしゃいましたら、ご教示お願い致します。

補足情報（FW/ツールのバージョンなど）

nuxtヴァージョンは2.3.2

Answer 1

Nuxt.js というよりも webpack のパフォーマンスヒントですね。

• Performance (https://webpack.js.org/configuration/performance/#performance-maxentrypointsize)

Nuxt.js における wepack の設定は nuxt.config.js の build.extend オプションで細かく設定できます。

build: {
  extend (config) {
    config.performance = config.performance || {}
    config.performance.maxEntrypointSize = 700 * 1024
  }
}

それとちょうど昨日、リクルートテクノロジーズさんのブログでご参考になりそうな良記事が公開されましたのでリンク貼っておきます。

• webpackのbundle後のJavaScriptのサイズを減らしている話 | リクルートテクノロジーズ　メンバーズブログ

補足：Nuxt.js では nuxt build --analyze または nuxt build -a コマンドでバンドルアナライザーを起動できます。

Comments

[holic]

webpackについてあまり詳しくなく、コメントいただけて大変うれしいです。
whg様の回答内容と試行錯誤の末、下記のソースで解決いたしました。
ありがとうございます。

build: {
extend(config) {
config.performance = config.performance || {}
config.performance.maxEntrypointSize = 1200 * 1024
config.performance.maxAssetSize = 700 * 1024
}
},