Announcing trace profiling support for the SWC transform

[kwonoj]

It is exciting to share SWC now has built in support for diagnosing possible performance issues for its transform feature. It is not impossible to collect performance profile, but it requires either some platform-specific profiler setups, or a bit involved process to generate binaries manually. SWC now supports emit its internal tracing data to see its behavior more easily, agnostic to the platform on the release build of SWC.

Generating traces from transform

You'll need to enable tracing subscribers, which is currently behind of __experimental flags. We'd like to get some feedbacks, as well as polish its interfaces before making this as officially supported interface. It is still reasonably safe features.

Generating trace via CLI

New, native cli (#3859) provides a flag --experimental-trace. Both are same binary, only difference is distribution.

// Using @swc/core bundled cli
$> npx swcx compile ./src/... --experimental-trace

// Using cargo-installed, via `cargo install swc_cli`
$> swc compile ./src/... --experimental-trace

If you're using programmatic interfaces via @swc/core, you can enable it via __experimental_registerGlobalTraceConfig. Note @swc/wasm-* does not support tracing features.

import { transformFile, __experimental_registerGlobalTraceConfig } from '@swc/core';

// `fileName` is optional config to specify generated trace file name
__experimental_registerGlobalTraceConfig({'type': 'traceEvent', fileName?: string}); 

transformFile(...);
...

Important thing about registerGlobalTraceConfig is, as name implies it is global configuration applies into any subsequent calls. This is due to internal tracing logic works for the global dispatch only. Another important thing is, currently registerGlobalTraceConfig should be called before any other calls to @swc/core, like transform*. If trace is not registered and any transform is invoked, it'll register default subscriber which'll ignore attempt to enabling trace subscribers.

Once SWC completes, there's a file generated with specified filename or trace-${unixtimestampt}.json

Read, visualize traces

SWC generates its trace compatible to Trace event format (https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview). This is the format chromium uses for its tracing features. It is predefined JSON text, detailed specs can be found in linked spec document. This allows us to use existing ecosystem tools to diagnose, visualize traces as well. Once you have trace, you can use these tools to visualize it.

If you're using chrome, there is a built-in trace visualizer (chrome://tracing/). Or, there's a new visualizer named perfetto (https://ui.perfetto.dev/) instead. There are other flamegraph visualizers that work with traces as well, like speedscope (https://www.speedscope.app/).

What's next

We want to make this as stable features, including few improvements like

• Finalize interfaces to enable trace
• Add missing spans, or remove / optimize unnecessary spans
• Any other possible fixes or improvements based on the feedbacks

From there we'll try to expand this support over minifier, bundler and others as well.

[stahlbauer]

@kwonoj Awesome to read that you have added so much profiling capabilities into SWC. What is the relationship to https://github.com/kdy1/cargo-profile ?

[kwonoj]

zero relation. One is for the profiling, and one is for the application level tracing.