https://github.com/krofdrakula/preact-perf-profiler

A dead simple rendering performance utility for Preact components
https://github.com/krofdrakula/preact-perf-profiler

performance preact preact-components

Last synced: about 2 months ago
JSON representation

A dead simple rendering performance utility for Preact components

• Host: GitHub
• URL: https://github.com/krofdrakula/preact-perf-profiler
• Owner: KrofDrakula
• License: mit
• Created: 2018-03-07T20:25:59.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2023-07-13T12:35:28.000Z (over 1 year ago)
• Last Synced: 2024-10-08T04:00:46.001Z (3 months ago)
• Topics: performance, preact, preact-components
• Language: TypeScript
• Homepage: https://krofdrakula.github.io/preact-perf-profiler/
• Size: 1.13 MB
• Stars: 22
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `preact-perf-profiler`

![GZip Size](https://badgen.net/bundlephobia/minzip/preact-perf-profiler)

![Dependency Count](https://badgen.net/bundlephobia/dependency-count/preact-perf-profiler)

![Tree Shaking](https://badgen.net/bundlephobia/tree-shaking/preact-perf-profiler)

This library allows you to register a Preact component for measuring its rendering performance using the [User Timing Performance API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing). The measurements show up in the Performance tab timeline in Chromium-based browsers and Firefox browsers and are available through the [`PerformanceObserver` API](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/Performance_data) if you would like to collect remote telemetry from clients.

## Demo

Open [the demo site](https://krofdrakula.github.io/preact-perf-profiler/) to see it in action.

You can also check out the demo locally and run it on your own machine:

```bash

pnpm install

pnpm run dev

```

Open Dev Tools and you should be able to see the performance measure for the tracked component:

![Alt text](assets/image.png)

## Usage

The API consist of two methods that take a component class or function and returns it:

- `track(k: ComponentType) => void`

- `untrack(k: ComponentType) => void`

Registering a component adds that component to a `Set` of components. This means that multiple registrations will only add the tracked component once. Same for unregistering.

The easiest way to track a component is to register it where it is defined:

```ts

import { track } from "preact-perf-profiler";

const MyComponent = () => 
Hello!
;


export default MyComponent;

track(MyComponent);

```

If you do not control the source of the component, you can start tracking the component after importing it elsewhere:

```ts

import { track } from "preact-perf-profiler";

import MyComponent from "./my-component.tsx";

track(MyComponent);

const MyOtherComponent = () => ;

export default MyOtherComponent;

```