Одна из классных идей в новой CLI - кастомные трейсы в формате Trace Event Format
Идея взята у 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:
Во вложении пример визуализации кастомного трейса на сборку и несколько ребилдов, в интерфейсе https://ui.perfetto.dev/. Очень удобно смотреть сколько времени занимают основные операции, какие блокируют друг друга, где произошла ошибка (трейсы пишутся на диск не в конце а все время жизни скрипта)
В идеале - еще собирать более подробные трейсы по сборке через хуки бандлера.
Идея взята у 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/. Очень удобно смотреть сколько времени занимают основные операции, какие блокируют друг друга, где произошла ошибка (трейсы пишутся на диск не в конце а все время жизни скрипта)
В идеале - еще собирать более подробные трейсы по сборке через хуки бандлера.
🔥9
tgoop.com/super_oleg_dev/224
Create:
Last Update:
Last Update:
Одна из классных идей в новой CLI - кастомные трейсы в формате Trace Event Format
Идея взята у 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:
Во вложении пример визуализации кастомного трейса на сборку и несколько ребилдов, в интерфейсе https://ui.perfetto.dev/. Очень удобно смотреть сколько времени занимают основные операции, какие блокируют друг друга, где произошла ошибка (трейсы пишутся на диск не в конце а все время жизни скрипта)
В идеале - еще собирать более подробные трейсы по сборке через хуки бандлера.
Идея взята у 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/. Очень удобно смотреть сколько времени занимают основные операции, какие блокируют друг друга, где произошла ошибка (трейсы пишутся на диск не в конце а все время жизни скрипта)
В идеале - еще собирать более подробные трейсы по сборке через хуки бандлера.
BY SuperOleg dev notes


Share with your friend now:
tgoop.com/super_oleg_dev/224