Jacob Groß kurtextrem

These are some notes on the performance work that went into alien-signals. I'm sharing them not as a definitive guide, but as a log of a few key discoveries. The hope is that some of these findings might be useful to others tackling similar problems in high-performance JavaScript.

The Origin: Push-Pull-Push

My journey into the depths of reactivity performance began with Vue. I was trying to solve a specific problem in Vue 3.4: even if a computed's value didn't change, it would still trigger downstream computations and effects. This seemed inefficient. My attempt to fix this resulted in a pull request (vuejs/core#5912) that, after a year of discussions, was eventually merged. This PR introduced the Push-Pull-Push model to Vue 3.4, a model also adopted by libraries like reactivity.

For a time, I thought this was near-perfect. Then I saw the plans for Vue 3.5, which adopted a doubly-linked list but also moved to a pure pull-based model. I was still convinced

🚀 This project has moved!

Thank you for all the stars and forks! To better manage updates, issues, and versioning, Minimal Analytics 4 has moved to a dedicated GitHub repository.

📍 View the new repository here

🚀 What's New in v1.11 (2026 "Gold Master" Release)

This version represents a total architectural overhaul to bring this script in line with professional tracking standards while maintaining a tiny footprint.

`assert()` (sometimes called `invariant()`)

Instead of checks like:

if (value === null) {
  throw new Error("missing value")
}
doSomethingThatNeedsValue(value)

Profile	download (kb/s)	upload (kb/s)	latency (ms)
Native	0	0	0
GPRS	50	20	500
56K Dial-up	50	30	120
Mobile EDGE	240	200	840
2G Regular	250	50	300
2G Good	450	150	150
3G Slow	780	330	200

React recently introduced an experimental profiler API. This page gives instructions on how to use this API in a production release of your app.

Table of Contents

Profiling in production
- Create React App
- Webpack 4

Profiling in production

React DOM automatically supports profiling in development mode for v16.5+, but since profiling adds some small additional overhead it is opt-in for production mode. This gist explains how to opt-in.

	// Step 1: Define the Branded Type
	type LowercaseString = string & { __brand: "LowercaseString" };

	// Step 2: Type Guard Function
	function toLowercaseString(s: string): LowercaseString {
	return s.toLowerCase() as LowercaseString;
	}

	// Step 3: Override Type Definitions
	type RemoveToLowerCase<T> = Omit<T, "toLowerCase">;

	<!DOCTYPE html>
	<head>
	<meta name="view-transition" content="same-origin">
	</head>
	<body>
	<style>
	h1 {
	view-transition-name: hero;
	}

	// Can you make this faster? Ping me.

	const escapeHtml = (function () {
	const serializer = new XMLSerializer ();
	const attr = document.createAttribute ( 'attr' );
	const re = /[&<>"]/;
	return function escapeHtml ( str ) {
	if ( !re.test ( str ) ) return str;
	attr.value = str;
	return serializer.serializeToString ( attr );

	//
	// See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app
	// See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
	const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

	module.exports = {
	webpack: (config, options) => {

	//
	// Use profiler-enabled React builds

	<?php

	require_once __DIR__.'/relative/path/to/PrettierPHPFixer/File';

	return PhpCsFixer\Config::create()
	->registerCustomFixers([
	(new PrettierPHPFixer()),
	])
	->setRules([
	'Prettier/php' => true,