[{"data":1,"prerenderedAt":230},["ShallowReactive",2],{"term-v\u002Fvite":3,"related-v\u002Fvite":212},{"id":4,"title":5,"acronym":6,"body":7,"category":193,"description":194,"difficulty":195,"extension":196,"letter":197,"meta":198,"navigation":103,"path":199,"related":200,"seo":206,"sitemap":207,"stem":210,"subcategory":6,"__hash__":211},"terms\u002Fterms\u002Fv\u002Fvite.md","Vite",null,{"type":8,"value":9,"toc":187},"minimark",[10,15,19,23,26,30,176,180,183],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start. It uses the browser's own module system during development so your changes show up almost instantly. It's French for 'fast' and boy does it live up to the name.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Vite is a next-generation frontend build tool that leverages native ES modules in the browser for near-instant development server startup and Hot Module Replacement. For production, it uses Rollup under the hood to produce optimized bundles. It supports Vue, React, Svelte, and vanilla JS out of the box.",[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\nimport { defineConfig } from 'vite'\nimport react from '@vitejs\u002Fplugin-react'\n\nexport default defineConfig({\n  plugins: [react()],\n  server: { port: 3000 }\n})\n","javascript","",[38,39,40,49,80,98,105,123,145,167],"code",{"__ignoreMap":36},[41,42,45],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sHwdD","\u002F\u002F vite.config.js\n",[41,50,52,56,60,64,67,70,73,77],{"class":43,"line":51},2,[41,53,55],{"class":54},"s7zQu","import",[41,57,59],{"class":58},"sMK4o"," {",[41,61,63],{"class":62},"sTEyZ"," defineConfig",[41,65,66],{"class":58}," }",[41,68,69],{"class":54}," from",[41,71,72],{"class":58}," '",[41,74,76],{"class":75},"sfazB","vite",[41,78,79],{"class":58},"'\n",[41,81,83,85,88,91,93,96],{"class":43,"line":82},3,[41,84,55],{"class":54},[41,86,87],{"class":62}," react ",[41,89,90],{"class":54},"from",[41,92,72],{"class":58},[41,94,95],{"class":75},"@vitejs\u002Fplugin-react",[41,97,79],{"class":58},[41,99,101],{"class":43,"line":100},4,[41,102,104],{"emptyLinePlaceholder":103},true,"\n",[41,106,108,111,114,117,120],{"class":43,"line":107},5,[41,109,110],{"class":54},"export",[41,112,113],{"class":54}," default",[41,115,63],{"class":116},"s2Zo4",[41,118,119],{"class":62},"(",[41,121,122],{"class":58},"{\n",[41,124,126,130,133,136,139,142],{"class":43,"line":125},6,[41,127,129],{"class":128},"swJcz","  plugins",[41,131,132],{"class":58},":",[41,134,135],{"class":62}," [",[41,137,138],{"class":116},"react",[41,140,141],{"class":62},"()]",[41,143,144],{"class":58},",\n",[41,146,148,151,153,155,158,160,164],{"class":43,"line":147},7,[41,149,150],{"class":128},"  server",[41,152,132],{"class":58},[41,154,59],{"class":58},[41,156,157],{"class":128}," port",[41,159,132],{"class":58},[41,161,163],{"class":162},"sbssI"," 3000",[41,165,166],{"class":58}," }\n",[41,168,170,173],{"class":43,"line":169},8,[41,171,172],{"class":58},"}",[41,174,175],{"class":62},")\n",[11,177,179],{"id":178},"when-youll-hear-this","When You'll Hear This",[16,181,182],{},"Vite cold starts in under 300ms on this project.,We scaffolded with 'npm create vite@latest'.,Vite's plugin ecosystem has grown massively.",[184,185,186],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":188},[189,190,191,192],{"id":13,"depth":51,"text":14},{"id":21,"depth":51,"text":22},{"id":28,"depth":51,"text":29},{"id":178,"depth":51,"text":179},"frontend","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.","beginner","md","v",{},"\u002Fterms\u002Fv\u002Fvite",[201,202,203,204,205],"Bundler","Webpack","Rollup","Hot Module Replacement","esbuild",{"title":5,"description":194},{"changefreq":208,"priority":209},"weekly",0.7,"terms\u002Fv\u002Fvite","8wvvnOeDrZRsc_VemcgFSdm1VxNKiEloYo2I_lu176U",[213,216,220,224,227],{"title":201,"path":214,"acronym":6,"category":193,"difficulty":195,"description":215},"\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":205,"path":217,"acronym":6,"category":193,"difficulty":218,"description":219},"\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":204,"path":221,"acronym":222,"category":193,"difficulty":218,"description":223},"\u002Fterms\u002Fh\u002Fhot-module-replacement","HMR","HMR is the magic that makes your browser update instantly when you save a file — without refreshing the whole page and losing your app state.",{"title":203,"path":225,"acronym":6,"category":193,"difficulty":218,"description":226},"\u002Fterms\u002Fr\u002Frollup","Rollup is the bundler you use when you're building a library rather than an app.",{"title":202,"path":228,"acronym":6,"category":193,"difficulty":218,"description":229},"\u002Fterms\u002Fw\u002Fwebpack","Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world.",1776518323189]