Find the cost of adding an npm package to your app's bundle size
teardown.kelinci.dev
refactor: compact size UI
+3
-3
+1
-1
src/components/package-bundle.tsx
+1
-1
src/components/package-bundle.tsx
···
195
195
{(bundleData) => (
196
196
<div class="flex flex-col gap-5">
197
197
{/* size display card */}
198
-
<div class="flex flex-wrap items-stretch gap-8 rounded-lg border border-neutral-stroke-3 bg-neutral-background-1 p-4">
198
+
<div class="sticky top-1 flex flex-wrap items-stretch gap-4 rounded-lg border border-neutral-stroke-3 bg-neutral-background-1 px-4 py-3">
199
199
<SizeStat label="Minified" size={bundleData().size} />
200
200
201
201
<SizeStat label="Gzip" size={bundleData().gzipSize} />
+2
-2
src/components/size-stat.tsx
+2
-2
src/components/size-stat.tsx
···
10
10
return (
11
11
<Tooltip content={formatLongBytes(props.size)} relationship="description">
12
12
{(triggerProps) => (
13
-
<div class="flex flex-col gap-1" {...triggerProps}>
13
+
<div class="flex items-center gap-2" {...triggerProps}>
14
14
<span class="text-base-300 text-neutral-foreground-3">{props.label}</span>
15
-
<span class="text-base-500 font-semibold text-neutral-foreground-1">{formatBytes(props.size)}</span>
15
+
<span class="text-base-300 font-semibold text-neutral-foreground-1">{formatBytes(props.size)}</span>
16
16
</div>
17
17
)}
18
18
</Tooltip>