1. What is Vite?
Vite (French word for "quick", pronounced
/vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects.
2. Why Vite?
In production, Vite uses Rollup (which can be more efficient than webpack) to package your project, much like the Vue CLI does. Because this compilation step is only required once you have your code ready for production (or test, etc.), the development experience should be a lot more seamless.
3. Starting with Vite
3.1 Initial Vite app
To get stared, you'll just need to use npm install for Vite: (It's also using for existing project)
> npm init vite /app
This walks you through the process of creating the project (as seen in Figure).
3.2 The project structure
3.3 Production Builds
The Vite support [Hasing Output Files]
If you're building Vue to be used in a PWA or a static site, the default hashing of the names is important, as it breaks the cache. If you're not familiar with what I mean, here's the default build output names:
4. How Vite is Fast
4.1 Introduce Vite Dev Server
The Vite Dev Server server will be, at a minimum, around 10 times faster than Webpack. For a basic project, this would be a difference of 250ms for a dev build/re-build compared to 2.5sec.
- Vite use Rollup instead based on Webpack.
- DevServer of Vite use Native ES on browser module.
4.2 Vue CLI vs Vite summary