vue中vite是什么? vite原理是什么~ 与webpack区别有哪些呢~

        Vite是一种针对Vue应用程序开发的现代化构建工具，通过利用浏览器对ESM的支持，实现了快速的冷启动、快速的热重载和按需加载的开发体验。它提供了更高效、轻量级的开发环境，加快了开发速度，并提供了更好的开发体验。

vite优点

• 极速的服务启动
• 轻量快速的热重载
• 丰富的功能
• 通用的插件

极速的服务启动

为什么是极速的服务启动，其实你可以理解为只是启动了一个本地服务器，你可以想象一下自己启动一个 node 服务器是有多么的快？node index.js 之后回车是不是就已经开启了一个服务器？ 其实 Vite 也是这样的，它只是启动了一个 node 服务器而已，只不过在第一次启动之前会有一个预编译的过程，可能会出现几秒的启动速度（取决于你的项目需要预编译的包多少）。

所以 Vite 在启动服务器的时候是非常极速的。

轻量快速的热重载

Vite 实现了一套基于 ESM 模块的 HMR ，通过 websocket 来实现。

它会将你的所有文件添加一个 watcher ，来监听你的文件变动，实现热重载。

快速的热重载如何体现？类似 Webpack 进行热更新时，会将你的所有文件重新打包一次，来实现热更新，而 vite 是只重载你更改的那个文件，通过 HTTP 来重新发送请求即可实现，所以是快速的。不需要将你的其他代码进行打包。

丰富的功能

丰富的功能体现于 Vite 自己的配置文件 API ，你可以做很多事情，例如文件别名、接口代理、插件机制、端口、服务器协议、打包配置等等等，都可以根据你生成的配置进行改写。

通用的插件

Vite 在实现之前就已经考虑到，一定不会如 Webpack 的插件以及社区成熟，那样将好几年都不会被应用到生产中，尤大很聪明，通过目前仅次于 Webpack 的打包器 Rollup 的插件来实现自己的插件机制。

也就是说，你可以使用 Rollup 插件来进行配置 Vite，当然你写的 Vite 插件，按照规范也可以在 Rollup 上使用。实现了通用的插件逻辑，这样在生态上，也不会输于 Webpack。

vite和webpack的区别

1.开发模式不同

Webpack在开发模式下依然会对所有模块进行打包操作，虽然提供了热更新，但大型项目中依然可能会出现启动和编译缓慢的问题；而Vite则采用了基于ES Module的开发服务器，只有在需要时才会编译对应的模块，大幅度提升了开发环境的响应速度。

2.打包效率不同

Webpack在打包时，会把所有的模块打包成一个bundle，这会导致初次加载速度较慢；而Vite则利用了浏览器对ES Module的原生支持，只打包和缓存实际改动的模块，从而极大提高了打包效率。

3.插件生态不同

Webpack的插件生态非常丰富，有大量社区和官方插件可以选择，覆盖了前端开发的各个方面；而Vite的插件生态尽管在不断发展，但相比Webpack来说还显得较为稀少。

4.配置复杂度不同

Webpack的配置相对复杂，对新手不够友好；而Vite在设计上更注重开箱即用，大部分场景下用户无需自己写配置文件。

5.热更新机制不同

Webpack的热更新需要整个模块链重新打包和替换，对于大型项目可能会有延迟；Vite的热更新则只会针对改动的模块进行更新，提高了更新速度。

附上vite官网为什么选 Vite | Vite 官方中文文档