First understand vue in webpack principle
1、 Give an entry file , Find dependencies through intersection files , Then you find a lot of modules , There is js,css And pictures contain a lot of files
2、 then webpack pack , adopt loader,plugin Wait and pack ;
3、 After packaging, it becomes a very small number of packaged files , It could be one or more , But it's definitely not the original module file ;
4、 After packing , In the development phase, you also need to start a development server , Then configure the server , Then start the development server ,
5、 Finally, by accessing the development server , He'll give us the packaged results
These processes are vue The development process of running the project is actually packaged in memory , So after this series of ways, it will
So that every time the code is modified in the development phase, the package will run , If you rely too much, it will run slowly
vue3 Use in vite Principle
1、vite There is no packaging process in the development phase , He starts a server directly , Nothing has been done since it was started
2、 Request a module to the development server ;
3、 Development server compilation module , Load the file with the required dependencies according to the page
4、 After loading , The development server returns the compiled results to the page
This improves our operational efficiency at this stage of development
summary ：
stay vue When running a project , It will carry out webpack Packing command , After packaging, put the project into the development server, and then start the development server , When the server is requested, the package result is given directly .
and vite Is to start the development server directly , Which module is requested to compile the module in real time . Because modern browsers support ES Moudule, It will be automatically transferred to the dependent Module Request .
vite Ingredients take advantage of this , The module file in the development environment will be , It's just a file to be executed by the browser , Not like it webpack Package and merge like that .
because vite There is no need to package at startup , This means that there is no need to analyze module dependencies , No compilation required , Therefore, the starting speed is very high
When the browser requests a module , Then compile the module content as needed . This way of on-demand dynamic compilation , Greatly reduced compilation time , The more complex the project , More modules vite The more obvious the advantage of .
stay HMR（ Module hot swap ） aspect , When changing a module , Just ask the browser to request the module again , Unlike webpack Then you need to compile all the dependent modules of the module once , More efficient
When packaging to a production environment ,vite Use traditional rollup package , therefore ,vite The main advantages are in the development stage . in addition , because vite When used ES Module, So you can't use... In your code CommonJS
