Remove unused code from production bundles.
import date-utils
Bundle size: 48KB (all exports included)
Bundle size: 6KB (unused exports removed)
<div class="tsh tsh--after" role="img" aria-label="date-utils bundle, after tree-shaking">
<p class="tsh__title">import date-utils</p>
<ul class="tsh__list">
<li class="tsh__fn tsh__fn--used" style="--a:#A8E6C1;">formatDate() <span class="tsh__badge tsh__badge--used">used</span></li>
<li class="tsh__fn tsh__fn--unused">parseTimezone()<span class="tsh__badge tsh__badge--removed">removed</span><span class="tsh__badge tsh__badge--unused">unused</span></li>
<li class="tsh__fn tsh__fn--unused">formatCalendar()<span class="tsh__badge tsh__badge--removed">removed</span><span class="tsh__badge tsh__badge--unused">unused</span></li>
</ul>
<p class="tsh__size tsh__size--before">Bundle size: 48KB (all exports included)</p><p class="tsh__size tsh__size--after">Bundle size: 6KB (unused exports removed)</p>
</div>
<style>
.tsh { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.tsh__title { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }
.tsh__list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tsh__fn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }
.tsh__fn--used { background: var(--a); }
.tsh__badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: #24143018; color: #24143099; margin-left: auto; }
.tsh__badge--used { display: none; background: #241430; color: #FAF7F2; }
.tsh--before .tsh__badge--used { display: inline-block; }
.tsh__badge--removed { display: none; text-decoration: line-through; }
.tsh--after .tsh__badge--removed { display: inline-block; }
.tsh--before .tsh__badge--unused { display: inline-block; }
.tsh--after .tsh__badge--unused { display: none; }
.tsh--after .tsh__fn--unused { opacity: .3; }
.tsh__size { display: none; margin: 0; font-size: 10px; color: #24143099; }
.tsh--before .tsh__size--before, .tsh--after .tsh__size--after { display: block; }
</style><div class="tshtw tshtw--after font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="date-utils bundle, after tree-shaking">
<p class="m-0 mb-2.5 font-mono text-[11px] text-[#24143099]">import date-utils</p>
<ul class="list-none m-0 mb-2.5 p-0 flex flex-col gap-1.5">
<li class="tshtw__used flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold" style="--a:#A8E6C1;">formatDate() <span class="tshtw__badge-used hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#241430] text-[#FAF7F2]">used</span></li>
<li class="tshtw__unused flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold">parseTimezone()<span class="tshtw__badge-removed hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099] line-through">removed</span><span class="tshtw__badge-unused ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099]">unused</span></li>
<li class="tshtw__unused flex items-center gap-1.5 py-2 px-2.5 rounded-md bg-[#24143010] text-[11px] font-semibold">formatCalendar()<span class="tshtw__badge-removed hidden ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099] line-through">removed</span><span class="tshtw__badge-unused ml-auto text-[9px] font-bold py-0.5 px-1.5 rounded-full bg-[#24143018] text-[#24143099]">unused</span></li>
</ul>
<p class="tshtw__size-before hidden m-0 text-[10px] text-[#24143099]">Bundle size: 48KB (all exports included)</p><p class="tshtw__size-after hidden m-0 text-[10px] text-[#24143099]">Bundle size: 6KB (unused exports removed)</p>
</div>
<style>
.tshtw--before .tshtw__badge-used { display: inline-block; }
.tshtw--after .tshtw__badge-removed { display: inline-block; }
.tshtw--before .tshtw__badge-unused { display: inline-block; }
.tshtw--after .tshtw__badge-unused { display: none; }
.tshtw--after .tshtw__unused { opacity: .3; }
.tshtw--before .tshtw__size-before, .tshtw--after .tshtw__size-after { display: block; }
</style>export function TreeShaking({
libraryName = "date-utils",
stage = "after",
accent = "#A8E6C1",
showSizes = true,
}) {
const before = stage === "before";
const unusedBadge = { fontSize: 9, fontWeight: 700, padding: "2px 7px", borderRadius: 999, background: "#24143018", color: "#24143099", marginLeft: "auto", textDecoration: before ? "none" : "line-through" };
return (
<div role="img" aria-label={`${libraryName} bundle, ${stage} tree-shaking`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
<p style={{ margin: "0 0 10px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>import {libraryName}</p>
<ul style={{ listStyle: "none", margin: "0 0 10px", padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
<li style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", borderRadius: 6, fontSize: 11, fontWeight: 600, background: accent }}>
formatDate() {before && <span style={{ fontSize: 9, fontWeight: 700, padding: "2px 7px", borderRadius: 999, background: "#241430", color: "#FAF7F2", marginLeft: "auto" }}>used</span>}
</li>
<li style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", borderRadius: 6, fontSize: 11, fontWeight: 600, background: "#24143010", opacity: before ? 1 : .3 }}>parseTimezone()<span style={unusedBadge}>{before ? "unused" : "removed"}</span></li>
<li style={{ display: "flex", alignItems: "center", gap: 6, padding: "8px 10px", borderRadius: 6, fontSize: 11, fontWeight: 600, background: "#24143010", opacity: before ? 1 : .3 }}>formatCalendar()<span style={unusedBadge}>{before ? "unused" : "removed"}</span></li>
</ul>
{showSizes && <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>{before ? "Bundle size: 48KB (all exports included)" : "Bundle size: 6KB (unused exports removed)"}</p>}
</div>
);
}