[{"data":1,"prerenderedAt":73},["ShallowReactive",2],{"term-h\u002Fhot-module-replacement":3,"related-h\u002Fhot-module-replacement":59},{"id":4,"title":5,"acronym":6,"body":7,"category":40,"description":41,"difficulty":42,"extension":43,"letter":44,"meta":45,"navigation":46,"path":47,"related":48,"seo":52,"sitemap":53,"stem":56,"subcategory":57,"__hash__":58},"terms\u002Fterms\u002Fh\u002Fhot-module-replacement.md","Hot Module Replacement","HMR",{"type":8,"value":9,"toc":33},"minimark",[10,15,19,23,26,30],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"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. Change a button color, see it change immediately. No refresh, no lost data. It's like your code editor and browser are best friends sharing notes in real time.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Hot Module Replacement is a development server feature that replaces, adds, or removes modules at runtime without a full page reload. When a source file changes, only the affected module is swapped out while the application state is preserved. Vite and Webpack both implement HMR, with Vite's being significantly faster.",[11,27,29],{"id":28},"when-youll-hear-this","When You'll Hear This",[16,31,32],{},"HMR is why I can edit CSS without losing my form state.,HMR broke — the page is doing a full refresh on every save.,Vite's HMR is almost instant compared to Webpack's.",{"title":34,"searchDepth":35,"depth":35,"links":36},"",2,[37,38,39],{"id":13,"depth":35,"text":14},{"id":21,"depth":35,"text":22},{"id":28,"depth":35,"text":29},"frontend","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.","intermediate","md","h",{},true,"\u002Fterms\u002Fh\u002Fhot-module-replacement",[6,49,50,51],"Vite","Webpack","Bundler",{"title":5,"description":41},{"changefreq":54,"priority":55},"weekly",0.7,"terms\u002Fh\u002Fhot-module-replacement",null,"hoBp7mDBGVhOwOADUE7bmn_jAe276F-8N5KBGeTD-wU",[60,64,67,70],{"title":51,"path":61,"acronym":57,"category":40,"difficulty":62,"description":63},"\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":6,"path":65,"acronym":57,"category":40,"difficulty":42,"description":66},"\u002Fterms\u002Fh\u002Fhmr","HMR stands for Hot Module Replacement. It's the dev server trick that updates your browser in real time without a full refresh.",{"title":49,"path":68,"acronym":57,"category":40,"difficulty":62,"description":69},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",{"title":50,"path":71,"acronym":57,"category":40,"difficulty":42,"description":72},"\u002Fterms\u002Fw\u002Fwebpack","Webpack is the OG bundler — the grumpy grandpa of the JavaScript build world.",1776518287288]