vite为何如此优秀，vite的原理与流程，vite与webpack对比

1. vite的原理

vite是一个新的构建工具，功能与webpack一致

它主要是利用了现代浏览器对ESModule语法的支持，开发环境的时候，不会对代码去做打包编译的处理，而是直接启动一个本地的devServer

从而省去了打包编译的时间，这样开发环境的启动速度就会非常快

理论上来说，vite项目启动速度与代码体积大小无关，项目无论大小，启动速度应该是一样的快

1.1 vite的流程

• 第一步：启动一个devServer
• 第二步：打开页面A，那么请求页面A的相关代码，并编译对应的模块
• 第三步：打开页面B，那么请求页面B的相关代码，并编译对应的模块
• 不断循环，打开哪个页面，就去请求哪个页面的代码，并编译对应的模块

1.2 vite的打包

打包的时候，vite还是利用的三方库rollup来打包，其实用webpack打最后的生产包也行

1.3 vite的存在问题

由于vite是利用了现在浏览器对ESModule的支持，所有浏览器版本不能太低，但是由于是开发环境，是写代码的人用，所以无所谓

另外，开发环境中不支持CommonJS语法

2. webpack的原理与流程

2.1 与webpack的原理

webpack的原理是，先把本地代码全部编译打包完成后，再启动一个devServer，来供页面调用

2.2 与webpack的流程

• 第一步：编译所有的文件代码
• 第二步：启动一个devserver
• 第三步：打开页面，返回相关代码（不会存在请求与编译了）
  
  

2.3 webpack存在问题

随着项目的不断增大，启动速度会非常慢，通常启动一个项目都会要好久，开发体验非常的不好

总结

• 1. 当执行启动命令的时候
  • 1.1 vite直接启动一个开发服务器，不存在编译打包过程，所以启动速度非常快！跟项目大小无关
  • 1.2 webpack是先把所有的文件打包编译完成之后，再启动一个开发服务器，随着项目越来越大，启动速度越来越慢
• 2. 当访问一个页面的时候
  • 2.1 vite 会像对应的页面模块做一个请求（利用现代浏览器对ESModule的支持的原理），内部再编译打包，返回给页面
    -2.2 webpack 直接返回编译打包后的结果（因为之前全部编译打包好了）
• 3. 生产打包的时候
  • 3.1 vite在生产打包内部是使用的是 rollup,当然其实也可以使用webpack,生产打包其实跟 webpack一样的流程
• 4. vite的缺点
  • 4.1 开发环境中无法使用 CommonJS 语法，（因为Vite就是利用的现代浏览器对ESMoudle的支持）
  • 4.2 开发环境中低版本浏览器不支持（浏览器需要支持ESmodule）,仅开发人员用，无所谓
  • 4.2 每次访问一个页面，都会有很多的网络请求，仅开发人员用，无所谓![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ffff485e561a4a25b7a8754fcd356e24.png#pic_center