🚀
【Next.js和訳】Advanced Features/Source Maps
この記事について
この記事は、Advanced Features/Source Mapsの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Source Maps
ソースマップとは、コンパイル前(元のコード)とコンパイル後の対応関係を記したファイル
開発環境の時には、ソースマップは、デフォルトで有効になっています。
ソースマップを生成すると、ビルド時間が大幅に長くなり、生成中のメモリ使用量も増えるため、プロダクションビルドでは無効になっています。
Next.js には、プロダクションビルド時にブラウザの ソースマップ生成を有効にするための設定フラグが用意されています。
next.config.js
module.exports = {
productionBrowserSourceMaps: true,
}
productionBrowserSourceMaps
オプションを有効にすると、ソースマップは JavaScript ファイルと同じディレクトリに出力されます。
Next.js はリクエストに応じてこれらのファイルを自動的に提供します。
警告 | Canveats
- ソースマップを追加すると、
next build
にかかる時間が長くなる -
next build
時のメモリ使用量が増加する
Discussion