[{"data":1,"prerenderedAt":204},["ShallowReactive",2],{"term-b\u002Fbundler":3,"related-b\u002Fbundler":187},{"id":4,"title":5,"acronym":6,"body":7,"category":167,"description":168,"difficulty":169,"extension":170,"letter":171,"meta":172,"navigation":173,"path":174,"related":175,"seo":181,"sitemap":182,"stem":185,"subcategory":6,"__hash__":186},"terms\u002Fterms\u002Fb\u002Fbundler.md","Bundler",null,{"type":8,"value":9,"toc":161},"minimark",[10,15,19,23,26,30,150,154,157],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"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 can actually digest. It's basically a food processor for your code.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"A bundler is a build tool that resolves a dependency graph starting from entry points, transforms source files (transpiling, compiling), and emits optimized output bundles for the browser. Popular bundlers include Webpack, Vite, Rollup, and esbuild.",[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 vite.config.js — configuring a bundler\nexport default {\n  build: {\n    rollupOptions: {\n      input: 'src\u002Fmain.js',\n      output: { dir: 'dist' }\n    }\n  }\n}\n","javascript","",[38,39,40,49,63,75,85,106,132,138,144],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F vite.config.js — configuring a bundler\n",[41,50,52,56,59],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","export",[41,57,58],{"class":54}," default",[41,60,62],{"class":61},"sMK4o"," {\n",[41,64,66,70,73],{"class":43,"line":65},3,[41,67,69],{"class":68},"swJcz","  build",[41,71,72],{"class":61},":",[41,74,62],{"class":61},[41,76,78,81,83],{"class":43,"line":77},4,[41,79,80],{"class":68},"    rollupOptions",[41,82,72],{"class":61},[41,84,62],{"class":61},[41,86,88,91,93,96,100,103],{"class":43,"line":87},5,[41,89,90],{"class":68},"      input",[41,92,72],{"class":61},[41,94,95],{"class":61}," '",[41,97,99],{"class":98},"sfazB","src\u002Fmain.js",[41,101,102],{"class":61},"'",[41,104,105],{"class":61},",\n",[41,107,109,112,114,117,120,122,124,127,129],{"class":43,"line":108},6,[41,110,111],{"class":68},"      output",[41,113,72],{"class":61},[41,115,116],{"class":61}," {",[41,118,119],{"class":68}," dir",[41,121,72],{"class":61},[41,123,95],{"class":61},[41,125,126],{"class":98},"dist",[41,128,102],{"class":61},[41,130,131],{"class":61}," }\n",[41,133,135],{"class":43,"line":134},7,[41,136,137],{"class":61},"    }\n",[41,139,141],{"class":43,"line":140},8,[41,142,143],{"class":61},"  }\n",[41,145,147],{"class":43,"line":146},9,[41,148,149],{"class":61},"}\n",[11,151,153],{"id":152},"when-youll-hear-this","When You'll Hear This",[16,155,156],{},"Which bundler does this project use?,The bundler threw an error on the circular dependency.,Switching bundlers cut our build time in half.",[158,159,160],"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}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":162},[163,164,165,166],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":152,"depth":51,"text":153},"frontend","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...","beginner","md","b",{},true,"\u002Fterms\u002Fb\u002Fbundler",[176,177,178,179,180],"Bundle","Webpack","Vite","Rollup","esbuild",{"title":5,"description":168},{"changefreq":183,"priority":184},"weekly",0.7,"terms\u002Fb\u002Fbundler","utQs6PbIJtveuphGCYt6gRWlHUNkTzMvt2UQ242z8Og",[188,191,195,198,201],{"title":176,"path":189,"acronym":6,"category":167,"difficulty":169,"description":190},"\u002Fterms\u002Fb\u002Fbundle","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.",{"title":180,"path":192,"acronym":6,"category":167,"difficulty":193,"description":194},"\u002Fterms\u002Fe\u002Fesbuild","intermediate","esbuild is a bundler written in Go (not JavaScript) which means it's absolutely unhinged fast — like 10-100x faster than other bundlers.",{"title":179,"path":196,"acronym":6,"category":167,"difficulty":193,"description":197},"\u002Fterms\u002Fr\u002Frollup","Rollup is the bundler you use when you're building a library rather than an app.",{"title":178,"path":199,"acronym":6,"category":167,"difficulty":169,"description":200},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",{"title":177,"path":202,"acronym":6,"category":167,"difficulty":193,"description":203},"\u002Fterms\u002Fw\u002Fwebpack","Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world.",1776518262118]