vue3用vite而不是webpack

首先了解vue中webpack原理

1、给一个入口文件，通过路口文件找依赖，然后就找到很多模块出来，模块中有js,css和图片总之包含了一大堆文件
2、然后webpack打包，通过loader,plugin等等进行打包；
3、打包完过后就变成非常少量的打包之后的文件，可能是一个也可能是多个，但肯定不是原始的模块文件；
4、打包完后，在开发阶段还要启动一个开发服务器，然后配置服务器，然后启动开发服务器，
5、最终通过访问开发服务器，他就会把打包后的结果给我们

这些过程在vue的开发过程运行项目时的打包其实是在内存中完成的，所以经过这一系列的方式会
使得在开发阶段每次修改代码都会运行打包，如果依赖太多运行就会很慢

vue3中使用vite的原理

 

 

 

1、vite在开发阶段没有打包过程，他是直接启动一个服务器，启动后就啥事也没有做
2、请求一个模块到开发服务器；
3、开发服务器编译模块，根据页面用所需要的依赖去加载文件
4、加载完成后，开发服务器把编译的结果返回给页面
这使得提高了我们在开发阶段运行的效率

 

总结：

在vue运行项目时，其内部会执行webpack打包命令，打包完后把项目放入开发服务器中然后启动开发服务器，请求服务器时直接给予打包结果。

而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。由于现代浏览器本身就支持ES Moudule，会自动向依赖的Module发出请求。

vite成分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。

由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖，不需要编译，因此启动速度非常块

当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂，模块越多vite的优势越明显。

在HMR（模块热替换）方面，当改动一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高

当需要打包到生产环境时，vite使用传统的rollup进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的时ES Module，因此在代码中不可以使用CommonJS