Menu

ローカル開発環境の最適化方法

Next.jsは優れた開発者体験を提供するように設計されています。アプリケーションが成長するにつれて、ローカル開発中にコンパイル時間が遅くなることに気づくかもしれません。このガイドでは、一般的なコンパイル時のパフォーマンス問題を特定して修正する方法を紹介します。

ローカル開発と本番環境の違い

next devによる開発プロセスは、next buildとnext startとは異なります。

next devはアプリケーション内のルートを開いたりナビゲートしたりする際にコンパイルします。これにより、アプリケーション内のすべてのルートがコンパイルされるのを待たずに開発サーバーを起動できるため、より高速かつメモリ使用量が少なくなります。本番ビルドでは、ファイルの縮小やコンテンツハッシュの作成など、ローカル開発では必要のない他の最適化が適用されます。

ローカル開発のパフォーマンス改善

1. コンピュータのアンチウイルスを確認する

アンチウイルスソフトウェアはファイルアクセスを遅くする可能性があります。

プロジェクトフォルダをアンチウイルスの除外リストに追加してみてください。これはWindowsマシンでより一般的ですが、アンチウイルスツールがインストールされているすべてのシステムでこれをお勧めします。

2. Next.jsを更新してTurbopackを有効にする

最新バージョンのNext.jsを使用していることを確認してください。各新バージョンには、パフォーマンスの改善が含まれていることがよくあります。

TurbopackはNext.jsに統合された新しいバンドラーで、ローカルのパフォーマンスを向上させることができます。

npm install next@latest
npm run dev --turbopack

Turbopackについて詳しく学ぶ。詳細については、アップグレードガイドとコードモッドを参照してください。

3. インポートを確認する

コードのインポート方法は、コンパイルとバンドル時間に大きく影響する可能性があります。パッケージバンドリングの最適化について詳しく学び、Dependency CruiserやMadgeなどのツールを探索してください。

アイコンライブラリ

@material-ui/iconsやreact-iconsなどのライブラリは、いくつかしか使用しなくても何千ものアイコンをインポートする可能性があります。必要なアイコンのみをインポートするようにしてください：

// こうではなく：
import { Icon1, Icon2 } from 'react-icons/md'
 
// このようにする：
import Icon1 from 'react-icons/md/Icon1'
import Icon2 from 'react-icons/md/Icon2'

react-iconsのようなライブラリには多くの異なるアイコンセットが含まれています。1つのセットを選んでそのセットを使い続けましょう。

例えば、アプリケーションでreact-iconsを使用し、以下のすべてをインポートしている場合：

  • pi (Phosphor Icons)
  • md (Material Design Icons)
  • tb (tabler-icons)
  • cg (cssgg)

これらを組み合わせると、各セットから1つだけインポートする場合でも、コンパイラが処理しなければならない数万のモジュールになります。

バレルファイル

「バレルファイル」は、他のファイルから多くの項目をエクスポートするファイルです。インポートを使用してモジュールスコープに副作用があるかどうかを見つけるためにコンパイラが解析する必要があるため、ビルドを遅くする可能性があります。

可能な限り、特定のファイルから直接インポートするようにしてください。バレルファイルについて詳しく学ぶとNext.jsに組み込まれた最適化についても確認してください。

パッケージインポートの最適化

Next.jsは特定のパッケージのインポートを自動的に最適化できます。バレルファイルを利用するパッケージを使用している場合は、それらをnext.config.jsに追加してください：

module.exports = {
  experimental: {
    optimizePackageImports: ['package-name'],
  },
}

Turbopackはインポートを自動的に分析して最適化します。この設定は必要ありません。

4. Tailwind CSSの設定を確認する

Tailwind CSSを使用している場合は、正しく設定されていることを確認してください。

よくある間違いは、content配列をnode_modulesや他のスキャンすべきでない大きなディレクトリのファイルを含むような方法で設定することです。

Tailwind CSSバージョン3.4.8以降では、ビルドを遅くする可能性のある設定について警告します。

  1. tailwind.config.jsでは、スキャンするファイルを具体的に指定します：

    module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}', // 良い
    // これは広すぎるかもしれません
    // `packages/**/node_modules`にもマッチします
    // '../../packages/**/*.{js,ts,jsx,tsx}',
  ],
}

  2. 不要なファイルのスキャンを避ける：

    module.exports = {
  content: [
    // より良い - 'src'フォルダのみをスキャン
    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
  ],
}

5. カスタムwebpack設定を確認する

カスタムwebpack設定を追加した場合、それがコンパイルを遅くしている可能性があります。

ローカル開発に本当に必要かどうかを検討してください。特定のツールを本番ビルドにのみ含めるか、Turbopackに移行してローダーを使用することも検討できます。

6. メモリ使用量を最適化する

アプリケーションが非常に大きい場合、より多くのメモリが必要かもしれません。

メモリ使用量の最適化について詳しく学ぶ。

7. サーバーコンポーネントとデータ取得

サーバーコンポーネントの変更は、新しい変更を表示するためにローカルでページ全体を再レンダリングする原因となり、コンポーネントの新しいデータの取得も含まれます。

実験的なserverComponentsHmrCacheオプションを使用すると、ローカル開発環境のホットモジュールリプレイスメント（HMR）更新間でサーバーコンポーネント内のfetchレスポンスをキャッシュできます。これにより、応答が高速化され、課金対象のAPI呼び出しのコストが削減されます。

実験的なオプションについて詳しく学ぶ。

問題を見つけるためのツール

詳細なフェッチログ

開発中に何が起こっているかについてより詳細な情報を確認するには、このコマンドを使用します：

next dev --verbose

Turbopackトレーシング

Turbopackトレーシングは、ローカル開発中にアプリケーションのパフォーマンスを理解するのに役立つツールです。 各モジュールのコンパイルにかかる時間と、それらがどのように関連しているかについての詳細情報を提供します。

  1. 最新バージョンのNext.jsがインストールされていることを確認します。

  2. Turbopackトレースファイルを生成します：

    NEXT_TURBOPACK_TRACING=1 npm run dev

  3. アプリケーション内を移動したり、ファイルを編集したりして問題を再現します。

  4. Next.js開発サーバーを停止します。

  5. .nextフォルダにtrace-turbopackというファイルが利用可能になります。

  6. next internal trace [path-to-file]を使用してファイルを解釈できます：

    next internal trace .next/trace-turbopack

    traceが利用できないバージョンでは、コマンドはturbo-trace-serverと名付けられていました：

    next internal turbo-trace-server .next/trace-turbopack

  7. トレースサーバーが実行されると、https://trace.nextjs.org/ でトレースを表示できます。

  8. デフォルトではトレースビューアはタイミングを集計しますが、各個別の時間を確認するには、ビューアの右上にある「Aggregated in order」から「Spans in order」に切り替えることができます。

まだ問題がありますか？

Turbopackトレーシングセクションで生成されたトレースファイルをGitHub DiscussionsまたはDiscordで共有してください。