Zenn
Open2

Next.jsでtraceの解析結果を表示する

shiratorishiratori

1 trace用のプロジェクトを作成する

ここではnext-traceディレクトリにプロジェクトを用意する。
package.jsonを初期化する。

pnpm init

2 trace-to-tree.mjs を用意する

以下のファイルをダウンロードする
https://github.com/vercel/next.js/blob/canary/scripts/trace-to-tree.mjs

3 trace-to-tree.mjsでインポートされているモジュールを用意する

picocolors

以下のNPMの配信内容から以下のファイルをコピーする。

  • next/dist/lib/picocolors.js
  • next/dist/lib/picocolors.js.map

https://www.npmjs.com/package/next?activeTab=code

event-streamパッケージをインストール

pnpm i event-stream

プロダクトのリポジトリの.next内にあるtraceファイルを持ってくる

next-trace
 ┣ node_modules
 ┣ package.json
 ┣ picocolors.js
 ┣ picocolors.js.map
 ┣ pnpm-lock.yaml
 ┣ trace // プロダクトのtraceファイルを持ってくる
 ┗ trace-to-tree.mjs

コマンドを実行してtraceの内容を確認する

以下のコマンドを実行するとターミナルにtrace結果が表示される

node trace-to-tree.mjs trace

出力結果

next-trace $ node trace-to-tree.mjs trace
Explanation:
module /Users/next-user/src/magic-ui/pages/index.js 24s (total 33s, self 163 ms) [read-resource 873 µs, next-babel-turbo-loader 135 ms]
       ════════╤═══════════════════════════════════ ═╤═        ═╤═       ═╤════   ═══════════╤════════════════════════════════════════
               └─ name of the processed module       │          │         │                  └─ timings of nested steps
                                                     │          │         └─ building the module itself (including overlapping parallel actions)
                                                     │          └─ total build time of this modules and all nested ones (including overlapping parallel actions)
                                                     └─ how long until the module and all nested modules took compiling (wall time, without overlapping actions)

module lodash (lodash/camelCase.js + 281) 295 ms (self 958 ms) [read-resource 936 ms]
       ═╤════  ══════╤════════════   ═╤═
        │            │                └─ number of modules that are merged into that line
        │            └─ first module that is imported
        └─ npm package name


hot reloader
├─ start 2.5s (self 0 µs)
│  ├─ get-version-info 1.1s
│  ├─ clean 13 ms
│  └─ get-webpack-config 1.4s
│     ├─ create-pages-mapping 110 µs
│     ├─ create-entrypoints 1.1s
│     └─ generate-webpack-config 262 ms
├─ client compilation 317 ms
│  ├─ make 755 µs
│  ├─ seal 310 ms
│  │  ├─ chunk-graph 629 µs
│  │  ├─ optimize 683 µs
│  │  ├─ optimize-modules 17 µs
│  │  ├─ optimize-chunks 121 µs
│  │  ├─ optimize-tree 65 µs
│  │  ├─ optimize-chunk-modules 85 µs
│  │  ├─ module-hash 58 µs
│  │  ├─ code-generation 132 µs
│  │  ├─ hash 326 µs
│  │  ├─ code-generation-jobs 72 µs
│  │  ├─ module-assets 41 µs
│  │  └─ create-chunk-assets 120 µs
│  ├─ NextJsBuildManifest-createassets 833 µs
│  └─ NextJsBuildManifest-generateClientManifest 605 µs
├─ emit 4.6 ms
├─ server compilation 3.2 ms
│  ├─ make 773 µs
│  └─ seal 1.3 ms
│     ├─ chunk-graph 15 µs
│     ├─ optimize 578 µs
│     ├─ optimize-modules 2 µs
│     ├─ optimize-chunks 441 µs
│     ├─ optimize-tree 4 µs
│     ├─ optimize-chunk-modules 4 µs
│     ├─ module-hash 5 µs
│     ├─ code-generation 4 µs
│     ├─ hash 33 µs
│     ├─ code-generation-jobs 23 µs
│     ├─ module-assets 8 µs
│     └─ create-chunk-assets 9 µs
├─ emit 3.2 ms
├─ edge-server compilation 2.5 ms
│  ├─ make 95 µs
│  └─ seal 794 µs
│     ├─ chunk-graph 15 µs
│     ├─ optimize 150 µs
│     ├─ optimize-modules 3 µs
│     ├─ optimize-chunks 18 µs
│     ├─ optimize-tree 5 µs
│     ├─ optimize-chunk-modules 3 µs
│     ├─ module-hash 5 µs
│     ├─ code-generation 4 µs
│     ├─ hash 46 µs
│     ├─ code-generation-jobs 12 µs
│     ├─ module-assets 5 µs
│     └─ create-chunk-assets 8 µs
├─ emit 3.2 ms
├─ client recompilation (new page discovered) 7 ms
│  ├─ client compilation 1.5 ms
│  │  ├─ make 125 µs
│  │  ├─ seal 640 µs
│  │  │  ├─ chunk-graph 15 µs
│  │  │  ├─ optimize 150 µs
│  │  │  ├─ optimize-modules 2 µs
│  │  │  ├─ optimize-chunks 4 µs
│  │  │  ├─ optimize-tree 3 µs
│  │  │  ├─ optimize-chunk-modules 3 µs
│  │  │  ├─ module-hash 5 µs
│  │  │  ├─ code-generation 4 µs
│  │  │  ├─ hash 25 µs
│  │  │  ├─ code-generation-jobs 11 µs
│  │  │  ├─ module-assets 5 µs
│  │  │  └─ create-chunk-assets 7 µs
│  │  ├─ NextJsBuildManifest-createassets 75 µs
│  │  └─ NextJsBuildManifest-generateClientManifest 43 µs
│  └─ emit 2.6 ms
├─ server recompilation (new page discovered) 369 ms
│  ├─ server compilation 1.2 ms
│  │  ├─ make 228 µs
│  │  └─ seal 452 µs
│  │     ├─ chunk-graph 17 µs
│  │     ├─ optimize 103 µs
│  │     ├─ optimize-modules 2 µs
│  │     ├─ optimize-chunks 24 µs
│  │     ├─ optimize-tree 3 µs
│  │     ├─ optimize-chunk-modules 2 µs
│  │     ├─ module-hash 4 µs
│  │     ├─ code-generation 4 µs
│  │     ├─ hash 34 µs
│  │     ├─ code-generation-jobs 11 µs
│  │     ├─ module-assets 5 µs
│  │     └─ create-chunk-assets 7 µs
│  └─ emit 359 ms
├─ webpack-invalidated-edge-server 394 ms
│  ├─ edge-server compilation 2.6 ms
│  │  ├─ make 297 µs
│  │  └─ seal 943 µs
│  │     ├─ chunk-graph 18 µs
│  │     ├─ optimize 75 µs
│  │     ├─ optimize-modules 4 µs
│  │     ├─ optimize-chunks 5 µs
│  │     ├─ optimize-tree 4 µs
│  │     ├─ optimize-chunk-modules 5 µs
│  │     ├─ module-hash 5 µs
│  │     ├─ code-generation 5 µs
│  │     ├─ hash 29 µs
│  │     ├─ code-generation-jobs 12 µs
│  │     ├─ module-assets 6 µs
│  │     └─ create-chunk-assets 148 µs
│  └─ emit 19 ms
├─ server recompilation (new page discovered) 2.8s
│  ├─ server compilation 2.8s
│  │  ├─ make 2.7s
│  │  │  └─ entry next-app-loader?

