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?
Vite doesn't rely on transpilation at all (although TypeScript code still needs to be converted into JavaScript). Instead, it relies on ECMAScript 6's Module support. This support allows the browser to retrieve modules as you import them. Because you're not building your project during development, the startup speed and compilation time is greatly reduced. Although these benefits are great, this means (in development) that you'll have to use a newer browser (e.g., Chrome, Edge, Firefox) to ensure that it has ES6 Module support.
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.
Sample result:
4.2 Vue CLI vs Vite summary
