質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

解決済

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

holic
holic

総合スコア132

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

1回答

0グッド

1クリップ

6213閲覧

投稿2018/12/16 05:28

編集2018/12/16 05:30

前提・実現したいこと

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

2

ベストアンサー

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

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

js

1build: { 2 extend (config) { 3 config.performance = config.performance || {} 4 config.performance.maxEntrypointSize = 700 * 1024 5 } 6}

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

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

投稿2018/12/16 06:51

yhg

総合スコア2161

xKxAxKx, shuto👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

holic

2018/12/16 07:21 編集

webpackについてあまり詳しくなく、コメントいただけて大変うれしいです。 whg様の回答内容と試行錯誤の末、下記のソースで解決いたしました。 ありがとうございます。 build: { extend(config) { config.performance = config.performance || {} config.performance.maxEntrypointSize = 1200 * 1024 config.performance.maxAssetSize = 700 * 1024 } },

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。