（中略）

   │  │  ├─ entry next-flight-client-entry-loader?server=false!
   │  │  └─ entry next-flight-client-entry-loader?server=false!
   │  ├─ seal 13 ms
   │  │  ├─ chunk-graph 651 µs
   │  │  ├─ optimize 796 µs
   │  │  ├─ optimize-modules 3 µs
   │  │  ├─ optimize-chunks 186 µs
   │  │  ├─ optimize-tree 4 µs
   │  │  ├─ optimize-chunk-modules 4 µs
   │  │  ├─ module-hash 138 µs
   │  │  ├─ code-generation 831 µs
   │  │  ├─ hash 2 ms
   │  │  ├─ code-generation-jobs 98 µs
   │  │  ├─ module-assets 77 µs
   │  │  └─ create-chunk-assets 3.7 ms
   │  ├─ NextJsBuildManifest-createassets 326 µs
   │  └─ NextJsBuildManifest-generateClientManifest 265 µs
   └─ emit 3.1 ms
start-dev-server 4.7s
├─ setup-dev-bundler 3.3s
└─ run-instrumentation-hook 48 µs
compile-path 3.7s
handle-request 4.3s (self 4.3s)
└─ memory-usage 0 µs
compile-path 1.4s
handle-request 1.6s (self 1.6s)
└─ memory-usage 0 µs
compile-path 108 ms
handle-request 422 ms (self 422 ms)
└─ memory-usage 0 µs
compile-path 115 ms
next-trace $

説明部分の翻訳版


Explanation:
module /Users/next-user/src/magic-ui/pages/index.js 24s (total 33s, self 163 ms) [read-resource 873 µs, next-babel-turbo-loader 135 ms]
       ════════╤═══════════════════════════════════ ═╤═        ═╤═       ═╤════   ═══════════╤════════════════════════════════════════
               └─ 処理されたモジュールの名前　　　　　　　　│          │         │                  └─ ネストされたステップのタイミング
                                                     │          │         └─ モジュール自体の構築（重複する並列アクションを含む）
                                                     │          └─ このモジュールとすべてのネストされたモジュールの合計ビルド時間（重複する並列アクションを含む）
                                                     └─ モジュールとネストされたすべてのモジュールのコンパイルにかかった時間（重複アクションなしのウォールタイム）

module lodash (lodash/camelCase.js + 281) 295 ms (self 958 ms) [read-resource 936 ms]
       ═╤════  ══════╤════════════   ═╤═
        │            │                └─ その行にマージされるモジュールの数
        │            └─ 最初にインポートされるモジュール
        └─ npm パッケージ名