Simple History shows a quick-view dropdown in the WordPress admin bar, letting logged-in users see recent activity without leaving the page. Since the admin bar loads on every frontend page, keeping this bundle small matters.
We discovered that a single import — import { HStack } from '@wordpress/components' — was pulling in wp-components (787 KB) plus 14 transitive dependencies, totaling 920 KB of JavaScript across 15 separate script files. On top of that, 8 translation files were loaded for those packages. All of this on every single page load, just to render a flex container.
The fix
We replaced the @wordpress/components imports with plain HTML and inline CSS:
// Before — costs 920 KB
import { HStack } from '@wordpress/components';
<HStack spacing={1}>...</HStack>
// After — costs 0 KB
<div style={{ display: 'flex', gap: '4px' }}>...</div>Code language: JavaScript (javascript)We created lightweight versions of two components (EventDateCompact and EventInitiatorNameCompact) that use only @wordpress/date and @wordpress/i18n — packages already loaded on the page.
Results
| Metric | Before | After |
|---|---|---|
| Admin bar JS bundle | 32 KB | 9.2 KB |
| Total scripts loaded | 36 | 21 |
| External JS eliminated | — | 920 KB |
| HTTP requests saved | — | 23 |
The biggest offender was wp-components at 787 KB — 85% of the total. But because WordPress loads dependencies as separate files, removing it also removed its entire dependency tree: wp-compose, wp-rich-text, wp-data, wp-dom, and 10 more packages.
The dependency chain
When @wordpress/components was loaded, WordPress’s script dependency system automatically loaded everything it depends on. Removing wp-components caused the entire chain to collapse:
wp-components (786.6 KB)
├── wp-compose (35.7 KB)
│ └── wp-priority-queue (3.3 KB)
├── wp-rich-text (36.4 KB)
├── wp-data (24.8 KB)
│ ├── wp-redux-routine (8.6 KB)
│ ├── wp-private-apis (2.7 KB)
│ └── wp-is-shallow-equal (0.9 KB)
├── wp-dom (12.3 KB)
├── wp-a11y (2.1 KB)
├── wp-keycodes (2.5 KB)
├── wp-primitives (1.6 KB)
├── wp-html-entities (0.7 KB)
├── wp-warning (0.2 KB)
└── react-jsx-runtime (0.8 KB)Code language: CSS (css)None of these packages were needed by any other script still on the page, so WordPress’s dependency resolver simply stopped loading them. The 8 translation files disappeared for the same reason — no script to translate anymore.
Lesson learned
In WordPress’s @wordpress/scripts build system, any @wordpress/* import becomes an external script dependency. This is great for the admin where these packages are already loaded — but on the frontend, each import can trigger a cascade of script loads. We added a guard comment to our entry point to prevent future regressions:
// IMPORTANT: Do NOT import from @wordpress/components or other heavy
// packages here or in any component this file imports. A single import
// like HStack or Button pulls in wp-components (~787 KB) plus 14
// transitive dependencies (~920 KB total). Use plain HTML/CSS instead.Code language: PHP (php)The takeaway: Before using a UI component library on a performance-sensitive page, check what it actually costs. Sometimes a <div> with display: flex is the better component.