[{"data":1,"prerenderedAt":239},["ShallowReactive",2],{"term-c\u002Fcode-splitting":3,"related-c\u002Fcode-splitting":224},{"id":4,"title":5,"acronym":6,"body":7,"category":206,"description":207,"difficulty":208,"extension":209,"letter":210,"meta":211,"navigation":105,"path":212,"related":213,"seo":218,"sitemap":219,"stem":222,"subcategory":6,"__hash__":223},"terms\u002Fterms\u002Fc\u002Fcode-splitting.md","Code Splitting",null,{"type":8,"value":9,"toc":200},"minimark",[10,15,19,23,26,30,189,193,196],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Instead of sending the user one massive JavaScript file for your entire app, code splitting lets you break it into chunks and only send what's needed for the current page. Why make someone download your admin dashboard code when they're just reading a blog post?",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Code splitting is a bundler feature that divides the application bundle into smaller chunks loaded on demand or in parallel. This reduces initial load time by deferring non-critical code. It is commonly implemented via dynamic imports, route-based splitting in frameworks like Next.js, and React's lazy\u002FSuspense.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F Dynamic import = code splitting point\nconst AdminPanel = React.lazy(() => import('.\u002FAdminPanel'))\n\nfunction App() {\n  return (\n    \u003CReact.Suspense fallback={\u003CSpinner \u002F>}>\n      \u003CAdminPanel \u002F>\n    \u003C\u002FReact.Suspense>\n  )\n}\n","jsx","",[38,39,40,49,100,107,121,132,154,166,177,183],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Dynamic import = code splitting point\n",[41,50,52,56,60,64,67,70,74,77,80,83,86,88,91,95,97],{"class":43,"line":51},2,[41,53,55],{"class":54},"spNyl","const",[41,57,59],{"class":58},"sTEyZ"," AdminPanel ",[41,61,63],{"class":62},"sMK4o","=",[41,65,66],{"class":58}," React",[41,68,69],{"class":62},".",[41,71,73],{"class":72},"s2Zo4","lazy",[41,75,76],{"class":58},"(",[41,78,79],{"class":62},"()",[41,81,82],{"class":54}," =>",[41,84,85],{"class":62}," import",[41,87,76],{"class":58},[41,89,90],{"class":62},"'",[41,92,94],{"class":93},"sfazB",".\u002FAdminPanel",[41,96,90],{"class":62},[41,98,99],{"class":58},"))\n",[41,101,103],{"class":43,"line":102},3,[41,104,106],{"emptyLinePlaceholder":105},true,"\n",[41,108,110,113,116,118],{"class":43,"line":109},4,[41,111,112],{"class":54},"function",[41,114,115],{"class":72}," App",[41,117,79],{"class":62},[41,119,120],{"class":62}," {\n",[41,122,124,128],{"class":43,"line":123},5,[41,125,127],{"class":126},"s7zQu","  return",[41,129,131],{"class":130},"swJcz"," (\n",[41,133,135,138,142,145,148,151],{"class":43,"line":134},6,[41,136,137],{"class":62},"    \u003C",[41,139,141],{"class":140},"sBMFI","React.Suspense",[41,143,144],{"class":54}," fallback",[41,146,147],{"class":62},"={\u003C",[41,149,150],{"class":140},"Spinner",[41,152,153],{"class":62}," \u002F>}>\n",[41,155,157,160,163],{"class":43,"line":156},7,[41,158,159],{"class":62},"      \u003C",[41,161,162],{"class":140},"AdminPanel",[41,164,165],{"class":62}," \u002F>\n",[41,167,169,172,174],{"class":43,"line":168},8,[41,170,171],{"class":62},"    \u003C\u002F",[41,173,141],{"class":140},[41,175,176],{"class":62},">\n",[41,178,180],{"class":43,"line":179},9,[41,181,182],{"class":130},"  )\n",[41,184,186],{"class":43,"line":185},10,[41,187,188],{"class":62},"}\n",[11,190,192],{"id":191},"when-youll-hear-this","When You'll Hear This",[16,194,195],{},"Code splitting cut our initial bundle from 800KB to 200KB.,Route-level code splitting is built into Next.js automatically.,Use code splitting for heavy components users rarely open.",[197,198,199],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":36,"searchDepth":51,"depth":51,"links":201},[202,203,204,205],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":191,"depth":51,"text":192},"frontend","Instead of sending the user one massive JavaScript file for your entire app, code splitting lets you break it into chunks and only send what's needed for t...","intermediate","md","c",{},"\u002Fterms\u002Fc\u002Fcode-splitting",[214,215,216,217],"Bundle","Lazy Loading","Tree Shaking","Bundler",{"title":5,"description":207},{"changefreq":220,"priority":221},"weekly",0.7,"terms\u002Fc\u002Fcode-splitting","Zq_h2GKemyaLE1wwlv0wIdiGVjXR6IQ5acFarELG704",[225,229,232,236],{"title":214,"path":226,"acronym":6,"category":206,"difficulty":227,"description":228},"\u002Fterms\u002Fb\u002Fbundle","beginner","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.",{"title":217,"path":230,"acronym":6,"category":206,"difficulty":227,"description":231},"\u002Fterms\u002Fb\u002Fbundler","A bundler is the robot that smashes all your separate JavaScript files, CSS, images, and random imports into one (or a few) neat packages that the browser...",{"title":215,"path":233,"acronym":6,"category":234,"difficulty":208,"description":235},"\u002Fterms\u002Fl\u002Flazy-loading","database","Lazy loading waits until you actually access related data before fetching it. Access post.author and only then does it query the database.",{"title":216,"path":237,"acronym":6,"category":206,"difficulty":208,"description":238},"\u002Fterms\u002Ft\u002Ftree-shaking","Tree shaking is when your bundler looks at all the code you imported but never actually used, and throws it in the trash.",1776518267113]