# Nuxtjs build WARNING in entrypoint size limit

Entrypoint app [big] = a1dac88.js 81098eb.js 9532bbd.js 23ffa69.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  e7bc73c.js (708 KiB)
  23ffa69.js (432 KiB)
  81098eb.js (286 KiB)
  9532bbd.js (1.43 MiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (1000 KiB). This can impact web performance.
Entrypoints:
  app (2.13 MiB)
      a1dac88.js
      81098eb.js
      9532bbd.js
      23ffa69.js

この警告は、Nuxtjs のビルド時にエントリーポイントのアセットサイズが推奨される制限を超えて大きすぎるために表示されています。大きなファイルサイズは、ページの読み込み時間やレンダリング時間を増加させ、ユーザーエクスペリエンスを低下させる可能性があります。

# 一時措置

デフォルトでは250kbに超えたらアラート表示するようになっています。もちろん設定のmaxAssetSizeを大きくすればアラート表示されなくなります。

  build: {
    babel: {
      compact: true,
    },
    extend(config) {
      config.performance.hints = false
      config.performance.maxAssetSize = 500 * 1024
    },
  },

• performance.hints 設定変更することで、アラートを非表示にする
• performance.maxAssetSize 設定変更で許可する最大値を引き上げることで、アラート表示回避する

# 根本解決方法

一言でいうと、コード全体のリファクタリングが必要です。

# コードの最適化

コードの最適化を行い、不要な部分を削除することでファイルサイズを減らすことができます。たとえば、未使用のコードやライブラリを削除したり、コードを圧縮したりすることが挙げられます。

# 分割

エントリーポイントを複数の小さなモジュールに分割することで、ファイルサイズを減らすことができます。これにより、ページの読み込みに必要なリソースが分散され、ロード時間が短縮されます。

# 非同期読み込み

大きなファイルを非同期で読み込むことで、初期ロード時間を短縮することができます。たとえば、遅延読み込み（Lazy Loading）を使用して、ページが表示されるまで必要のないリソースを遅延させることができます。

# コードスプリット

コードを機能別やページ別に分割し、必要な時にロードすることで、初期ロード時間を短縮することができます。Nuxtjs では、動的インポートを使用してコードスプリットを実装することができます。