Идея взята у Parcel, Rspack и Next.js, примеры:
- https://parceljs.org/features/profiling/#tracing
- https://github.com/parcel-bundler/parcel/blob/v2/packages/core/profiler/src/Tracer.js
- https://rspack.dev/contribute/development/tracing
Написал кастомный трейсер поверх либы chrome-trace-event, пример API:
const tracer = new Tracer();
tracer.wrap({ event: 'event' }, async () => {
await doSomethingAsync();
});
Во вложении пример визуализации кастомного трейса на сборку и несколько ребилдов, в интерфейсе https://ui.perfetto.dev/. Очень удобно смотреть сколько времени занимают основные операции, какие блокируют друг друга, где произошла ошибка (трейсы пишутся на диск не в конце а все время жизни скрипта)
В идеале - еще собирать более подробные трейсы по сборке через хуки бандлера.