[{"data":1,"prerenderedAt":228},["ShallowReactive",2],{"term-r\u002Frollup":3,"related-r\u002Frollup":214},{"id":4,"title":5,"acronym":6,"body":7,"category":195,"description":196,"difficulty":197,"extension":198,"letter":199,"meta":200,"navigation":201,"path":202,"related":203,"seo":208,"sitemap":209,"stem":212,"subcategory":6,"__hash__":213},"terms\u002Fterms\u002Fr\u002Frollup.md","Rollup",null,{"type":8,"value":9,"toc":189},"minimark",[10,15,19,23,26,30,178,182,185],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Rollup is the bundler you use when you're building a library rather than an app. It's known for producing tiny, clean output because it pioneered tree shaking — cutting out all the code that nobody uses. Vite actually uses Rollup under the hood for production builds.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Rollup is a module bundler optimized for building JavaScript libraries. It was the first bundler to implement tree shaking at scale, producing minimal output by statically analyzing ES module imports. It outputs multiple formats (ESM, CJS, UMD) and is preferred for library authors.",[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 rollup.config.js\nexport default {\n  input: 'src\u002Findex.js',\n  output: [\n    { file: 'dist\u002Fbundle.cjs.js', format: 'cjs' },\n    { file: 'dist\u002Fbundle.esm.js', format: 'esm' }\n  ]\n}\n","javascript","",[38,39,40,49,63,86,98,134,166,172],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F rollup.config.js\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,76,80,83],{"class":43,"line":65},3,[41,67,69],{"class":68},"swJcz","  input",[41,71,72],{"class":61},":",[41,74,75],{"class":61}," '",[41,77,79],{"class":78},"sfazB","src\u002Findex.js",[41,81,82],{"class":61},"'",[41,84,85],{"class":61},",\n",[41,87,89,92,94],{"class":43,"line":88},4,[41,90,91],{"class":68},"  output",[41,93,72],{"class":61},[41,95,97],{"class":96},"sTEyZ"," [\n",[41,99,101,104,107,109,111,114,116,119,122,124,126,129,131],{"class":43,"line":100},5,[41,102,103],{"class":61},"    {",[41,105,106],{"class":68}," file",[41,108,72],{"class":61},[41,110,75],{"class":61},[41,112,113],{"class":78},"dist\u002Fbundle.cjs.js",[41,115,82],{"class":61},[41,117,118],{"class":61},",",[41,120,121],{"class":68}," format",[41,123,72],{"class":61},[41,125,75],{"class":61},[41,127,128],{"class":78},"cjs",[41,130,82],{"class":61},[41,132,133],{"class":61}," },\n",[41,135,137,139,141,143,145,148,150,152,154,156,158,161,163],{"class":43,"line":136},6,[41,138,103],{"class":61},[41,140,106],{"class":68},[41,142,72],{"class":61},[41,144,75],{"class":61},[41,146,147],{"class":78},"dist\u002Fbundle.esm.js",[41,149,82],{"class":61},[41,151,118],{"class":61},[41,153,121],{"class":68},[41,155,72],{"class":61},[41,157,75],{"class":61},[41,159,160],{"class":78},"esm",[41,162,82],{"class":61},[41,164,165],{"class":61}," }\n",[41,167,169],{"class":43,"line":168},7,[41,170,171],{"class":96},"  ]\n",[41,173,175],{"class":43,"line":174},8,[41,176,177],{"class":61},"}\n",[11,179,181],{"id":180},"when-youll-hear-this","When You'll Hear This",[16,183,184],{},"We use Rollup to build the component library.,Rollup's tree shaking kept the output under 5KB.,Vite uses Rollup for production builds internally.",[186,187,188],"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 pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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":190},[191,192,193,194],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":180,"depth":51,"text":181},"frontend","Rollup is the bundler you use when you're building a library rather than an app.","intermediate","md","r",{},true,"\u002Fterms\u002Fr\u002Frollup",[204,205,206,207],"Bundler","Vite","Tree Shaking","esbuild",{"title":5,"description":196},{"changefreq":210,"priority":211},"weekly",0.7,"terms\u002Fr\u002Frollup","bR40QunwfAVDUKc_bOxnewfq6IIkRXqgyOq0XJ5e2Fk",[215,219,222,225],{"title":204,"path":216,"acronym":6,"category":195,"difficulty":217,"description":218},"\u002Fterms\u002Fb\u002Fbundler","beginner","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":207,"path":220,"acronym":6,"category":195,"difficulty":197,"description":221},"\u002Fterms\u002Fe\u002Fesbuild","esbuild is a bundler written in Go (not JavaScript) which means it's absolutely unhinged fast — like 10-100x faster than other bundlers.",{"title":206,"path":223,"acronym":6,"category":195,"difficulty":197,"description":224},"\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.",{"title":205,"path":226,"acronym":6,"category":195,"difficulty":217,"description":227},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",1776518308796]