Getting started with Vite
Vite is an extremely fast build tool that replaces webpack
Article Directory
Preface
Before browsers supported ES modules, developers did not develop native JavaScript mechanisms in a modular way. This is also the reason for the emergence of the concept of "packaging". The packaging here refers to construction tools such
as webpack . However, as the projects packaged by webpack become larger and larger, the time required for each packaging becomes longer and longer, even if there are In the hot update method, webpack generally takes about 1 second, and you have to wait for a CSS adjustment.
But as the browser starts to support ES modules natively, using the browser’s native support to package will reduce the time to the millisecond level.
Tip: The following is the content of this article, the following cases are for reference
1. What is Vite?
Vite (French means "fast", pronounced /vit/) is a new front-end construction tool that can significantly improve the front-end development experience. It is mainly composed of two parts:
a development server, which provides rich built-in functions based on native ES modules, such as the amazingly fast module hot update (HMR).
A set of build instructions, it uses Rollup to package your code, and it is pre-configured to output optimized static resources for production environments.
Vite intends to provide out-of-the-box configuration, and its plug-in API and JavaScript API bring high scalability and complete type support.
Second, use steps
1. Use npm
code show as below:
npm init @vitejs/app
Enter project name
Then you can select the preset template. Here, the vue 
project has been created, and then cd to the project folder to install
2. Installation dependencies
code show as below:
npm install
It is recommended to use cnpm in China
cnpm install
3. Run the test server
Run directly with npm run dev
npm run dev
You can see that the test server is already running on port 3000
4. Fast! Fast! Fast! Fast! Fast!
The following is a comparison with webpack. The first one uses vite. After pressing ctrl+S, the page changes almost at the same time.
On the webpack side, it takes about half a second to build, and the build process will also be displayed in the console.
to sum up
The construction time gap in the initial template project alone is so large. It can be imagined that Vite can improve the development efficiency of large projects. Vite can be said to be an alternative to webpack.