Before browsers supported the ES module, developers didn’t develop JavaScript’s native mechanics in a modular way. This is where the concept of “packaging” comes in: using tools to grab, manipulate, and link our source code modules into files that run in a browser.
As we start building larger and larger applications, the amount of JavaScript code we need to process grows exponentially. It is not uncommon for large projects to contain thousands of modules. We started hitting performance bottlenecks — tools developed in JavaScript often took a long time (even minutes!). To start the development server, even with HMR, it takes a few seconds for the effect of the file changes to be reflected in the browser. Over and over again, slow feedback can have a huge impact on a developer’s productivity and happiness.
Vite is designed to solve these problems.
The server
Vite only starts a static page server, does not pack the file code, the server will load different modules according to the request of the client, to achieve the real load on demand.
HMR hot update
Hot updates to Webpack are rebuilt and packaged with the current modified file entry, and all dependencies involved are reloaded once.
Vite compiles the modified file immediately and uses the caching mechanism (HTTP caching => Vite built-in caching) to load the updated file content.
conclusion
All in all, Vite features fast cold startup, on-demand compilation, and hot module updates.
To sum up, there are major differences between a Vite build project and a VUE-CLI build project in development mode:
1. Vite can run directly in development mode without packaging, using ES6 modular loading rules; In vue-CLI development mode, the project must be packaged to run.
2, Vite based on cache hot update, VUe-CLI based on Webpack hot update.