current position:Home>Vue3 uses vite instead of webpack

Vue3 uses vite instead of webpack

2022-04-29 16:30:21Cat & amp; rose

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


copyright notice
author[Cat & amp; rose],Please bring the original link to reprint, thank you.

Random recommended