1. Introduction to Vite
Vite (French for "fast", pronounced /vit/, pronounced the same as "veet") is a new front-end construction tool that can significantly improve the front-end development experience (hot updates, packaged builds are faster).
2. Use vite to build the project
[Study Guide] The best way to learn new skills is to read the official documentation:vite official website
1. Run the create project command
# 使用 npm
npm create vite@latest
2. Fill in the project name
3. Select the front-end framework
4. Select the grammar type
5. Run the code as prompted
Run the code to run the project as shown below:
cd vite-project
npm install
npm run dev
3. Comparison between vite and webpack
1. Webpack: It will package first, then start the development server, and directly give the packaging result when requesting the server.
Compile and package all modules in advance into bundles. Regardless of whether this module is used or not, as the project grows larger, the speed of packaging startup will naturally become slower and slower.
Use webpack packaging mode as shown below:
2. Vite: Start the development server directly, request which module and then compile the module in real time.
When a service is started instantly, all files will not be compiled first. When the browser uses a certain file, the Vite service will receive the request and then compile and respond to the client.
Use Vite packaging mode as shown below:
3. Vite advantages:
- The startup speed of vite server is faster than webpack; Since VITE NEED una Packet y to start up, there is no need to analyze module dependencies and compile, so the startup speed is very fast. When the browser requests the required module, it compiles the module. This on-demand dynamic compilation mode greatly shortens the compilation time. When the project is larger and the files are more, the advantages of Vite in development become more obvious;
- Vite hot update is faster than webpack; That's it, instead of recompiling all the dependencies of the module like webpack;
- Vite uses esbuild (written in Go) to pre-build dependencies, while webpack is based on nodejs, which is 10-100 times faster than node;
4. Vite Disadvantages:
- The ecology is not as good as webpack, and the loaders and plug-ins are not rich enough;
- When packaging into the production environment, Vite uses traditional rollup for packaging. The production environment esbuild is not friendly enough to CSS and code splitting. Therefore, the advantages of Vite are reflected in the development stage;
- If it is not heavily used on a large scale, some problems may be hidden;
- The project's development browser must support esmodule and cannot recognize commonjs syntax;