So, you've heard the hype about VEET, and you want to get in on the action. Good for you, I guarantee you won't regret it. Since seeing the speed of VEET first hand, personally, I'm hooked. But let's not get ahead of ourselves.
First of all, what is VEET? Well, VEET, which is the French word for quick, is a modern build tool created by Evan Yu. It aims to provide a faster, and leaner development experience so that developers can spend less time waiting for their code to compile to preview changes, and more time actually developing. In terms of practical application, the closest comparison is probably Webpack or Vue CLI, which uses Webpack under the hood.
Developers use Webpack to spin up development servers with hot module reloading and to bundle their apps for production. This is the same thing that Vite does. The difference, though, is how Vite actually works under the hood, and the implications that this has on its speed and scalability. So, how does Vite work?
Well, Vite targets two bottlenecks in the traditional development server. The first is the slow server start. When cold-starting the dev server, a bundler-based build setup has to eagerly crawl and build your entire application before it can be served. Vite, on the other hand, improves the dev server start time by first dividing the modules in an application into two categories, dependencies and source code.
Dependencies are mostly plain JavaScript that do not change often during development. They often live in your node modules directory. Vite pre-bundles these dependencies using esbuild, which is a bundler written in the language Go. and pre-bundles dependencies 10 to 100 times faster than the JavaScript-based bundlers.
The other category, source code, often contains non-plane JavaScript that needs transforming, such as CSS or view components, and will be edited often. Vite serves source code over native ESM. This is essentially letting the browser take over the part of the job of a bundler. Thus, Vite only needs to transform and serve source code on demand, as the browser requests it.
The next bottleneck that Vite solves is that of slow updates. When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle, for obvious reasons. The update speed will degrade linearly with the size of the app. That is, the bigger your app, the longer the update will take.
In Vite, however, hot module replacement is performed over native ESM, thus only the affected file and the files that depend on it need to be updated, as opposed to the entire bundle. This makes hot module updates consistently fast, regardless of the size of your application. Lastly, it's worth mentioning that even though Vite was created by the founder of Vue, it is a framework agnostic tool. That means that while it works great for your Vue projects, It'll also work for React, Svelte, or projects based on other frontend frameworks.
This also means that there's an even wider audience of developers that will depend on this tool, ensuring maintained support in the future and a great many hands to make it even better. In conclusion, while knowing the internals of VEAT are essential to understanding how it's so fast, there's nothing better than seeing it for yourself. Let's do that in the next lesson. So, you've heard the hype about VEET, and you want to get in on the action.
Good for you, I guarantee you won't regret it. Since seeing the speed of VEET first hand, personally, I'm hooked. But let's not get ahead of ourselves. First of all, what is VEET?
Well, VEET, which is the French word for quick, is a modern build tool created by Evan Yu. It aims to provide a faster, and leaner development experience so that developers can spend less time waiting for their code to compile to preview changes, and more time actually developing. In terms of practical application, the closest comparison is probably Webpack or Vue CLI, which uses Webpack under the hood. Developers use Webpack to spin up development servers with hot module reloading and to bundle their apps for production.
This is the same thing that Vite does. The difference, though, is how Vite actually works under the hood, and the implications that this has on its speed and scalability. So, how does Vite work? Well, Vite targets two bottlenecks in the traditional development server.
The first is the slow server start. When cold-starting the dev server, a bundler-based build setup has to eagerly crawl and build your entire application before it can be served. Vite, on the other hand, improves the dev server start time by first dividing the modules in an application into two categories, dependencies and source code. Dependencies are mostly plain JavaScript that do not change often during development.
They often live in your node modules directory. Vite pre-bundles these dependencies using esbuild, which is a bundler written in the language Go. and pre-bundles dependencies 10 to 100 times faster than the JavaScript-based bundlers. The other category, source code, often contains non-plane JavaScript that needs transforming, such as CSS or view components, and will be edited often.
Vite serves source code over native ESM. This is essentially letting the browser take over the part of the job of a bundler. Thus, Vite only needs to transform and serve source code on demand, as the browser requests it. The next bottleneck that Vite solves is that of slow updates.
When a file is edited in a bundler-based build setup, it is inefficient to rebuild the whole bundle, for obvious reasons. The update speed will degrade linearly with the size of the app. That is, the bigger your app, the longer the update will take. In Vite, however, hot module replacement is performed over native ESM, thus only the affected file and the files that depend on it need to be updated, as opposed to the entire bundle.
This makes hot module updates consistently fast, regardless of the size of your application. Lastly, it's worth mentioning that even though Vite was created by the founder of Vue, it is a framework agnostic tool. That means that while it works great for your Vue projects, It'll also work for React, Svelte, or projects based on other frontend frameworks. This also means that there's an even wider audience of developers that will depend on this tool, ensuring maintained support in the future and a great many hands to make it even better.
In conclusion, while knowing the internals of VEAT are essential to understanding how it's so fast, there's nothing better than seeing it for yourself. Let's do that in the next lesson.