Why choose Vite | Vite official Chinese documentation (vitejs.dev)
- A long time ago, JavaScript was not modular, it was a whole. Therefore, in order to divide the file into small module files, the concept of "packaging" appeared.
- Previous splitting tools like webpack, rollup, etc., because the project is getting larger and larger, it takes a long time to start the development server , and the effect of hot replacement is not obvious. It takes a long time to display the modified content, which affects development. reader’s experience
In order to solve the problem of splitting into very small module files
To solve the problem of not taking a long time to start the development server
Therefore, es6 has the modularization of JavaScript, which can split the entire file into small module files one after another without using packaging tools such as webpack.
Vite divides the code in the project into dependent code and source code
Dependent code refers to the third-party libraries and third-party plug-ins that the project depends on.
The source code is the business code written by yourself in the project
At the very beginning, Vite distinguished the dependent code from the source code, and then used esbuild to repackage the dependent code, which is the third-party plug-in library. This is dependency pre- building .
Vite uses the modularity of es6 to obtain the source code, which is the code written by itself, which allows the browser to participate.
At the same time, Vite also uses the browser's http request header to speed up page reloading . When the source code is requested, it determines the 304 status and negotiates caching. When the dependent code is requested, it will use the browser's cache-control for strong caching. Once the dependent code is cached, it will not make a second request.
The above uses http's negotiation cache and strong cache to let the browser participate again and do a lot of things for us.