[{"data":1,"prerenderedAt":127},["ShallowReactive",2],{"term-b\u002Fbundle":3,"related-b\u002Fbundle":110},{"id":4,"title":5,"acronym":6,"body":7,"category":91,"description":92,"difficulty":93,"extension":94,"letter":95,"meta":96,"navigation":60,"path":97,"related":98,"seo":104,"sitemap":105,"stem":108,"subcategory":6,"__hash__":109},"terms\u002Fterms\u002Fb\u002Fbundle.md","Bundle",null,{"type":8,"value":9,"toc":85},"minimark",[10,15,19,23,26,30,74,78,81],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Imagine your code is a pile of LEGO instructions split across 50 tiny papers. A bundle is when someone combines all those papers into one neat booklet so the browser only has to read one thing instead of 50. Less trips = faster website.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A bundle is the output file (or set of files) produced by a build tool that combines multiple source modules, assets, and dependencies into a format optimized for delivery to the browser. Bundling reduces the number of HTTP requests and enables transformations like transpilation and minification.",[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 Before bundling: 3 separate files\n\u002F\u002F main.js, utils.js, helpers.js\n\n\u002F\u002F After bundling: one output file\n\u002F\u002F dist\u002Fbundle.js (contains all three merged)\n","javascript","",[38,39,40,49,55,62,68],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F Before bundling: 3 separate files\n",[41,50,52],{"class":43,"line":51},2,[41,53,54],{"class":47},"\u002F\u002F main.js, utils.js, helpers.js\n",[41,56,58],{"class":43,"line":57},3,[41,59,61],{"emptyLinePlaceholder":60},true,"\n",[41,63,65],{"class":43,"line":64},4,[41,66,67],{"class":47},"\u002F\u002F After bundling: one output file\n",[41,69,71],{"class":43,"line":70},5,[41,72,73],{"class":47},"\u002F\u002F dist\u002Fbundle.js (contains all three merged)\n",[11,75,77],{"id":76},"when-youll-hear-this","When You'll Hear This",[16,79,80],{},"The production bundle is only 42KB after minification.,Run 'npm run build' to generate the bundle.,Our bundle grew too large, so we split it by route.",[82,83,84],"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 .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":86},[87,88,89,90],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":76,"depth":51,"text":77},"frontend","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.","beginner","md","b",{},"\u002Fterms\u002Fb\u002Fbundle",[99,100,101,102,103],"Bundler","Minify","Code Splitting","Vite","Webpack",{"title":5,"description":92},{"changefreq":106,"priority":107},"weekly",0.7,"terms\u002Fb\u002Fbundle","QK2nQ_436KSocgUHSAMjME7l5wLIO9Q8Oqy5F3FNqbY",[111,114,118,121,124],{"title":99,"path":112,"acronym":6,"category":91,"difficulty":93,"description":113},"\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":101,"path":115,"acronym":6,"category":91,"difficulty":116,"description":117},"\u002Fterms\u002Fc\u002Fcode-splitting","intermediate","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":100,"path":119,"acronym":6,"category":91,"difficulty":93,"description":120},"\u002Fterms\u002Fm\u002Fminify","Minification is when your code goes on a diet.",{"title":102,"path":122,"acronym":6,"category":91,"difficulty":93,"description":123},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",{"title":103,"path":125,"acronym":6,"category":91,"difficulty":116,"description":126},"\u002Fterms\u002Fw\u002Fwebpack","Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world.",1776518262007]