-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
25 lines (25 loc) · 72.6 KB
/
index.html
File metadata and controls
25 lines (25 loc) · 72.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html><html class="dark" lang="en"><head><meta charset="utf-8"><link href="/favicon.ico" rel="icon"><link href="/favicon.svg" rel="icon" type="image/svg+xml"><meta content="width=device-width,initial-scale=1" name="viewport"><meta content="#000000" name="theme-color"><link href="/rss.xml" rel="alternate" type="application/rss+xml" title="Fezcodex RSS Feed"><meta content="codex by fezcode..." name="description"><meta content="website" property="og:type"><meta content="https://fezcode.com/" property="og:url"><meta content="Fezcodex - Personal Blog and Projects" property="og:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." property="og:description"><meta content="/images/asset/ogtitle.png" property="og:image"><meta content="summary_large_image" name="twitter:card"><meta content="https://fezcode.com/" name="twitter:url"><meta content="Fezcodex - Personal Blog and Projects" name="twitter:title"><meta content="Discover logs, posts, projects, and stories from Fezcode." name="twitter:description"><meta content="/images/asset/ogtitle.png" name="twitter:image"><link href="/logo192.png" rel="apple-touch-icon"><link href="/manifest.json" rel="manifest"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin=""><link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet"><title>Reducing React App Bundle Size: A Practical Guide | Fezcodex Editorial</title><title>fezcodex</title><script defer src="/static/js/main.87f8d95f.js"></script><link href="/static/css/main.c666da2c.css" rel="stylesheet"><link href="https://fonts.googleapis.com" rel="preconnect"><link href="https://fonts.gstatic.com" rel="preconnect"><meta content="Web performance is crucial for user experience. A slow-loading website can drive visitors away before they even see your content. Recently, I noticed " name="description"><meta content="react, performance, optimization, lazy-loading, craco" name="keywords"><meta content="Reducing React App Bundle Size: A Practical Guide | Fezcodex Editorial" property="og:title"><meta content="Web performance is crucial for user experience. A slow-loading website can drive visitors away before they even see your content. Recently, I noticed " property="og:description"><meta content="https://fezcode.com/images/defaults/visuals-2TS23o0-pUc-unsplash.jpg" property="og:image"><meta content="https://fezcode.com/blog/reducing-react-app-size" property="og:url"><meta content="article" property="og:type"><meta content="Fezcodex" property="og:site_name"><meta content="https://fezcode.com/images/defaults/visuals-2TS23o0-pUc-unsplash.jpg" property="og:image:secure_url"><meta content="summary_large_image" name="twitter:card"><meta content="Reducing React App Bundle Size: A Practical Guide | Fezcodex Editorial" name="twitter:title"><meta content="Web performance is crucial for user experience. A slow-loading website can drive visitors away before they even see your content. Recently, I noticed " name="twitter:description"><meta content="https://fezcode.com/images/defaults/visuals-2TS23o0-pUc-unsplash.jpg" name="twitter:image"><meta content="https://fezcode.com/blog/reducing-react-app-size" name="twitter:url"><link href="https://fezcode.com/blog/reducing-react-app-size" rel="canonical"><link href="https://github.com" rel="preconnect"><link href="https://release-assets.githubusercontent.com" rel="preconnect"></head><body class="bg-slate-950" style="cursor:default;user-select:auto"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"><div class="bg-emerald-600 text-white relative z-[100] border-b-2 border-black selection:bg-white selection:text-black" style="height:auto;opacity:1"><div class="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between gap-4"><div class="flex items-center gap-3 flex-1"><span class="shrink-0"><svg height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M108,84a16,16,0,1,1,16,16A16,16,0,0,1,108,84Zm128,44A108,108,0,1,1,128,20,108.12,108.12,0,0,1,236,128Zm-24,0a84,84,0,1,0-84,84A84.09,84.09,0,0,0,212,128Zm-72,36.68V132a20,20,0,0,0-20-20,12,12,0,0,0-4,23.32V168a20,20,0,0,0,20,20,12,12,0,0,0,4-23.32Z"></path></svg></span><p class="font-mono text-xs md:text-sm font-black uppercase tracking-widest leading-tight">CLIMB THE TALL BUILDING 0 IS ONLINE: BUILD YOUR DECK AND CLIMB. ACCESS AT /CLIMB-THE-TALL-BUILDING-0.</p><a class="shrink-0 inline-flex items-center gap-1 bg-black/20 hover:bg-black/40 px-3 py-1 rounded-sm border border-white/20 transition-all font-bold text-[10px] uppercase" href="https://fezcode.com/climb-the-tall-building-0/">Play Climb the Tall Building 0<svg height="12" viewBox="0 0 256 256" width="12" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg></a></div><button class="p-1 hover:bg-black/20 rounded-sm transition-colors shrink-0" aria-label="Dismiss"><svg height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M208.49,191.51a12,12,0,0,1-17,17L128,145,64.49,208.49a12,12,0,0,1-17-17L111,128,47.51,64.49a12,12,0,0,1,17-17L128,111l63.51-63.52a12,12,0,0,1,17,17L145,128Z"></path></svg></button></div><div class="h-0.5 w-full bg-black/10"></div></div><div class="bg-[#050505] min-h-screen font-sans flex"><div class="fixed inset-0 bg-black/80 backdrop-blur-sm z-40 md:hidden transition-opacity opacity-0 pointer-events-none"></div><aside class="fixed top-0 left-0 h-screen w-72 bg-[#060608] z-50 flex flex-col border-r border-white/10 shadow-2xl" style="transform:translateX(-100%)"><div class="p-8 border-b border-white/10 flex flex-col gap-2 bg-black/50 relative"><div class="absolute top-0 left-0 w-full h-[2px] bg-gradient-to-r from-emerald-500/60 via-amber-500/30 to-transparent"></div><a class="flex items-center gap-3 group" href="/" data-discover="true"><span class="text-xl font-black uppercase tracking-tighter text-white">Fez<span class="text-emerald-500">codex</span></span></a><span class="font-arvo text-[10px] text-gray-500 uppercase tracking-widest font-medium">Digital Archive Kernel // v0.20.1 // Neural_Nexus</span></div><div class="relative flex-grow overflow-hidden"><div class="h-full overflow-y-auto scrollbar-hide no-scrollbar"><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Main</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M222.14,105.85l-80-80a20,20,0,0,0-28.28,0l-80,80A19.86,19.86,0,0,0,28,120v96a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V164h24v52a12,12,0,0,0,12,12h64a12,12,0,0,0,12-12V120A19.86,19.86,0,0,0,222.14,105.85ZM204,204H164V152a12,12,0,0,0-12-12H104a12,12,0,0,0-12,12v52H52V121.65l76-76,76,76Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Home</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/terminal" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M72.5,150.63,100.79,128,72.5,105.37a12,12,0,1,1,15-18.74l40,32a12,12,0,0,1,0,18.74l-40,32a12,12,0,0,1-15-18.74ZM144,172h32a12,12,0,0,0,0-24H144a12,12,0,0,0,0,24ZM236,56V200a20,20,0,0,1-20,20H40a20,20,0,0,1-20-20V56A20,20,0,0,1,40,36H216A20,20,0,0,1,236,56Zm-24,4H44V196H212Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Terminal</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/about" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">About</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/achievements" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M232,60H212V48a12,12,0,0,0-12-12H56A12,12,0,0,0,44,48V60H24A20,20,0,0,0,4,80V96a44.05,44.05,0,0,0,44,44h.77A84.18,84.18,0,0,0,116,195.15V212H96a12,12,0,0,0,0,24h64a12,12,0,0,0,0-24H140V195.11c30.94-4.51,56.53-26.2,67-55.11h1a44.05,44.05,0,0,0,44-44V80A20,20,0,0,0,232,60ZM28,96V84H44v28c0,1.21,0,2.41.09,3.61A20,20,0,0,1,28,96Zm160,15.1c0,33.33-26.71,60.65-59.54,60.9A60,60,0,0,1,68,112V60H188ZM228,96a20,20,0,0,1-16.12,19.62c.08-1.5.12-3,.12-4.52V84h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Achievements</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 bg-emerald-500/5 text-emerald-400 border-l-2 border-emerald-500"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Feed</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 bg-emerald-500/10 text-white" href="/blog" data-discover="true" aria-current="page"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M232,44H160a43.86,43.86,0,0,0-32,13.85A43.86,43.86,0,0,0,96,44H24A12,12,0,0,0,12,56V200a12,12,0,0,0,12,12H96a20,20,0,0,1,20,20,12,12,0,0,0,24,0,20,20,0,0,1,20-20h72a12,12,0,0,0,12-12V56A12,12,0,0,0,232,44ZM96,188H36V68H96a20,20,0,0,1,20,20V192.81A43.79,43.79,0,0,0,96,188Zm124,0H160a43.71,43.71,0,0,0-20,4.83V88a20,20,0,0,1,20-20h60Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Blogposts</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/projects" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M230.47,67.5a12,12,0,0,0-19.26-4.32L172.43,99l-12.68-2.72L157,83.57l35.79-38.78a12,12,0,0,0-4.32-19.26A76.07,76.07,0,0,0,88.41,121.64L30.92,174.18a4.68,4.68,0,0,0-.39.38,36,36,0,0,0,50.91,50.91l.38-.39,52.54-57.49A76.05,76.05,0,0,0,230.47,67.5ZM160,148a51.5,51.5,0,0,1-23.35-5.52,12,12,0,0,0-14.26,2.62L64.31,208.66a12,12,0,0,1-17-17l63.55-58.07a12,12,0,0,0,2.62-14.26A51.5,51.5,0,0,1,108,96a52.06,52.06,0,0,1,52-52h.89L135.17,71.87a12,12,0,0,0-2.91,10.65l5.66,26.35a12,12,0,0,0,9.21,9.21l26.35,5.66a12,12,0,0,0,10.65-2.91L212,95.12c0,.3,0,.59,0,.89A52.06,52.06,0,0,1,160,148Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Projects</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/logs" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M216,36H40A20,20,0,0,0,20,56V200a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A20,20,0,0,0,216,36Zm-4,160H44V60H212ZM68,92A12,12,0,0,1,80,80h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,92Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,128Zm0,36a12,12,0,0,1,12-12h96a12,12,0,0,1,0,24H80A12,12,0,0,1,68,164Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Discovery Logs</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/vocab" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M208,20H72A36,36,0,0,0,36,56V224a12,12,0,0,0,12,12H192a12,12,0,0,0,0-24H60v-4a12,12,0,0,1,12-12H208a12,12,0,0,0,12-12V32A12,12,0,0,0,208,20ZM120,44h36v59l-10.51-8.41a12,12,0,0,0-15,0L120,103Zm76,128H72a35.59,35.59,0,0,0-12,2.06V56A12,12,0,0,1,72,44H96v84a12,12,0,0,0,19.5,9.37l22.49-18,22.51,18A12,12,0,0,0,180,128V44h16Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Glossary</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/the-vague" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M200,164v8h12a12,12,0,0,1,0,24H200v12a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12h32a12,12,0,0,1,0,24ZM92,172a32,32,0,0,1-32,32H56v4a12,12,0,0,1-24,0V152a12,12,0,0,1,12-12H60A32,32,0,0,1,92,172Zm-24,0a8,8,0,0,0-8-8H56v16h4A8,8,0,0,0,68,172Zm100,8a40,40,0,0,1-40,40H112a12,12,0,0,1-12-12V152a12,12,0,0,1,12-12h16A40,40,0,0,1,168,180Zm-24,0a16,16,0,0,0-16-16h-4v32h4A16,16,0,0,0,144,180ZM36,108V40A20,20,0,0,1,56,20h96a12,12,0,0,1,8.49,3.52l56,56A12,12,0,0,1,220,88v20a12,12,0,0,1-24,0v-4H148a12,12,0,0,1-12-12V44H60v64a12,12,0,0,1-24,0ZM160,57V80h23Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">The Vague</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Applications</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="https://fezcode.com/castarook/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M252,80a32,32,0,1,0-60,15.45l-20.86,25.66L150.82,74.4a32,32,0,1,0-45.64,0L84.87,121.11,64,95.45a32,32,0,1,0-35,15.78l14,84.06A19.94,19.94,0,0,0,62.78,212H193.22A19.94,19.94,0,0,0,213,195.29l14-84.06A32.05,32.05,0,0,0,252,80Zm-32-8a8,8,0,1,1-8,8A8,8,0,0,1,220,72ZM128,44a8,8,0,1,1-8,8A8,8,0,0,1,128,44ZM36,72a8,8,0,1,1-8,8A8,8,0,0,1,36,72ZM189.83,188H66.17L55.29,122.78l23.4,28.79A12,12,0,0,0,88,156a12.87,12.87,0,0,0,1.63-.11,12,12,0,0,0,9.37-7.1L127.18,84l.82,0,.82,0L157,148.79a12,12,0,0,0,9.37,7.1A12.87,12.87,0,0,0,168,156a12,12,0,0,0,9.31-4.43l23.4-28.79Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Castarook</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="https://fezcode.com/Swat-Tactics/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M208,36H48A20,20,0,0,0,28,56v56c0,54.29,26.32,87.22,48.4,105.29,23.71,19.39,47.44,26,48.44,26.29a12.1,12.1,0,0,0,6.32,0c1-.28,24.73-6.9,48.44-26.29,22.08-18.07,48.4-51,48.4-105.29V56A20,20,0,0,0,208,36Zm-4,76c0,35.71-13.09,64.69-38.91,86.15A126.28,126.28,0,0,1,128,219.38a126.14,126.14,0,0,1-37.09-21.23C65.09,176.69,52,147.71,52,112V60H204ZM79.51,144.49a12,12,0,1,1,17-17L112,143l47.51-47.52a12,12,0,0,1,17,17l-56,56a12,12,0,0,1-17,0Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Swat Tactics</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="https://fezcode.com/climb-the-tall-building-0/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M216,28H152a12,12,0,0,0-9.33,4.45L79.5,110.51l-4.66-4.65a20,20,0,0,0-28.29,0L29.86,122.55a20,20,0,0,0,0,28.29h0L45,166,23.86,187.17a20,20,0,0,0,0,28.28l16.69,16.69a20,20,0,0,0,28.28,0L90,211l15.17,15.16a20,20,0,0,0,28.29,0l16.69-16.69a20,20,0,0,0,0-28.3l-4.65-4.65,78.06-63.17A12,12,0,0,0,228,104V40A12,12,0,0,0,216,28ZM54.69,212.34l-11-11L62,183l11,11Zm64.61-6L49.65,136.7l11.05-11,69.65,69.65ZM204,98.27l-75.58,61.17L121,152l47.51-47.5a12,12,0,0,0-17-17L104,135l-7.45-7.44L157.73,52H204Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">CTTB-0</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="https://fezcode.com/net_run/"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M225.6,62.64l-88-48.17a19.91,19.91,0,0,0-19.2,0l-88,48.17A20,20,0,0,0,20,80.19v95.62a20,20,0,0,0,10.4,17.55l88,48.17a19.89,19.89,0,0,0,19.2,0l88-48.17A20,20,0,0,0,236,175.81V80.19A20,20,0,0,0,225.6,62.64ZM128,36.57,200,76,128,115.4,56,76ZM44,96.79l72,39.4v76.67L44,173.44Zm96,116.07V136.19l72-39.4v76.65Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Net Run</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// Utilities</span><span class="transform transition-transform duration-300 rotate-180">↓</span></button><nav class="flex flex-col"><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/pinned-apps" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M238.15,78.54,177.46,17.86a20,20,0,0,0-28.3,0L97.2,70c-12.43-3.33-36.68-5.72-61.74,14.5a20,20,0,0,0-1.6,29.73l45.46,45.47-39.8,39.8a12,12,0,0,0,17,17l39.8-39.81,45.47,45.46A20,20,0,0,0,155.91,228c.46,0,.93,0,1.4-.05A20,20,0,0,0,171.87,220c4.69-6.23,11-16.13,14.44-28s3.45-22.88.16-33.4l51.7-51.87A20,20,0,0,0,238.15,78.54Zm-74.26,68.79a12,12,0,0,0-2.23,13.84c3.43,6.86,6.9,21-6.28,40.65L54.08,100.53c21.09-14.59,39.53-6.64,41-6a11.67,11.67,0,0,0,13.81-2.29l54.43-54.61,55,55Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Favorites</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/apps" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M100,36H56A20,20,0,0,0,36,56v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,100,36ZM96,96H60V60H96ZM200,36H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V56A20,20,0,0,0,200,36Zm-4,60H160V60h36Zm-96,40H56a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,100,136Zm-4,60H60V160H96Zm104-60H156a20,20,0,0,0-20,20v44a20,20,0,0,0,20,20h44a20,20,0,0,0,20-20V156A20,20,0,0,0,200,136Zm-4,60H160V160h36Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">App Center</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a><a class="group flex items-center justify-between px-6 py-3 transition-all duration-300 border-b border-white/5 text-gray-300 hover:text-white hover:bg-white/5" href="/commands" data-discover="true"><div class="flex items-center gap-4"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M224.49,136.49l-72,72a12,12,0,0,1-17-17L187,140H40a12,12,0,0,1,0-24H187L135.51,64.48a12,12,0,0,1,17-17l72,72A12,12,0,0,1,224.49,136.49Z"></path></svg><span class="font-arvo text-sm font-medium uppercase tracking-widest">Manuals</span></div><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="opacity-0 group-hover:opacity-100 -translate-x-2 group-hover:translate-x-0 transition-all"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg></a></nav><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// System</span><span class="transform transition-transform duration-300">↓</span></button><button class="flex items-center justify-between w-full px-6 py-4 border-b border-white/10 transition-all duration-300 text-gray-600 hover:text-gray-400 border-l-2 border-transparent"><span class="font-arvo text-[11px] uppercase tracking-[0.2em]">// External Nodes</span><span class="transform transition-transform duration-300">↓</span></button></div></div><div class="p-4 border-t border-white/10 bg-black/50"><div class="grid grid-cols-4 gap-2 mb-4"><button class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square" title="COMMANDS"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg></div></button><button class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square" title="SETTINGS"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M128,76a52,52,0,1,0,52,52A52.06,52.06,0,0,0,128,76Zm0,80a28,28,0,1,1,28-28A28,28,0,0,1,128,156Zm113.86-49.57A12,12,0,0,0,236,98.34L208.21,82.49l-.11-31.31a12,12,0,0,0-4.25-9.12,116,116,0,0,0-38-21.41,12,12,0,0,0-9.68.89L128,37.27,99.83,21.53a12,12,0,0,0-9.7-.9,116.06,116.06,0,0,0-38,21.47,12,12,0,0,0-4.24,9.1l-.14,31.34L20,98.35a12,12,0,0,0-5.85,8.11,110.7,110.7,0,0,0,0,43.11A12,12,0,0,0,20,157.66l27.82,15.85.11,31.31a12,12,0,0,0,4.25,9.12,116,116,0,0,0,38,21.41,12,12,0,0,0,9.68-.89L128,218.73l28.14,15.74a12,12,0,0,0,9.7.9,116.06,116.06,0,0,0,38-21.47,12,12,0,0,0,4.24-9.1l.14-31.34,27.81-15.81a12,12,0,0,0,5.85-8.11A110.7,110.7,0,0,0,241.86,106.43Zm-22.63,33.18-26.88,15.28a11.94,11.94,0,0,0-4.55,4.59c-.54,1-1.11,1.93-1.7,2.88a12,12,0,0,0-1.83,6.31L184.13,199a91.83,91.83,0,0,1-21.07,11.87l-27.15-15.19a12,12,0,0,0-5.86-1.53h-.29c-1.14,0-2.3,0-3.44,0a12.08,12.08,0,0,0-6.14,1.51L93,210.82A92.27,92.27,0,0,1,71.88,199l-.11-30.24a12,12,0,0,0-1.83-6.32c-.58-.94-1.16-1.91-1.7-2.88A11.92,11.92,0,0,0,63.7,155L36.8,139.63a86.53,86.53,0,0,1,0-23.24l26.88-15.28a12,12,0,0,0,4.55-4.58c.54-1,1.11-1.94,1.7-2.89a12,12,0,0,0,1.83-6.31L71.87,57A91.83,91.83,0,0,1,92.94,45.17l27.15,15.19a11.92,11.92,0,0,0,6.15,1.52c1.14,0,2.3,0,3.44,0a12.08,12.08,0,0,0,6.14-1.51L163,45.18A92.27,92.27,0,0,1,184.12,57l.11,30.24a12,12,0,0,0,1.83,6.32c.58.94,1.16,1.91,1.7,2.88A11.92,11.92,0,0,0,192.3,101l26.9,15.33A86.53,86.53,0,0,1,219.23,139.61Z"></path></svg></div></button><button class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square" title="RANDOM"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M240.49,175.51a12,12,0,0,1,0,17l-24,24a12,12,0,0,1-17-17L203,196h-2.09a76.17,76.17,0,0,1-61.85-31.83L97.38,105.78A52.1,52.1,0,0,0,55.06,84H32a12,12,0,0,1,0-24H55.06a76.17,76.17,0,0,1,61.85,31.83l41.71,58.39A52.1,52.1,0,0,0,200.94,172H203l-3.52-3.51a12,12,0,0,1,17-17Zm-95.62-72.62a12,12,0,0,0,16.93-1.13A52,52,0,0,1,200.94,84H203l-3.52,3.51a12,12,0,0,0,17,17l24-24a12,12,0,0,0,0-17l-24-24a12,12,0,0,0-17,17L203,60h-2.09a76,76,0,0,0-57.2,26A12,12,0,0,0,144.87,102.89Zm-33.74,50.22a12,12,0,0,0-16.93,1.13A52,52,0,0,1,55.06,172H32a12,12,0,0,0,0,24H55.06a76,76,0,0,0,57.2-26A12,12,0,0,0,111.13,153.11Z"></path></svg></div></button><button class="group flex flex-col items-center justify-center p-2 border border-white/[0.08] bg-white/[0.03] hover:bg-emerald-400 hover:border-emerald-400 transition-all aspect-square" title="CONTACT"><div class="text-white group-hover:text-black transition-all"><svg height="18" viewBox="0 0 256 256" width="18" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M224,44H32A12,12,0,0,0,20,56V192a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V56A12,12,0,0,0,224,44ZM193.15,68,128,127.72,62.85,68ZM44,188V83.28l75.89,69.57a12,12,0,0,0,16.22,0L212,83.28V188Z"></path></svg></div></button></div><div class="text-center"><p class="font-arvo text-[10px] text-gray-600 uppercase tracking-widest font-medium">© 2026 Fezcode // Theme: Brutalist</p></div></div></aside><div class="flex-1 flex flex-col transition-all duration-300 md:ml-0"><header class="bg-[#050505]/80 backdrop-blur-md sticky top-0 z-[60] transition-all border-b border-transparent py-4 relative"><button class="absolute top-1/2 -translate-y-1/2 left-6 text-gray-400 hover:text-emerald-500 transition-colors hidden md:block focus:outline-none" aria-label="Toggle Sidebar"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><div class="mx-auto max-w-7xl px-6 flex justify-between items-center text-white"><div class="md:hidden flex items-center gap-4"><button class="text-gray-400 hover:text-white transition-colors focus:outline-none"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M228,128a12,12,0,0,1-12,12H40a12,12,0,0,1,0-24H216A12,12,0,0,1,228,128ZM40,76H216a12,12,0,0,0,0-24H40a12,12,0,0,0,0,24ZM216,180H40a12,12,0,0,0,0,24H216a12,12,0,0,0,0-24Z"></path></svg></button><a class="flex items-center gap-2" href="/" data-discover="true"><svg height="40" viewBox="0 0 100 100" width="40" xmlns="http://www.w3.org/2000/svg" class="text-white" style="transform:rotate(-30deg)"><g transform="translate(0, -2)"><path d="M 20 40 C 20 30, 80 30, 80 40 L 85 70 C 85 75, 15 75, 15 70 Z" fill="white" stroke="white" stroke-width="2"></path><path d="M 50 25 Q 60 15, 70 25" fill="none" stroke="white" stroke-width="2"></path></g></svg><span class="text-xl font-black tracking-tighter uppercase font-mono">Fez<span class="text-emerald-500">codex</span></span></a></div><div class="hidden md:flex items-center gap-2 ml-12"><a class="flex items-center gap-2 group" href="/" data-discover="true"><svg height="40" viewBox="0 0 100 100" width="40" xmlns="http://www.w3.org/2000/svg" class="text-white" style="transform:rotate(-30deg)"><g transform="translate(0, -2)"><path d="M 20 40 C 20 30, 80 30, 80 40 L 85 70 C 85 75, 15 75, 15 70 Z" fill="white" stroke="white" stroke-width="2"></path><path d="M 50 25 Q 60 15, 70 25" fill="none" stroke="white" stroke-width="2"></path></g></svg><span class="text-2xl font-black tracking-tighter uppercase font-mono transition-colors group-hover:text-emerald-500">Fez<span class="text-emerald-500 group-hover:text-white">codex</span></span></a></div><div class="flex items-center gap-2 md:gap-4"><a class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" href="/about" data-discover="true"><svg height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M234.38,210a123.36,123.36,0,0,0-60.78-53.23,76,76,0,1,0-91.2,0A123.36,123.36,0,0,0,21.62,210a12,12,0,1,0,20.77,12c18.12-31.32,50.12-50,85.61-50s67.49,18.69,85.61,50a12,12,0,0,0,20.77-12ZM76,96a52,52,0,1,1,52,52A52.06,52.06,0,0,1,76,96Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest">About</span></a><button class="group flex items-center gap-2 px-3 py-2 text-gray-400 hover:text-white hover:bg-white/5 rounded-sm transition-all" aria-label="Toggle Search"><svg height="20" viewBox="0 0 256 256" width="20" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="group-hover:text-emerald-500 transition-colors"><path d="M232.49,215.51,185,168a92.12,92.12,0,1,0-17,17l47.53,47.54a12,12,0,0,0,17-17ZM44,112a68,68,0,1,1,68,68A68.07,68.07,0,0,1,44,112Z"></path></svg><span class="hidden md:inline text-[10px] font-mono font-bold uppercase tracking-widest group-hover:text-emerald-500 transition-colors">Search</span></button></div></div></header><main class="flex-grow"><div style="opacity:1"><div class="min-h-screen transition-colors duration-500 font-instr-serif bg-[#1a1a1a] text-[#f4f4f4]"><div class="fixed top-0 left-0 w-full h-[3px] z-[9999] bg-white/5"><div class="h-full bg-[#d2b48c] origin-left shadow-[0_0_10px_rgba(210,180,140,0.4)]" style="width:0%"></div></div><main class="pt-32 pb-20"><div class="max-w-[90rem] mx-auto px-[25px] md:pl-[5.77rem] md:pr-[2.22rem]"><div class="border-b border-[#f4f4f4]/25 pb-12 mb-12"><div class="flex flex-col items-center text-center"><h1 class="font-instr-serif italic text-6xl md:text-9xl mb-12 leading-[0.8] max-w-6xl tracking-tighter">Reducing React App Bundle Size: A Practical Guide</h1><div class="flex flex-col items-center gap-8 mt-4"><div class="flex items-center gap-8 font-instr-sans"><a class="inline-flex items-center justify-center h-[2.66667rem] px-[1.33333rem] border-2 uppercase tracking-widest text-[10px] font-black transition-colors border-[#f4f4f4] text-[#f4f4f4] hover:bg-[#f4f4f4] hover:text-[#1a1a1a]" href="/blog" data-discover="true">Back to Index</a><button class="flex items-center gap-4 hover:opacity-70 transition-opacity font-instr-sans" type="button"><span class="uppercase tracking-widest text-xs font-bold">Light Mode</span><span class="w-[0.83333rem] h-[0.83333rem] rounded-full border-2 bg-[#f4f4f4] border-[#f4f4f4]"></span></button></div><div class="flex flex-wrap justify-center gap-6 font-instr-sans uppercase tracking-[0.2em] text-[10px] text-white/60"><a class="hover:underline underline-offset-4 font-bold" href="/blog?category=dev" data-discover="true">dev</a><span class="opacity-30">//</span><span class="font-bold">27/11/2025</span><span class="opacity-30">//</span><span class="font-bold">3 Min Read</span><span class="opacity-30">//</span><span>Updated 27/11/2025</span></div></div></div></div><div class="max-w-5xl mx-auto font-instr-serif text-xl md:text-2xl leading-[1.8] tracking-wide text-justify"><div class=""><p class="mb-8 last:mb-0 leading-[1.8]">Web performance is crucial for user experience. A slow-loading website can drive visitors away before they even see your content. Recently, I noticed that <strong class="font-bold text-current">Fezcodex</strong> was taking a bit too long to load, so I decided to investigate and optimize the production build.</p><p class="mb-8 last:mb-0 leading-[1.8]">Here's how I managed to reduce the main bundle size by over <strong class="font-bold text-current">70%</strong>, shrinking <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">main.js</code> by approximately <strong class="font-bold text-current">590 kB</strong>.</p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">The Diagnosis</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">When I ran the build command, I noticed the generated <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">main.js</code> file was quite large. In a standard Create React App (CRA) setup, the entire application is often bundled into a single JavaScript file. This means a user has to download <em>every</em> page and component just to see the homepage.</p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Strategy 1: Code Splitting with <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">React.lazy</code> and <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">Suspense</code></h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">The most effective way to reduce the initial bundle size is <strong class="font-bold text-current">Code Splitting</strong>. Instead of loading the entire app at once, we split the code into smaller chunks that are loaded on demand.</p><p class="mb-8 last:mb-0 leading-[1.8]">React provides built-in support for this via <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">React.lazy</code> and <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">Suspense</code>.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">Before:</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">All pages were imported statically at the top of the routing file:</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">javascript</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span class="token module" style="color:#96cbfe">import</span><span> </span><span class="token imports maybe-class-name">HomePage</span><span> </span><span class="token module" style="color:#96cbfe">from</span><span> </span><span class="token" style="color:#a8ff60">'../pages/HomePage'</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token module" style="color:#96cbfe">import</span><span> </span><span class="token imports maybe-class-name">BlogPage</span><span> </span><span class="token module" style="color:#96cbfe">from</span><span> </span><span class="token" style="color:#a8ff60">'../pages/BlogPage'</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token module" style="color:#96cbfe">import</span><span> </span><span class="token imports maybe-class-name">ProjectsPage</span><span> </span><span class="token module" style="color:#96cbfe">from</span><span> </span><span class="token" style="color:#a8ff60">'../pages/ProjectsPage'</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token" style="color:#7c7c7c">// ... diverse imports</span></code></div></div></div></pre><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">After:</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">I refactored the imports to be lazy loaded:</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">javascript</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span class="token module" style="color:#96cbfe">import</span><span> </span><span class="token imports maybe-class-name">React</span><span class="token imports" style="color:#c5c8c6">,</span><span class="token imports"> </span><span class="token imports" style="color:#c5c8c6">{</span><span class="token imports"> lazy</span><span class="token imports" style="color:#c5c8c6">,</span><span class="token imports"> </span><span class="token imports maybe-class-name">Suspense</span><span class="token imports"> </span><span class="token imports" style="color:#c5c8c6">}</span><span> </span><span class="token module" style="color:#96cbfe">from</span><span> </span><span class="token" style="color:#a8ff60">'react'</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token module" style="color:#96cbfe">import</span><span> </span><span class="token imports maybe-class-name">Loading</span><span> </span><span class="token module" style="color:#96cbfe">from</span><span> </span><span class="token" style="color:#a8ff60">'./Loading'</span><span class="token" style="color:#c5c8c6">;</span><span> </span><span class="token" style="color:#7c7c7c">// A simple spinner component</span><span>
</span>
<span></span><span class="token" style="color:#7c7c7c">// Lazy Imports</span><span>
</span><span></span><span class="token" style="color:#96cbfe">const</span><span> </span><span class="token maybe-class-name">HomePage</span><span> </span><span class="token" style="color:#ededed">=</span><span> </span><span class="token" style="color:#dad085">lazy</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token arrow" style="color:#ededed">=></span><span> </span><span class="token module" style="color:#96cbfe">import</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#a8ff60">'../pages/HomePage'</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token" style="color:#96cbfe">const</span><span> </span><span class="token maybe-class-name">BlogPage</span><span> </span><span class="token" style="color:#ededed">=</span><span> </span><span class="token" style="color:#dad085">lazy</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token arrow" style="color:#ededed">=></span><span> </span><span class="token module" style="color:#96cbfe">import</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#a8ff60">'../pages/BlogPage'</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token" style="color:#96cbfe">const</span><span> </span><span class="token maybe-class-name">ProjectsPage</span><span> </span><span class="token" style="color:#ededed">=</span><span> </span><span class="token" style="color:#dad085">lazy</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token arrow" style="color:#ededed">=></span><span> </span><span class="token module" style="color:#96cbfe">import</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#a8ff60">'../pages/ProjectsPage'</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token" style="color:#7c7c7c">// ...</span></code></div></div></div></pre><p class="mb-8 last:mb-0 leading-[1.8]">And wrapped the routes in <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">Suspense</code>:</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">javascript</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span class="token" style="color:#96cbfe">function</span><span> </span><span class="token maybe-class-name" style="color:#dad085">AnimatedRoutes</span><span class="token" style="color:#c5c8c6">(</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token" style="color:#c5c8c6">{</span><span>
</span><span> </span><span class="token control-flow" style="color:#96cbfe">return</span><span> </span><span class="token" style="color:#c5c8c6">(</span><span>
</span><span> </span><span class="token" style="color:#ededed"><</span><span class="token maybe-class-name">Suspense</span><span> fallback</span><span class="token" style="color:#ededed">=</span><span class="token" style="color:#c5c8c6">{</span><span class="token" style="color:#ededed"><</span><span class="token maybe-class-name">Loading</span><span> </span><span class="token" style="color:#ededed">/</span><span class="token" style="color:#ededed">></span><span class="token" style="color:#c5c8c6">}</span><span class="token" style="color:#ededed">></span><span>
</span><span> </span><span class="token" style="color:#c5c8c6">{</span><span class="token" style="color:#7c7c7c">/* Routes ... */</span><span class="token" style="color:#c5c8c6">}</span><span>
</span><span> </span><span class="token" style="color:#ededed"><</span><span class="token" style="color:#ededed">/</span><span class="token maybe-class-name">Suspense</span><span class="token" style="color:#ededed">></span><span>
</span><span> </span><span class="token" style="color:#c5c8c6">)</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span></span><span class="token" style="color:#c5c8c6">}</span></code></div></div></div></pre><p class="mb-8 last:mb-0 leading-[1.8]">This change ensures that the code for <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">BlogPage</code> is only downloaded when the user actually navigates to <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">/blog</code>.</p><div class="mt-12 mb-4"><h3 class="text-3xl font-instr-serif italic tracking-tight mb-3">How Does the Builder Know?</h3><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">You might wonder: <em>How does the build tool (Webpack, in this case) know to separate these files?</em></p><p class="mb-8 last:mb-0 leading-[1.8]">It all comes down to the <strong class="font-bold text-current">dynamic <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">import()</code> syntax</strong>.</p><ol class="list-decimal pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">The Trigger:</strong> Standard imports (e.g., <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">import X from 'Y'</code>) are static; Webpack bundles them immediately. When Webpack encounters <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">import('...')</code>, it recognizes a <strong class="font-bold text-current">split point</strong>.</li><li><strong class="font-bold text-current">Chunk Generation:</strong> Webpack cuts that specific module (and its unique dependencies) out of the main bundle and creates a separate file, known as a <strong class="font-bold text-current">chunk</strong>.</li><li><strong class="font-bold text-current">The Glue:</strong> The main bundle retains a tiny instruction. It effectively says, "When the application needs this component, send a network request to fetch this specific chunk file."</li></ol><p class="mb-8 last:mb-0 leading-[1.8]"><code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">React.lazy</code> and <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">Suspense</code> simply manage the UI state (like showing the loading spinner) while that asynchronous network request is happening.</p><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">Strategy 2: Disabling Source Maps in Production</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">Source maps are incredibly useful for debugging, as they map the minified production code back to your original source code. However, they are also very large.</p><p class="mb-8 last:mb-0 leading-[1.8]">By default, Create React App generates source maps for production builds. While the browser only downloads them if you open the developer tools, they still occupy space on the server and can slow down deployment pipelines.</p><p class="mb-8 last:mb-0 leading-[1.8]">I disabled them in my <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">craco.config.js</code> (since I'm using CRACO to override CRA settings):</p><pre><div class="relative group my-8 border border-white/10"><div class="absolute -top-3 right-4 flex gap-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity"><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">EXPAND</button><button class="px-2 py-1 text-[10px] uppercase font-instr-sans font-bold tracking-widest transition-all rounded-sm border bg-white text-black border-white/10 hover:bg-black hover:text-white">COPY</button></div><div class="rounded-sm overflow-hidden bg-[#111111]"><div class="px-4 py-2 border-b flex justify-between items-center border-white/10 bg-white/5"><span class="font-instr-sans text-[9px] uppercase tracking-[0.2em] text-white/50">javascript</span></div><div style='color:#c5c8c6;text-shadow:rgba(0,0,0,.3) 0 1px;font-family:Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.6;tab-size:4;hyphens:none;padding:1.5rem;margin:0;overflow:auto;border-radius:.3em;background:0 0;font-size:.9rem' node="[object Object]"><code style='white-space:pre;font-family:"JetBrains Mono",monospace'><span class="token literal-property" style="color:#96cbfe">webpack</span><span class="token" style="color:#ededed">:</span><span> </span><span class="token" style="color:#c5c8c6">{</span><span>
</span><span> </span><span class="token function-variable" style="color:#dad085">configure</span><span class="token" style="color:#ededed">:</span><span> </span><span class="token" style="color:#c5c8c6">(</span><span class="token parameter">webpackConfig</span><span class="token parameter" style="color:#c5c8c6">,</span><span class="token parameter"> </span><span class="token parameter" style="color:#c5c8c6">{</span><span class="token parameter"> env </span><span class="token parameter" style="color:#c5c8c6">}</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token arrow" style="color:#ededed">=></span><span> </span><span class="token" style="color:#c5c8c6">{</span><span>
</span><span> </span><span class="token" style="color:#7c7c7c">// Disable sourcemaps for production</span><span>
</span><span> </span><span class="token control-flow" style="color:#96cbfe">if</span><span> </span><span class="token" style="color:#c5c8c6">(</span><span>env </span><span class="token" style="color:#ededed">===</span><span> </span><span class="token" style="color:#a8ff60">'production'</span><span class="token" style="color:#c5c8c6">)</span><span> </span><span class="token" style="color:#c5c8c6">{</span><span>
</span><span> webpackConfig</span><span class="token" style="color:#c5c8c6">.</span><span class="token property-access">devtool</span><span> </span><span class="token" style="color:#ededed">=</span><span> </span><span class="token" style="color:#9c9">false</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span> </span><span class="token" style="color:#c5c8c6">}</span><span>
</span><span> </span><span class="token control-flow" style="color:#96cbfe">return</span><span> webpackConfig</span><span class="token" style="color:#c5c8c6">;</span><span>
</span><span> </span><span class="token" style="color:#c5c8c6">}</span><span class="token" style="color:#c5c8c6">,</span><span>
</span><span></span><span class="token" style="color:#c5c8c6">}</span><span class="token" style="color:#c5c8c6">,</span></code></div></div></div></pre><div class="mt-16 mb-6"><h2 class="text-4xl font-instr-serif tracking-tight mb-4">The Results</h2><hr class="border-t w-full border-white/25"></div><p class="mb-8 last:mb-0 leading-[1.8]">The impact was immediate and significant.</p><ul class="list-disc pl-6 my-8 space-y-3"><li><strong class="font-bold text-current">Before:</strong> <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">main.js</code> was heavy, containing the entire application logic.</li><li><strong class="font-bold text-current">After:</strong> <code class="undefined font-mono px-1.5 py-0.5 rounded-sm text-sm relative -top-[0.1em] bg-white/10 text-white border border-white/20" node="[object Object]">main.js</code> reduced by <strong class="font-bold text-current">~590 kB</strong>.</li></ul><p class="mb-8 last:mb-0 leading-[1.8]">Now, the initial load is snappy, and users only download what they need. If you're building a React app with many routes, I highly recommend implementing code splitting early on!</p></div></div><div class="mt-24 pt-12 border-t border-[#f4f4f4]/25 text-center"><a class="inline-flex items-center gap-2 font-instr-sans text-xl tracking-tight text-white hover:text-white/70 transition-opacity" href="/blog" data-discover="true"><span class="text-lg">←</span> Back to Blogposts</a></div></div></main></div></div></main><footer class="bg-[#050505] border-t-2 border-white/10 mt-auto selection:bg-white selection:text-black"><div class="mx-auto max-w-[1600px] px-6 py-12 md:px-12"><div class="grid grid-cols-1 lg:grid-cols-12 gap-12 md:gap-16"><div class="lg:col-span-5 space-y-8"><div class="flex flex-col gap-4"><a class="group inline-block" href="/" data-discover="true"><span class="text-5xl md:text-6xl font-black uppercase tracking-tighter text-white">fez<span class="text-emerald-500">codex</span></span></a><p class="max-w-md text-gray-400 font-mono text-xs leading-relaxed uppercase tracking-widest">// turning complex ~distributed~ problems into elegant, reliable code.</p></div><div class="grid grid-cols-1 md:grid-cols-2 gap-6"><div class="border border-white/10 p-4 bg-white/[0.02]"><h4 class="font-mono text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-3">Site Info</h4><div class="space-y-1 font-mono text-[10px] uppercase tracking-widest"><div class="flex justify-between"><span class="text-gray-600">Version:</span><span class="text-white">v0.20.1</span></div><div class="flex justify-between"><span class="text-gray-600">Year:</span><span class="text-white">2026</span></div><div class="flex justify-between text-emerald-500 font-black"><span>Status:</span><span>Live</span></div></div></div><div class="border border-white/10 p-4 bg-white/[0.02] flex flex-col justify-center gap-3"><div class="flex items-center gap-2 text-white"><svg height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-emerald-500"><path d="M180,144H160V112h20a36,36,0,1,0-36-36V96H112V76a36,36,0,1,0-36,36H96v32H76a36,36,0,1,0,36,36V160h32v20a36,36,0,1,0,36-36ZM160,76a20,20,0,1,1,20,20H160ZM56,76a20,20,0,0,1,40,0V96H76A20,20,0,0,1,56,76ZM96,180a20,20,0,1,1-20-20H96Zm16-68h32v32H112Zm68,88a20,20,0,0,1-20-20V160h20a20,20,0,0,1,0,40Z"></path></svg><span class="font-mono text-[10px] font-bold uppercase tracking-widest">Quick Menu</span></div><div class="font-mono text-[10px] text-gray-500 uppercase leading-relaxed">Press <kbd class="bg-white text-black px-1 font-black">Alt</kbd>, <kbd class="bg-white text-black px-1 font-black">Ctrl</kbd>, or <kbd class="bg-white text-black px-1 font-black">Cmd</kbd> + <kbd class="bg-white text-black px-1 font-black">K</kbd> for commands.</div></div></div></div><div class="lg:col-span-4"><h3 class="font-mono text-[10px] font-bold text-white uppercase tracking-[0.3em] mb-8 flex items-center gap-3"><svg height="16" viewBox="0 0 256 256" width="16" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="text-emerald-500"><path d="M117.31,134l-72,64a8,8,0,1,1-10.63-12L100,128,34.69,70A8,8,0,1,1,45.32,58l72,64a8,8,0,0,1,0,12ZM216,184H120a8,8,0,0,0,0,16h96a8,8,0,0,0,0-16Z"></path></svg>Navigation</h3><ul class="grid grid-cols-2 gap-x-6 gap-y-3 font-mono text-[10px] uppercase tracking-widest"><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Home</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/about" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>About</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/blog" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Blog</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/projects" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Projects</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/logs" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Logs</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/vocab" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Vocab</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/apps" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Apps</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/timeline" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Timeline</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2 transition-colors group" href="/commands" data-discover="true"><span class="text-emerald-500 group-hover:translate-x-1 transition-transform">→</span>Manuals</a></li><li><a class="text-gray-500 hover:text-white flex items-center gap-2" href="/rss.xml" target="_blank"><span class="text-emerald-500">→</span> RSS Feed</a></li></ul></div><div class="lg:col-span-3"><h3 class="font-mono text-[10px] font-bold text-white uppercase tracking-[0.3em] mb-8">Connect</h3><div class="flex gap-3 mb-8 flex-wrap"><a class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group" href="https://github.com/fezcode" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M212.62,75.17A63.7,63.7,0,0,0,206.39,26,12,12,0,0,0,196,20a63.71,63.71,0,0,0-50,24H126A63.71,63.71,0,0,0,76,20a12,12,0,0,0-10.39,6,63.7,63.7,0,0,0-6.23,49.17A61.5,61.5,0,0,0,52,104v8a60.1,60.1,0,0,0,45.76,58.28A43.66,43.66,0,0,0,92,192v4H76a20,20,0,0,1-20-20,44.05,44.05,0,0,0-44-44,12,12,0,0,0,0,24,20,20,0,0,1,20,20,44.05,44.05,0,0,0,44,44H92v12a12,12,0,0,0,24,0V192a20,20,0,0,1,40,0v40a12,12,0,0,0,24,0V192a43.66,43.66,0,0,0-5.76-21.72A60.1,60.1,0,0,0,220,112v-8A61.5,61.5,0,0,0,212.62,75.17ZM196,112a36,36,0,0,1-36,36H112a36,36,0,0,1-36-36v-8a37.87,37.87,0,0,1,6.13-20.12,11.65,11.65,0,0,0,1.58-11.49,39.9,39.9,0,0,1-.4-27.72,39.87,39.87,0,0,1,26.41,17.8A12,12,0,0,0,119.82,68h32.35a12,12,0,0,0,10.11-5.53,39.84,39.84,0,0,1,26.41-17.8,39.9,39.9,0,0,1-.4,27.72,12,12,0,0,0,1.61,11.53A37.85,37.85,0,0,1,196,104Z"></path></svg></a><a class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group" href="https://x.com/fezcoddy" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M218.12,209.56l-61-95.8,59.72-65.69a12,12,0,0,0-17.76-16.14L143.81,92.77,106.12,33.56A12,12,0,0,0,96,28H48A12,12,0,0,0,37.88,46.44l61,95.8L39.12,207.93a12,12,0,1,0,17.76,16.14l55.31-60.84,37.69,59.21A12,12,0,0,0,160,228h48a12,12,0,0,0,10.12-18.44ZM166.59,204,69.86,52H89.41l96.73,152Z"></path></svg></a><a class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group" href="https://www.linkedin.com/in/ahmed-samil-bulbul/?locale=en_US" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M216,20H40A20,20,0,0,0,20,40V216a20,20,0,0,0,20,20H216a20,20,0,0,0,20-20V40A20,20,0,0,0,216,20Zm-4,192H44V44H212ZM112,176V120a12,12,0,0,1,21.43-7.41A40,40,0,0,1,192,148v28a12,12,0,0,1-24,0V148a16,16,0,0,0-32,0v28a12,12,0,0,1-24,0ZM96,120v56a12,12,0,0,1-24,0V120a12,12,0,0,1,24,0ZM68,80A16,16,0,1,1,84,96,16,16,0,0,1,68,80Z"></path></svg></a><a class="w-12 h-12 border border-white/10 bg-white/5 flex items-center justify-center text-gray-400 hover:bg-white hover:text-black hover:border-white transition-all group" href="https://github.com/fezcode/fezcode.github.io" target="_blank" rel="noreferrer"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M236,64a36,36,0,1,0-48,33.94V112a4,4,0,0,1-4,4H96a27.8,27.8,0,0,0-4,.29V97.94a36,36,0,1,0-24,0v60.12a36,36,0,1,0,24,0V144a4,4,0,0,1,4-4h88a28,28,0,0,0,28-28V97.94A36.07,36.07,0,0,0,236,64ZM80,52A12,12,0,1,1,68,64,12,12,0,0,1,80,52Zm0,152a12,12,0,1,1,12-12A12,12,0,0,1,80,204ZM200,76a12,12,0,1,1,12-12A12,12,0,0,1,200,76Z"></path></svg></a></div><div class="space-y-3 border-t border-white/10 pt-6"><p class="font-mono text-[9px] font-bold text-gray-600 uppercase tracking-widest">Newsletter</p><div class="relative"><input class="w-full bg-white text-black font-mono text-[9px] uppercase tracking-widest py-2 px-3 border-none focus:ring-0 placeholder-black/40 disabled:cursor-not-allowed" disabled placeholder="Coming soon..." type="text"></div></div></div></div><div class="mt-20 pt-8 border-t border-white/10 flex flex-col md:flex-row justify-between items-center gap-6 font-mono text-[9px] uppercase tracking-[0.2em] text-gray-600"><p>© 2026 Fezcode // Built with React & Tailwind</p><p class="text-white font-bold">Thanks for visiting</p></div></div></footer></div></div><div class="fixed bottom-0 left-0 w-full h-32 pointer-events-none z-[9999]"><div class="absolute bottom-2 flex flex-col items-center pointer-events-auto cursor-help" style="width:60px;transform:translateX(100vw)"><div class="absolute bottom-full mb-4 px-4 py-2 rounded-xl text-[10px] font-mono uppercase tracking-tighter whitespace-nowrap border bg-[#050505] text-[#10B981] border-[#10B981]/20 shadow-[0_0_15px_rgba(16,185,129,0.1)]" style="opacity:1;transform:none"><div class="flex items-center gap-2"><svg height="14" viewBox="0 0 256 256" width="14" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M128,24A104,104,0,0,0,36.18,176.88L24.83,210.93a16,16,0,0,0,20.24,20.24l34.05-11.35A104,104,0,1,0,128,24ZM84,140a12,12,0,1,1,12-12A12,12,0,0,1,84,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,128,140Zm44,0a12,12,0,1,1,12-12A12,12,0,0,1,172,140Z"></path></svg>Analyzing data structures... Delicious.</div><div class="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-[#050505]"></div></div><div class="relative" style="transform:scaleX(-1)"><div class="w-10 h-10 flex items-center justify-center rounded-lg border-2 bg-[#050505] border-[#10B981]/40 text-[#10B981] shadow-lg" style="transform:translateY(-.803447px) scale(1.04883) rotate(-2.01388deg)"><svg height="24" viewBox="0 0 256 256" width="24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M240,124a48,48,0,0,1-32,45.27h0V176a40,40,0,0,1-80,0,40,40,0,0,1-80,0v-6.73h0a48,48,0,0,1,0-90.54V72a40,40,0,0,1,80,0,40,40,0,0,1,80,0v6.73A48,48,0,0,1,240,124Z" opacity="0.2"></path><path d="M248,124a56.11,56.11,0,0,0-32-50.61V72a48,48,0,0,0-88-26.49A48,48,0,0,0,40,72v1.39a56,56,0,0,0,0,101.2V176a48,48,0,0,0,88,26.49A48,48,0,0,0,216,176v-1.41A56.09,56.09,0,0,0,248,124ZM88,208a32,32,0,0,1-31.81-28.56A55.87,55.87,0,0,0,64,180h8a8,8,0,0,0,0-16H64A40,40,0,0,1,50.67,86.27,8,8,0,0,0,56,78.73V72a32,32,0,0,1,64,0v68.26A47.8,47.8,0,0,0,88,128a8,8,0,0,0,0,16,32,32,0,0,1,0,64Zm104-44h-8a8,8,0,0,0,0,16h8a55.87,55.87,0,0,0,7.81-.56A32,32,0,1,1,168,144a8,8,0,0,0,0-16,47.8,47.8,0,0,0-32,12.26V72a32,32,0,0,1,64,0v6.73a8,8,0,0,0,5.33,7.54A40,40,0,0,1,192,164Zm16-52a8,8,0,0,1-8,8h-4a36,36,0,0,1-36-36V80a8,8,0,0,1,16,0v4a20,20,0,0,0,20,20h4A8,8,0,0,1,208,112ZM60,120H56a8,8,0,0,1,0-16h4A20,20,0,0,0,80,84V80a8,8,0,0,1,16,0v4A36,36,0,0,1,60,120Z"></path></svg><div class="absolute top-2 left-2 flex gap-3"><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div><div class="w-1.5 h-1.5 rounded-full bg-current animate-pulse"></div></div></div><div class="flex justify-around mt-[-4px]"><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-1.29839px)"></div><div class="w-3 h-2 rounded-full bg-current opacity-50" style="color:#10b981;transform:translateY(-.70161px)"></div></div></div></div></div><div class="fixed top-24 right-6 md:right-12 z-[100] pointer-events-none flex flex-col items-end gap-2"><div class="pointer-events-auto flex flex-col-reverse gap-3"></div></div></div></body></html>