{"_path":"/posts/how-the-heck-does-vite-work-2","_draft":false,"_partial":false,"_empty":false,"title":"How Does Vite Work - A Comparison to webpack - 2","description":"A deep-dive into the comparisons between the earliest Vite version and webpack. Discover what I learnt digging into internals and how I, correctly, guessed Vite was the next big thing.","publishedAt":"2020-12-01","status":"published","image":"https://harlanzw.com/social/how-vite-works.png","tags":["webpack","vite"],"body":{"type":"root","children":[{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Note: This article was written for the alpha of Vite. I'd recommend reading Patak's great article on "},{"type":"element","tag":"a","props":{"href":"https://patak.dev/vite/ecosystem.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"The Vite Ecosystem"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In rebuilding my old Nuxt.js personal site, I wanted to challenge myself to learn the latest tech, the unknown."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The unknown was the new project by Evan You: "},{"type":"element","tag":"a","props":{"href":"https://github.com/vitejs/vite","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"⚡ Vite"}]},{"type":"text","value":" (/veet/). Called Fast, for the 🇫🇷 Frenchies."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I'll be comparing how Vite works to the standard "},{"type":"element","tag":"a","props":{"href":"https://github.com/webpack/webpack","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"webpack"}]},{"type":"text","value":" config using "},{"type":"element","tag":"a","props":{"href":"https://github.com/webpack/webpack-dev-server","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"webpack-dev-server"}]},{"type":"text","value":", which all major Vue frameworks\nare using."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"We'll be looking at how Vite no-bundling works, by first looking at how webpack's bundling works and what the difference is. Afterwards I'll give you some\nrecommendations for setting up Vite for yourself."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite could the next best thing in tooling, currently, it's still in a pre-release stage though so be careful out there 🐛."}]},{"type":"element","tag":"h2","props":{"id":"a-recap-on-vite"},"children":[{"type":"text","value":"A Recap on Vite"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite is a web development build tool which supports Vue, React and Preact. It's an experimental new direction in how build tools can work with a greenfield ecosystem."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite's core functionality is similar to webpack + webpack-dev-server with some core improvements\non developer experience:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"⌛ Less time waiting for your app to start, regardless of app size"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"🔥 Hot module reloading (HMR) that is basically instant, regardless of app size"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"🔨 On-demand compilation"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"🙅‍♂️ Zero configuration for numerous pre-processors out of the box"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"📜 Esbuild powered typescript / jsx (super quick)"}]}]},{"type":"element","tag":"h3","props":{"id":"speed-example"},"children":[{"type":"text","value":"Speed Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To give you a quick idea on how much faster it is, the below comparison is for Vue CLI which uses webpack. The bigger your app\nis the more noticeable the speed difference will be."}]},{"type":"element","tag":"figure","props":{},"children":[{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[]},{"type":"element","tag":"th","props":{"align":"right"},"children":[{"type":"text","value":"Build Time"}]},{"type":"element","tag":"th","props":{"align":"right"},"children":[{"type":"text","value":"Dev Server Start Time"}]},{"type":"element","tag":"th","props":{"align":"right"},"children":[{"type":"text","value":"Dev Page Load Time"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Vue CLI"}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-red-400"]},"children":[{"type":"text","value":"5.14s"}]}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-red-400"]},"children":[{"type":"text","value":"2568ms"}]}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-yellow-400"]},"children":[{"type":"text","value":"320ms"}]}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"Vite"}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-blue500"]},"children":[{"type":"text","value":"2.39s"}]}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-blue500"]},"children":[{"type":"text","value":"232ms"}]},{"type":"text","value":"️"}]},{"type":"element","tag":"td","props":{"align":"right"},"children":[{"type":"element","tag":"span","props":{"className":["text-yellow-500"]},"children":[{"type":"text","value":"379ms"}]}]}]}]}]},{"type":"element","tag":"figcaption","props":{},"children":[{"type":"text","value":"New Vue 3 project / 10 components / no Babel / 2nd run, in development."}]}]},{"type":"element","tag":"h2","props":{"id":"vite-vs-webpack"},"children":[{"type":"text","value":"Vite vs webpack"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The main functional difference you'll notice with Vite and your webpack app, is how code is served in development and which modules are supported."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Don't worry if the below terms don't make sense to you, we'll be exploring them below."}]},{"type":"element","tag":"h3","props":{"id":"webpack-nuxtjs--vue-cli--etc"},"children":[{"type":"text","value":"webpack (Nuxt.js / Vue CLI / etc)"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supported Modules: "},{"type":"element","tag":"a","props":{"href":"https://www.2ality.com/2014/09/es6-modules-final.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ES Modules"}]},{"type":"text","value":", "},{"type":"element","tag":"a","props":{"href":"http://wiki.commonjs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"CommonJS"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/amdjs/amdjs-api/wiki/AMD","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"AMD Modules"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Dev Server: Bundled modules served via webpack-dev-server using "},{"type":"element","tag":"a","props":{"href":"https://expressjs.com/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Express.js"}]},{"type":"text","value":" web server"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Production Build: webpack"}]}]},{"type":"element","tag":"h3","props":{"id":"vite"},"children":[{"type":"text","value":"Vite"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Supported Modules: "},{"type":"element","tag":"a","props":{"href":"https://www.2ality.com/2014/09/es6-modules-final.html","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"ES Modules"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Dev Server: Native-ES-Modules, served via Vite using a "},{"type":"element","tag":"a","props":{"href":"https://github.com/koajs/koa","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Koa"}]},{"type":"text","value":" web server"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Production build: "},{"type":"element","tag":"a","props":{"href":"https://github.com/rollup/rollup","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Rollup"}]}]}]},{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Check out Mozilla's "},{"type":"element","tag":"a","props":{"href":"https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/","target":"_blank"},"children":[{"type":"text","value":"article"}]},{"type":"text","value":" on ES Modules if they're new to you."}]}]},{"type":"element","tag":"h2","props":{"id":"understanding-webpack"},"children":[{"type":"text","value":"Understanding webpack"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"To understand how Vite works, it's best to look at how webpack works first. Even with its popularly, understanding webpack can be intimidating, so I'll try to keep it simple."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"webpack is versatile in what you can do with it, but at its core, it will:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Starting with an entry file, build a tree of your dependencies: all the imports, exports, requires from your code/files"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Transform / compile modules: think transpiling js for older browsers, turning SCSS into CSS"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Use algorithms to sort, rewrite and concatenate code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Optimise"}]}]},{"type":"element","tag":"h3","props":{"id":"webpack-in-development"},"children":[{"type":"text","value":"webpack In Development"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Assuming you're using one of the main Vue frameworks, when you start your app in development, it is going to do a few things:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Bundle all of your code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Start the webpack-dev-server, the Express.js web server which will serve the bundled code"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Setup sockets which will handle the Hot Module Reloading"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"As you may notice with your own apps, the bigger they grow, the longer you have to wait to start coding."}]},{"type":"element","tag":"Image","props":{"alt":"The Nuxt logo is almost burnt into my monitor at this point.","height":549,"src":"/blog/nuxt-start.png","width":789,"sizes":"md:789px sm:95vw xs:95vw"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Bundling in development is quicker because you don't need to do as much with the code, however,\nas your app grows, it will become painfully slow, especially on older machines."}]},{"type":"element","tag":"h3","props":{"id":"webpack-component-example"},"children":[{"type":"text","value":"webpack Component Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I created a default Vue 3 "},{"type":"element","tag":"a","props":{"href":"https://cli.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vue CLI"}]},{"type":"text","value":" project, which has an entry "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"App.vue"}]},{"type":"text","value":" file using the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HelloWorld.vue"}]},{"type":"text","value":" component.\nLet's see how this component gets to my browser."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"HelloWorld.vue component:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"HelloWorld.vue"}]},{"type":"element","tag":"code","props":{"code":"<script>\nexport default {\n  props: {\n    msg: String\n  }\n}\n</script>\n\n<template>\n  <div class=\"hello\">\n    <h1>{{ msg }}</h1>\n  </div>\n</template>\n\n<style scoped>\nh1 {\n  color: green;\n}\n</style>\n","filename":"HelloWorld.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    msg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"String"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"hello"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"1>{{ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"msg"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" }}</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"h"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"1>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"h1"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"color"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"green"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When I start my app and visit localhost I get the following HTML from the Express.js server."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"html","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\">\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"text/javascript\" src=\"/js/chunk-vendors.js\"></script>\n    <script type=\"text/javascript\" src=\"/js/app.js\"></script>\n  </body>\n</html>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<!"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"DOCTYPE"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"en"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"charset"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"utf-8"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"http-equiv"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"X-UA-Compatible"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"IE=edge"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"meta"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"name"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"viewport"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"content"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"width=device-width,initial-scale=1.0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"head"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"text/javascript"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/js/chunk-vendors.js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"text/javascript"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/js/app.js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"body"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"html"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You'll notice we have 2 script files there: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"chunk-vendor.js"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":". On inspecting them you'd see a lot of gibberish looking code.\nit helps to use the "},{"type":"element","tag":"a","props":{"href":"https://www.npmjs.com/package/webpack-bundle-analyzer","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"webpack-bundle-analyzer"}]},{"type":"text","value":" to see how it works visually."}]},{"type":"element","tag":"h4","props":{"id":"chunk-vendorsjs"},"children":[{"type":"text","value":"chunk-vendors.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"These are third-party modules, usually coming from "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node_modules"}]},{"type":"text","value":". The two main libraries in here are Vue itself and sockjs which is used for HMR."}]},{"type":"element","tag":"Image","props":{"alt":"The two top libraries are Vue.js and Sock.js (For HMR)","height":400,"src":"/blog/vendor-chunk.png","width":775,"max-height":400,"sizes":"md:775px sm:95vw xs:95vw"},"children":[]},{"type":"element","tag":"h4","props":{"id":"appjs"},"children":[{"type":"text","value":"app.js"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"This is all the code for my application. It contains components, assets, etc. You'll notice that for an SFC it splits\nit into multiple modules."}]},{"type":"element","tag":"Image","props":{"alt":"My app is two components, App.vue and HelloWorld.vue","height":450,"src":"/blog/app-chunk.png","width":877,"max-height":450,"sizes":"md:877px sm:95vw xs:95vw"},"children":[]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Taking a quick look at the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" file, we can find some of the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"HelloWorld"}]},{"type":"text","value":" component code. As you can see in the above image,\nall parts of the SFC are separate modules: the wrapper, CSS, template, js."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The wrapper module is defining and importing the other models, some beautiful code."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"/***/ \"./src/components/HelloWorld.vue\":\n/*!***************************************!*\\\n  !*** ./src/components/HelloWorld.vue ***!\n  \\***************************************/\n/*! exports provided: default */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\neval(\"__webpack_require__.r(__webpack_exports__);\\n/* harmony import */ var _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ \\\"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true\\\");\\n/* harmony import */ var _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=script&lang=js */ \\\"./src/components/HelloWorld.vue?vue&type=script&lang=js\\\");\\n/* empty/unused harmony star reexport *//* harmony import */ var _HelloWorld_vue_vue_type_style_index_0_id_469af010_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css */ \\\"./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css\\\");\\n\\n\\n\\n\\n\\n_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"].render = _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\\\"render\\\"]\\n_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"].__scopeId = \\\"data-v-469af010\\\"\\n/* hot reload */\\nif (true) {\\n  _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"].__hmrId = \\\"469af010\\\"\\n  const api = __VUE_HMR_RUNTIME__\\n  module.hot.accept()\\n  if (!api.createRecord('469af010', _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"])) {\\n    api.reload('469af010', _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"])\\n  }\\n  \\n  module.hot.accept(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ \\\"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true\\\", function(__WEBPACK_OUTDATED_DEPENDENCIES__) { /* harmony import */ _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ \\\"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true\\\");\\n(() => {\\n    api.rerender('469af010', _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__[\\\"render\\\"])\\n  })(__WEBPACK_OUTDATED_DEPENDENCIES__); }.bind(this))\\n\\n}\\n\\n_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"].__file = \\\"src/components/HelloWorld.vue\\\"\\n\\n/* harmony default export */ __webpack_exports__[\\\"default\\\"] = (_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__[\\\"default\\\"]);\");\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"/***/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":":"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"/*!***************************************!*\\"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"  !*** ./src/components/HelloWorld.vue ***!"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"  \\***************************************/"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"/*! exports provided: default */"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#6272A4"}},"children":[{"type":"text","value":"/***/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"function"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"__webpack_exports__"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"__webpack_require__"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"use strict"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"eval"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"__webpack_require__.r(__webpack_exports__);"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* harmony import */ var _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":");"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* harmony import */ var _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=script&lang=js */ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue?vue&type=script&lang=js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":");"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* empty/unused harmony star reexport *//* harmony import */ var _HelloWorld_vue_vue_type_style_index_0_id_469af010_scoped_true_lang_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css */ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue?vue&type=style&index=0&id=469af010&scoped=true&lang=css"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":");"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n\\n\\n\\n\\n\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"].render = _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"]"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"].__scopeId = "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"data-v-469af010"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* hot reload */"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"if (true) {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"].__hmrId = "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"469af010"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  const api = __VUE_HMR_RUNTIME__"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  module.hot.accept()"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  if (!api.createRecord('469af010', _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"])) {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"    api.reload('469af010', _HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"])"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  }"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  module.hot.accept(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":", function(__WEBPACK_OUTDATED_DEPENDENCIES__) { /* harmony import */ _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./HelloWorld.vue?vue&type=template&id=469af010&scoped=true */ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"./src/components/HelloWorld.vue?vue&type=template&id=469af010&scoped=true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":");"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"(() => {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"    api.rerender('469af010', _HelloWorld_vue_vue_type_template_id_469af010_scoped_true__WEBPACK_IMPORTED_MODULE_0__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"])"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  })(__WEBPACK_OUTDATED_DEPENDENCIES__); }.bind(this))"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"].__file = "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"src/components/HelloWorld.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\"\\n\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/* harmony default export */ __webpack_exports__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"] = (_HelloWorld_vue_vue_type_script_lang_js__WEBPACK_IMPORTED_MODULE_1__["}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"]);"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":");"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The main takeaway here is that within the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"app.js"}]},{"type":"text","value":" file contains all modules for my app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"webpack does let you chunk the bundles how you like, for Nuxt.js it chunks routes individually. The more chunks though,\nthe more requests and more potential blocking js."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You may see the problem here, we have multiple monolith files that need to be generated anytime we want to use our app.\nWhen we change a file for HMR, we need to regenerate the entire file."}]},{"type":"element","tag":"h2","props":{"id":"understanding-vite"},"children":[{"type":"text","value":"Understanding Vite"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite doesn't set out to be a new bundler. Rather, it's a pre-configured build environment using the Rollup\nbundler and a tool for local development."}]},{"type":"element","tag":"h3","props":{"id":"vite-in-development"},"children":[{"type":"text","value":"Vite In Development"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite makes the assumption that developers are going to be using the latest browser versions, so it can safely rely on the\nlatest JS functionality straight from the browser - in other words, no babel transpiling!"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When you start Vite for the first time pre-optimisations will be done on your "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"node_modules"}]},{"type":"text","value":", then "},{"type":"element","tag":"a","props":{"href":"https://github.com/koajs/koa","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Koa"}]},{"type":"text","value":",\na light-weight node web server starts to serve your app."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"There is no bundling or compiling needed to start the dev server, so it's damn quick (< 300ms)."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"When you open your Vite app you'll be served the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":" from the server. The browser is going to read the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"index.html"}]},{"type":"text","value":"\nand know how to parse the Native-ES-Module code."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"html","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"<script type=\"module\">import \"/vite/client\"</script>\n<div id=\"app\"></div>\n<script type=\"module\" src=\"/@app/index.js\"></script>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/vite/client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</script>"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"id"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"module"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@app/index.js"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"></"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Parsing the Native-ES-Module means it will read the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" lines from your code. It will convert those\nlines into HTTP requests back to the server, where it will again read the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"export"}]},{"type":"text","value":" and "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"import"}]},{"type":"text","value":" lines and make new requests."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"It will keep going through like this with your dependencies recursively, in a waterfall process, until everything has been resolved."}]},{"type":"element","tag":"Image","props":{"alt":"Recursive network requests triggered from the entry - VitePress.","height":450,"src":"/blog/network-requests.png","width":787,"max-height":450,"sizes":"md:787px sm:95vw xs:95vw"},"children":[]},{"type":"element","tag":"h3","props":{"id":"vite-component-example"},"children":[{"type":"text","value":"Vite Component Example"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's take a look at how these requests are working in the browser. After I open my app at "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http://localhost:3000"}]},{"type":"text","value":", the browser has fetched the following "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"index.js"}]},{"type":"text","value":" file from the web server:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block "},"children":[{"type":"element","tag":"code","props":{"code":"import '/@theme/styles/main.scss?import';\nimport Layout from '/@theme/Layout.vue';\nimport NotFound from '/@theme/NotFound.vue';\nimport CardPost from '/@theme/components/CardPost.vue';\n\nconst theme = {\n    Layout,\n    NotFound,\n    enhanceApp({ app, }) {\n        app.component('CardPost', CardPost)\n    }\n};\nexport default theme;\n","highlights":[5],"language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/styles/main.scss?import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" Layout "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/Layout.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" NotFound "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/NotFound.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" CardPost "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/components/CardPost.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line highlight"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" theme "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    Layout,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    NotFound,"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"enhanceApp"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"({ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"app"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", }) {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"        app."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"component"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"CardPost"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", CardPost)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" theme;"}]}]}]}]}]}]},{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Normally, in webpack, you would have to transpile this code to something legacy browsers can understand. Newer browsers know what to do with it, see "},{"type":"element","tag":"a","props":{"href":"https://caniuse.com/es6-module-dynamic-import","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"es6 module dynamic import"}]},{"type":"text","value":"."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's drill into that highlighted line which is requesting the CardPost SFC. The browser will turn that import into a request for "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"http://localhost:3000/@theme/components/CardPost.vue"}]},{"type":"text","value":"."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"vue","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"CardPost.vue"}]},{"type":"element","tag":"code","props":{"code":"<script>\nimport posts from '../../posts'\n\nexport default {\n  props: {\n    postIndex: {\n      type: Number,\n      required: true,\n    }\n  },\n  computed: {\n    post() {\n      return posts[this.postIndex]\n    }\n  }\n}\n</script>\n\n<template>\n  <div class=\"card-post\">\n    ...\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.card-post {\n  ...\n}\n</style>\n","filename":"CardPost.vue","language":"vue"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" posts "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"../../posts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    postIndex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" posts["}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".postIndex]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"script"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"card-post"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  </"}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"lang"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"scss"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"scoped"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"card-post"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  ..."}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"</"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"style"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":">"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once the web server gets this request, it will need to compile the "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"CardPost.vue"}]},{"type":"text","value":" file to javascript and send it back. Vite has many\noptimisations around the Vue compiling so this takes no time."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Let's see what comes through:"}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"CardPost.vue - Transpiled"}]},{"type":"element","tag":"code","props":{"code":"import posts from '/.vitepress/posts.ts'\n\nimport '/@theme/components/CardPost.vue?type=style&index=0'\nimport { render as __render } from '/@theme/components/CardPost.vue?type=template'\n\nconst __script = {\n  props: {\n    postIndex: {\n      type: Number,\n      required: true,\n    }\n  },\n  computed: {\n    post() {\n      return posts[this.postIndex]\n    }\n  }\n}\n__script.__scopeId = 'data-v-287b4794'\n__script.render = __render\n__script.__hmrId = '/@theme/components/CardPost.vue'\ntypeof __VUE_HMR_RUNTIME__ !== 'undefined' && __VUE_HMR_RUNTIME__.createRecord(__script.__hmrId, __script)\n__script.__file = '/home/harlan/sites/new.harlanzw.com/app/.vitepress/theme/components/CardPost.vue'\nexport default __script\n","filename":"CardPost.vue - Transpiled","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" posts "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/.vitepress/posts.ts"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/components/CardPost.vue?type=style&index=0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" { "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFB86C"}},"children":[{"type":"text","value":"render"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"as"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __render } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/components/CardPost.vue?type=template"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __script "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  props"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    postIndex"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      type"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#8BE9FD"}},"children":[{"type":"text","value":"Number"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      required"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"true"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":","}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  },"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  computed"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":":"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"post"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"() {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"      "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"return"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" posts["}]},{"type":"element","tag":"span","props":{"style":{"color":"#BD93F9"}},"children":[{"type":"text","value":"this"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":".postIndex]"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"    }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"  }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"}"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"__script.__scopeId "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"data-v-287b4794"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"__script.render "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __render"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"__script.__hmrId "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/@theme/components/CardPost.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"typeof"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __VUE_HMR_RUNTIME__ "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"!=="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"undefined"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"&&"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __VUE_HMR_RUNTIME__."}]},{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"createRecord"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"(__script.__hmrId, __script)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"__script.__file "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/home/harlan/sites/new.harlanzw.com/app/.vitepress/theme/components/CardPost.vue"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" __script"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Cool, so quite a bit going on here. The main thing to note here is how it's split up the SFC into different modules which\nwill need separate requests to fetch. It hasn't bundled these imports into the SFC or some other monolith file."}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Dependencies: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/.vitepress/posts.ts"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Template: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/@theme/components/CardPost.vue?type=template"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Stylesheet: "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"/@theme/components/CardPost.vue?type=style&index=0"}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you're curious, this is what the style component response looks like, some nifty for sure."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"js","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"CardPost.vue - CSS"}]},{"type":"element","tag":"code","props":{"code":"import { updateStyle } from '/vite/client'\nconst css = '.card-post[data-v-287b4794] {\\n  position: relative;\\n}\\n.card-post .prose[data-v-287b4794] {\\n  max-width: 100% !important;\\n}\\n.card-post__link[data-v-287b4794] {\\n  position: absolute;\\n  left: 0;\\n  top: 0;\\n  width: 100%;\\n  height: 100%;\\n  content: \" \";\\n  z-index: 1;\\n}\\n.card-post__content[data-v-287b4794] {\\n  background-color: white;\\n  z-index: 1;\\n}\\n.card-post__effect[data-v-287b4794] {\\n  z-index: -1;\\n  content: \" \";\\n  height: 30px;\\n  width: 100%;\\n  position: absolute;\\n  background-color: #059669;\\n  transition: 0.2s;\\n  opacity: 0;\\n  top: 30px;\\n}\\n.card-post:hover .card-post__effect[data-v-287b4794] {\\n  top: -5px;\\n  opacity: 1;\\n  transform: rotate(0.25deg);\\n}'\nupdateStyle('287b4794-0', css)\nexport default css\n","filename":"CardPost.vue - CSS","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"import"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" { updateStyle } "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"from"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"/vite/client"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" css "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  position: relative;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post .prose[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  max-width: 100% !important;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post__link[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  position: absolute;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  left: 0;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  top: 0;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  width: 100%;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  height: 100%;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  content: \" \";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  z-index: 1;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post__content[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  background-color: white;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  z-index: 1;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post__effect[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  z-index: -1;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  content: \" \";"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  height: 30px;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  width: 100%;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  position: absolute;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  background-color: #059669;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  transition: 0.2s;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  opacity: 0;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  top: 30px;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":".card-post:hover .card-post__effect[data-v-287b4794] {"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  top: -5px;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  opacity: 1;"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"  transform: rotate(0.25deg);"}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"\\n"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"}"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#50FA7B"}},"children":[{"type":"text","value":"updateStyle"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F1FA8C"}},"children":[{"type":"text","value":"287b4794-0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#E9F284"}},"children":[{"type":"text","value":"'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":", css)"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"export"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF79C6"}},"children":[{"type":"text","value":"default"}]},{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":" css"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can see how the above allows the Hot Module Replacement to work efficiently. When you have a module that is changed,\nsay the styles within a component, instead of reloading the entire component tree, only the style module needs to be replaced."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You can also imagine with the above, where Vite slows down. Imagine hundreds of HTTP requests which rely on nested HTTP requests, recursively.\nFortunately, there are optimisation to avoid this situation after the first load. The server will return a 304\nUnmodified HTTP Status code for modules which haven't changed, meaning they will use the browser's cached version of the file."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite scales well for any app size because it only needs to request the modules for the route you're on."}]},{"type":"element","tag":"h2","props":{"id":"production-builds"},"children":[{"type":"text","value":"Production Builds"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Since Vite is using Rollup, pre-configured, you'd expect a similar output from Vite as webpack. Vite does boast a quicker\nbuilder and potentially a smaller artifact size, as Rollup is a more efficient bundler than webpack."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The main gotcha is that Vite can still only support ES Modules in the production build, meaning you can't have any dependencies\nwhich don't have ES Module exports."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Vite is also pre-configured to handle your build as a universal app. A universal app is built using a client (virtual browser)\nand a server (node). Allowing it to pre-render the HTML pages, so robot crawlers can fetch your page content without executing\njs and speeding up the initial load for users. That means SEO friendly static sites out of the box 🎉."}]},{"type":"element","tag":"h2","props":{"id":"summary"},"children":[{"type":"text","value":"Summary"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"While I haven't touched on a lot of the complexities of Vite and webpack, I've tried to show you the main difference, how\nbundling and no-bundling look in action."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Hopefully you've seen why Vite is promising alternative. There is so much potential in the ecosystem at the moment, watch this space, given 12-months we could see an explosion of Vite related projects."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you want to find out more about Vite, I'd watch Evan's talk on "},{"type":"element","tag":"a","props":{"href":"https://www.youtube.com/watch?v=xXrhg26VCSc&","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vite & VitePress"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"getting-started-with-vite"},"children":[{"type":"text","value":"Getting started with Vite"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"I'd recommend just spinning up bare-bones Vite to get a feel for it. It's really easy, takes less than a minute."}]},{"type":"element","tag":"CodeBlock","props":{"data-language":"shell","class":"code-block code-block--with-filename"},"children":[{"type":"element","tag":"span","props":{"class":"code-block__filename"},"children":[{"type":"text","value":"bash"}]},{"type":"element","tag":"code","props":{"code":"npm init vite-app\n","filename":"bash","language":"shell"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#F8F8F2"}},"children":[{"type":"text","value":"npm init vite-app"}]}]}]}]}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Once you are sold, it's worth checking out "},{"type":"element","tag":"a","props":{"href":"https://github.com/vitejs/awesome-vite","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"the ecosystem"}]},{"type":"text","value":" before you build."}]},{"type":"element","tag":"h3","props":{"id":"recommendations"},"children":[{"type":"text","value":"Recommendations"}]},{"type":"element","tag":"tip","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"You shouldn't be looking to replace Vue CLI or webpack with Vite for existing projects yet, but it may be valuable to check out for new smaller scoped projects."}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"The Vite ecosystem isn't that mature yet, the two main projects I'd recommend checking out are "},{"type":"element","tag":"a","props":{"href":"https://vitepress.vuejs.org/","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"VitePress"}]},{"type":"text","value":" and "},{"type":"element","tag":"a","props":{"href":"https://github.com/antfu/vitesse","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Vitesse"}]},{"type":"text","value":"."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you are in need of a documentation site then VitePress is awesome, you can follow the VuePress documentation to fill in any gaps. VitePress abstracts away\nthe Vite configuration, which will be limiting for non-documentation sites."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Otherwise, I'd choose Vitesse as it's going to give you more flexible on customising your app. Vitesse offers a pre-configured "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"vite.config.js"}]},{"type":"text","value":", so you can easily\nstrip anything out you don't need to add whatever you'd like to it."}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you like my blog (VitePress + TailwindCSS), then you're more than welcome to "},{"type":"element","tag":"a","props":{"href":"https://github.com/harlan-zw/harlanzw.com","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"clone it"}]},{"type":"text","value":"."}]},{"type":"element","tag":"h2","props":{"id":"thanks-for-reading"},"children":[{"type":"text","value":"Thanks for reading"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"If you like the technical side of Vue and Laravel, I'll be posting regular articles on this site. The best\nway to keep up to date is by following me "},{"type":"element","tag":"a","props":{"href":"https://twitter.com/harlan_zw","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"@harlan_zw"}]},{"type":"text","value":"."}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"a-recap-on-vite","depth":2,"text":"A Recap on Vite","children":[{"id":"speed-example","depth":3,"text":"Speed Example"}]},{"id":"vite-vs-webpack","depth":2,"text":"Vite vs webpack","children":[{"id":"webpack-nuxtjs--vue-cli--etc","depth":3,"text":"webpack (Nuxt.js / Vue CLI / etc)"},{"id":"vite","depth":3,"text":"Vite"}]},{"id":"understanding-webpack","depth":2,"text":"Understanding webpack","children":[{"id":"webpack-in-development","depth":3,"text":"webpack In Development"},{"id":"webpack-component-example","depth":3,"text":"webpack Component Example"}]},{"id":"understanding-vite","depth":2,"text":"Understanding Vite","children":[{"id":"vite-in-development","depth":3,"text":"Vite In Development"},{"id":"vite-component-example","depth":3,"text":"Vite Component Example"}]},{"id":"production-builds","depth":2,"text":"Production Builds"},{"id":"summary","depth":2,"text":"Summary"},{"id":"getting-started-with-vite","depth":2,"text":"Getting started with Vite","children":[{"id":"recommendations","depth":3,"text":"Recommendations"}]},{"id":"thanks-for-reading","depth":2,"text":"Thanks for reading"}]}},"_type":"markdown","_id":"content:posts:how-the-heck-does-vite-work-2.md","_source":"content","_file":"posts/how-the-heck-does-vite-work-2.md","_extension":"md","storageMeta":{"atime":"2022-10-06T07:50:32.383Z","mtime":"2022-10-06T07:50:08.483Z","size":19489},"readingMins":9,"path":"/blog/how-the-heck-does-vite-work-2","renderer":"post","schemaOrg":{"modifiedAt":"2022-10-06T07:50:08.483Z"},"modifiedAt":"2022-10-06T07:50:08.483Z"}