剖析和追蹤

追蹤

CPU 剖析或抽樣剖析會產生一個剖析檔，用於追蹤建置期間 JavaScript 的執行，並可用於找出程式碼庫的哪些部分，以及在建置期間在這些部分花費的時間。追蹤是一種更高級的剖析，它會追蹤 Parcel 執行的特定階段、呼叫了哪些外掛，以及在每個階段花費的時間。

Parcel 追蹤有助於你最佳化建置，例如回答「在建置期間哪個外掛花費的時間最長？」或「專案中哪個檔案的轉換時間最長？」等問題。這些問題無法透過 CPU 抽樣剖析提供的資料輕鬆回答，但可以用 Parcel 追蹤來回答。

執行追蹤的負擔相對較小，但並非零負擔 - 它肯定比在建置期間執行抽樣剖析的負擔還小。特別是，產生的 JSON 檔案可能會很大，具體取決於你使用的外掛數量和建置的大小。在決定是否啟用追蹤時，請考慮這些因素。

用法

CLI

若要使用 CLI 產生追蹤，請使用 --trace CLI 參數啟動 Parcel。Parcel 會在專案的根目錄產生一個追蹤 JSON 檔案。Parcel 會在建置開始時記錄它寫入追蹤的檔案名稱。

API

要使用 API 產生追蹤時，必須將 shouldTrace: true 與 Parcel 選項一起傳遞，才能啟用追蹤事件。此外，你需要透過 additionalReporters 新增追蹤器報告程式，才能讓 Parcel 建立追蹤 JSON 檔案。例如

import {Parcel} from '@parcel/core';

let bundler = new Parcel({
  // ...
  shouldTrace: true,
  additionalReporters: [{
    packageName: '@parcel/reporter-tracer',
    resolveFrom: __dirname,
  }],
});

格式

追蹤 JSON 檔案使用 Chrome 追蹤格式，類似於 CPU 剖析，但分析方式略有不同。

Parcel 追蹤僅包含類型 X 的完成事件。原始事件如下所示

{"ts":6020131,"pid":11738,"tid":4,"ph":"X","name":"@parcel/transformer-js","cat":"transform","args":{"name":"src/index.html"},"dur":11642},

分析追蹤

雖然你可以將 Parcel 追蹤載入 Chrome Dev Tools，但該工具中針對此類剖析的分析選項相當有限。這是因為資料並非 Dev Tools 所設計的典型資料。例如，追蹤事件包含可用於深入分析的元資料，而 Dev Tools 無法存取這些元資料。此外，中大型建置可能會產生大量資料，由於其大小，無法載入 Chrome Dev Tools。

分析 Parcel 追蹤的建議工具是 Perfetto，它也是由 Google 建置，但專門用於處理大型追蹤和非瀏覽器追蹤。特別是，Perfetto 最有用的部分在於分析這些追蹤，它會將資料載入 SQLite 資料庫，可透過 UI 查詢 - 這讓我們可以回答前面提到的各種問題。

範例查詢

以下是一些範例查詢，你可以將其輸入 Perfetto 中的「查詢 (SQL)」功能，以產生一些關於 Parcel 建置的有用統計資料。請記住，這些結果中的持續時間是總計採樣時間 - 由於 Parcel 的多執行緒實作，其中一些總計時間可能會超過 Parcel 建置的實際時間。

我的建置依據階段的細項是什麼？

這是一個高階查詢，它提供依據建置的主要階段（建置、打包、封裝）的細項，並且有助於在高階中識別出任何特定階段是否特別花費比預期更長的時間。

select
  name, SUM(CAST(dur AS double)/1000/1000) as dur_ms
from
  slice s
where
  s.category = "Core"
group by name
order by dur_ms desc

我的建置中哪些外掛花費的時間最長？

這有助於在高階中識別出 Parcel 花費最多時間的外掛。雖然其中一些將會是核心外掛，但在您使用自訂外掛或其他第三方外掛的建置中，這會是一個有用的查詢，以識別出是否有任何這些外掛花費的時間出乎意料地長 - 這有助於識別最佳化機會。

select
  s.category, name, SUM(CAST(dur AS double)/1000/1000) as dur_ms
from
  slice s
left join
  args using(arg_set_id)
where
  args.flat_key = "args.name"
group by s.category, name
order by dur_ms desc

在我的建置中，哪些 Babel 外掛花費的時間最長？

這有助於識別出您的建置中仍然需要哪些 Babel 外掛，以及由 @parcel/transform-babel 執行的外掛花費的時間最長，因此可以優先將其移除或替換為 Parcel 轉換。

select
  name, SUM(CAST(dur AS double)/1000/1000) as dur_ms
from
  slice s
left join
  args using(arg_set_id)
where
  args.flat_key = "args.name" AND
  s.category LIKE "transform:@parcel/transformer-babel%"
group by name
order by dur_ms desc