[{"data":1,"prerenderedAt":224},["ShallowReactive",2],{"term-i\u002Fimport-maps":3,"related-i\u002Fimport-maps":206},{"id":4,"title":5,"acronym":6,"body":7,"category":187,"description":188,"difficulty":189,"extension":190,"letter":191,"meta":192,"navigation":193,"path":194,"related":195,"seo":200,"sitemap":201,"stem":204,"subcategory":6,"__hash__":205},"terms\u002Fterms\u002Fi\u002Fimport-maps.md","Import Maps",null,{"type":8,"value":9,"toc":181},"minimark",[10,15,19,23,26,30,170,174,177],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 - The Vibe Check",[16,17,18],"p",{},"Import maps let you write import React from 'react' directly in the browser, no bundler required, and tell the browser exactly which URL that bare name actually points to. It's basically a phone book for your JavaScript imports: the browser looks up the name, finds the real address, and fetches it.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"Import maps are a browser feature that control how bare module specifiers like react or lodash resolve to actual URLs when using native ES modules, without a bundler rewriting import statements. They are declared via a script type=importmap tag and are commonly used for bundler free development and CDN based dependency loading.",[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-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript type=\"importmap\">\n{\n  \"imports\": {\n    \"react\": \"https:\u002F\u002Fesm.sh\u002Freact@19\",\n    \"react-dom\": \"https:\u002F\u002Fesm.sh\u002Freact-dom@19\"\n  }\n}\n\u003C\u002Fscript>\n\u003Cscript type=\"module\">\n  import React from 'react'\n\u003C\u002Fscript>\n","html","",[38,39,40,72,79,85,91,97,103,109,119,139,161],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,69],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sMK4o","\u003C",[41,50,52],{"class":51},"swJcz","script",[41,54,56],{"class":55},"spNyl"," type",[41,58,59],{"class":47},"=",[41,61,62],{"class":47},"\"",[41,64,66],{"class":65},"sfazB","importmap",[41,68,62],{"class":47},[41,70,71],{"class":47},">\n",[41,73,75],{"class":43,"line":74},2,[41,76,78],{"class":77},"sTEyZ","{\n",[41,80,82],{"class":43,"line":81},3,[41,83,84],{"class":77},"  \"imports\": {\n",[41,86,88],{"class":43,"line":87},4,[41,89,90],{"class":77},"    \"react\": \"https:\u002F\u002Fesm.sh\u002Freact@19\",\n",[41,92,94],{"class":43,"line":93},5,[41,95,96],{"class":77},"    \"react-dom\": \"https:\u002F\u002Fesm.sh\u002Freact-dom@19\"\n",[41,98,100],{"class":43,"line":99},6,[41,101,102],{"class":77},"  }\n",[41,104,106],{"class":43,"line":105},7,[41,107,108],{"class":77},"}\n",[41,110,112,115,117],{"class":43,"line":111},8,[41,113,114],{"class":47},"\u003C\u002F",[41,116,52],{"class":51},[41,118,71],{"class":47},[41,120,122,124,126,128,130,132,135,137],{"class":43,"line":121},9,[41,123,48],{"class":47},[41,125,52],{"class":51},[41,127,56],{"class":55},[41,129,59],{"class":47},[41,131,62],{"class":47},[41,133,134],{"class":65},"module",[41,136,62],{"class":47},[41,138,71],{"class":47},[41,140,142,146,149,152,155,158],{"class":43,"line":141},10,[41,143,145],{"class":144},"s7zQu","  import",[41,147,148],{"class":77}," React ",[41,150,151],{"class":144},"from",[41,153,154],{"class":47}," '",[41,156,157],{"class":65},"react",[41,159,160],{"class":47},"'\n",[41,162,164,166,168],{"class":43,"line":163},11,[41,165,114],{"class":47},[41,167,52],{"class":51},[41,169,71],{"class":47},[11,171,173],{"id":172},"when-youll-hear-this","When You'll Hear This",[16,175,176],{},"\"We ditched the bundler for this microsite and used an import map instead.\" \u002F \"The import map points 'vue' at the CDN build, so every page shares one cached copy.\"",[178,179,180],"style",{},"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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 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 .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":74,"depth":74,"links":182},[183,184,185,186],{"id":13,"depth":74,"text":14},{"id":21,"depth":74,"text":22},{"id":28,"depth":74,"text":29},{"id":172,"depth":74,"text":173},"frontend","Import maps let you write import React from 'react' directly in the browser, no bundler required, and tell the browser exactly which URL that bare name act...","intermediate","md","i",{},true,"\u002Fterms\u002Fi\u002Fimport-maps",[196,197,198,199],"Bundler","CDN","JAMstack","Module Federation",{"title":5,"description":188},{"changefreq":202,"priority":203},"weekly",0.7,"terms\u002Fi\u002Fimport-maps","FjrYotRNJ7awt1wogAbs6NVakF_r5dJZh86_5MAErFw",[207,211,216,219],{"title":196,"path":208,"acronym":6,"category":187,"difficulty":209,"description":210},"\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":197,"path":212,"acronym":213,"category":214,"difficulty":209,"description":215},"\u002Fterms\u002Fc\u002Fcdn","Content Delivery Network","cloud","A CDN is a network of servers spread around the world that store copies of your files.",{"title":198,"path":217,"acronym":6,"category":214,"difficulty":209,"description":218},"\u002Fterms\u002Fj\u002Fjamstack","JAMstack stands for JavaScript, APIs, Markup.",{"title":199,"path":220,"acronym":6,"category":221,"difficulty":222,"description":223},"\u002Fterms\u002Fm\u002Fmodule-federation","architecture","advanced","Module Federation lets separate webpack builds share code at runtime. App A can dynamically load a component from App B's bundle — no npm package needed.",1792528092256]