What is a minified DOM?
DOM minification is the process by which human-readable names for CSS class names and attributes are transpiled to shorter names to improve performance. Though minification does provide some network performance benefits, most assets are now gzipped before sending them, so the benefit is often small.
Below is an example of a minified DOM using a plugin for React called Styled Components.
<body>
<div>
<div class="sc-AxirZ keCbpo">
<h1 class="sc-AxiKw hhKuGK">Example Minified DOM</h1>
<button class="sc-AxjAm gIZUvF">Submit</button>
</div>
</div>
</body>How does it impact Heap usage?
When Heap autocaptures a click, the hierarchy for the autocaptured element is sent to our servers. Heap then allows you to query for that event using a CSS selector. If the class names and attributes change between builds of the web app, it can be difficult to analyze events over time.
In the above DOM, Heap would capture a click on the Submit button as a CSS selector which looks like the following: div div.sc-AxirZ.keCbpo button.sc-AxjAm.gIZUvF. These class names are likely to change between builds and don’t yield semantically useful event definitions.
Fortunately, there are a number of strategies you can employ to make Heap useful when working with minified DOMs. These strategies are discussed in the following guides: