Table of contents
Comparison between webpack and vite
Webpack and vite startup flow chart on the official website
Comparison of startup time between webpack and vite projects
Create directly using additional command line
Start the project using vscode
Note: What is created here is the vue3+vite project
Why use vite
Compared with webpack, vite starts faster.
Comparison between webpack and vite
Analysis instructions
Vite uses esbuild pre-built dependencies, which are written in Go and are faster than packager pre-built dependencies written in JavaScript.
When webpack starts, it will analyze dependencies, then compile and package it, and finally hand it over to the local server for rendering. Therefore, the more modules a project has, the more dependencies it has and the slower it will start.
Even if hot module update (HMR) is used, as the number of modules increases, the size of the packaged file bundle will increase, which will slow down the response speed.
When Vite is started, the development server will be started first, and when modules are requested, they will also be dynamically compiled and displayed on demand.
Because modern browsers natively support ES-Module, they will automatically make requests to dependent Modules.
Therefore, Vite uses the module files in the development environment as the browser's execution files, instead of packaging them like webpack and handing them to the local server.
In summary, Vite needs to package files into bundle files when it is started, so there is no need to analyze the dependencies between modules, and only compile the content of a certain module when needed.
When changing a module, there is no need to compile the module and dependent modules once like webpack, so hot update efficiency will be higher.
Webpack and vite startup flow chart on the official website
webpack:
quickly:
Comparison of startup time between webpack and vite projects
Create project
Create step by step
1. Use npm create vite@latest command
2、 Ok to proceed? (y)
3. Enter the project name ? Project name: » vite-project
4. Choose a frame
5. Select language
Screenshots of the entire process:
Create directly using additional command line
Use additional command line options to directly specify the project name and the template you want to use, as follows:
npm 6.x version command:
npm create vite@latest my-vue-app --template vue
npm is the command for version 7 or above:
npm create vite@latest my-vue-app -- --template vue
The execution process is as follows:
Start the project using vscode
Note: Vite needs to be installed before running the project for the first time, otherwise an error will be reported
Restart the project after executing the npm install command:
Interface after startup:
Official website link
If you want to know more details, you can check the official website:
vue3 official website: https://cn.vuejs.org/
vite official website: https://vitejs.cn/