[{"data":1,"prerenderedAt":258},["ShallowReactive",2],{"term-t\u002Ftree-shaking":3,"related-t\u002Ftree-shaking":241},{"id":4,"title":5,"acronym":6,"body":7,"category":222,"description":223,"difficulty":224,"extension":225,"letter":226,"meta":227,"navigation":163,"path":228,"related":229,"seo":235,"sitemap":236,"stem":239,"subcategory":6,"__hash__":240},"terms\u002Fterms\u002Ft\u002Ftree-shaking.md","Tree Shaking",null,{"type":8,"value":9,"toc":216},"minimark",[10,15,19,23,26,30,205,209,212],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Tree shaking is when your bundler looks at all the code you imported but never actually used, and throws it in the trash. Like if you imported an entire library of 1000 functions but only used 2 — tree shaking deletes the other 998 so users don't have to download them.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Tree shaking is a dead-code elimination technique used by bundlers (pioneered by Rollup) that statically analyzes ES module import\u002Fexport statements to determine which code is actually used, and excludes unused exports from the final bundle. It requires ES modules (not CommonJS) to work effectively.",[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-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F utils.js — exports 3 functions\nexport const add = (a, b) => a + b\nexport const subtract = (a, b) => a - b\nexport const multiply = (a, b) => a * b\n\n\u002F\u002F main.js — only imports one\nimport { add } from '.\u002Futils'\n\u002F\u002F Bundler removes subtract and multiply from output\n","javascript","",[38,39,40,49,96,127,158,165,171,199],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F utils.js — exports 3 functions\n",[41,50,52,56,60,64,68,71,75,78,81,84,87,90,93],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","export",[41,57,59],{"class":58},"spNyl"," const",[41,61,63],{"class":62},"sTEyZ"," add ",[41,65,67],{"class":66},"sMK4o","=",[41,69,70],{"class":66}," (",[41,72,74],{"class":73},"sHdIc","a",[41,76,77],{"class":66},",",[41,79,80],{"class":73}," b",[41,82,83],{"class":66},")",[41,85,86],{"class":58}," =>",[41,88,89],{"class":62}," a ",[41,91,92],{"class":66},"+",[41,94,95],{"class":62}," b\n",[41,97,99,101,103,106,108,110,112,114,116,118,120,122,125],{"class":43,"line":98},3,[41,100,55],{"class":54},[41,102,59],{"class":58},[41,104,105],{"class":62}," subtract ",[41,107,67],{"class":66},[41,109,70],{"class":66},[41,111,74],{"class":73},[41,113,77],{"class":66},[41,115,80],{"class":73},[41,117,83],{"class":66},[41,119,86],{"class":58},[41,121,89],{"class":62},[41,123,124],{"class":66},"-",[41,126,95],{"class":62},[41,128,130,132,134,137,139,141,143,145,147,149,151,153,156],{"class":43,"line":129},4,[41,131,55],{"class":54},[41,133,59],{"class":58},[41,135,136],{"class":62}," multiply ",[41,138,67],{"class":66},[41,140,70],{"class":66},[41,142,74],{"class":73},[41,144,77],{"class":66},[41,146,80],{"class":73},[41,148,83],{"class":66},[41,150,86],{"class":58},[41,152,89],{"class":62},[41,154,155],{"class":66},"*",[41,157,95],{"class":62},[41,159,161],{"class":43,"line":160},5,[41,162,164],{"emptyLinePlaceholder":163},true,"\n",[41,166,168],{"class":43,"line":167},6,[41,169,170],{"class":47},"\u002F\u002F main.js — only imports one\n",[41,172,174,177,180,183,186,189,192,196],{"class":43,"line":173},7,[41,175,176],{"class":54},"import",[41,178,179],{"class":66}," {",[41,181,182],{"class":62}," add",[41,184,185],{"class":66}," }",[41,187,188],{"class":54}," from",[41,190,191],{"class":66}," '",[41,193,195],{"class":194},"sfazB",".\u002Futils",[41,197,198],{"class":66},"'\n",[41,200,202],{"class":43,"line":201},8,[41,203,204],{"class":47},"\u002F\u002F Bundler removes subtract and multiply from output\n",[11,206,208],{"id":207},"when-youll-hear-this","When You'll Hear This",[16,210,211],{},"Tree shaking removed 80KB of unused lodash methods.,CommonJS modules break tree shaking — use ESM.,Check if your library is tree-shakeable before adding it.",[213,214,215],"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 .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 .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 .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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":217},[218,219,220,221],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":207,"depth":51,"text":208},"frontend","Tree shaking is when your bundler looks at all the code you imported but never actually used, and throws it in the trash.","intermediate","md","t",{},"\u002Fterms\u002Ft\u002Ftree-shaking",[230,231,232,233,234],"Bundle","Bundler","Rollup","Vite","Code Splitting",{"title":5,"description":223},{"changefreq":237,"priority":238},"weekly",0.7,"terms\u002Ft\u002Ftree-shaking","PN8xnPyyQ86d_JPhTn05Aci_1XhHAKpLaNm0DS441gc",[242,246,249,252,255],{"title":230,"path":243,"acronym":6,"category":222,"difficulty":244,"description":245},"\u002Fterms\u002Fb\u002Fbundle","beginner","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.",{"title":231,"path":247,"acronym":6,"category":222,"difficulty":244,"description":248},"\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":234,"path":250,"acronym":6,"category":222,"difficulty":224,"description":251},"\u002Fterms\u002Fc\u002Fcode-splitting","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...",{"title":232,"path":253,"acronym":6,"category":222,"difficulty":224,"description":254},"\u002Fterms\u002Fr\u002Frollup","Rollup is the bundler you use when you're building a library rather than an app.",{"title":233,"path":256,"acronym":6,"category":222,"difficulty":244,"description":257},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",1776518319929]