vite和

文章目录

vite介绍 什么是vite

Vite 是新型前端构建工具。

为什么使用vite

一句话总结：使用vite构建项目，启动的速度要比使用构建更快。

vite优缺点

优点

1、快速的开发体验：由于Vite采用了分块打包和ES6模块语法，因此在开发过程中能够实现快速的热更新和实时预览。

2、简单易用：相较于，Vite的配置文件简单明了，易于使用。

3、集成Vue.js：在使用Vue.js开发项目时，Vite能够提供更好的支持。

缺点

1、生产环境配置：Vite目前只提供了基本的生产环境打包功能，对于一些复杂的项目，可能需要自行配置。

2、对其他框架支持不够完善：虽然Vite对Vue.js支持非常好，但对其他框架的支持不够完善。

3、虽说加载速度快 （ vite首屏加载等部分还是加载较慢 ） 如果遇到比较复杂的依赖或者其他的话 可能还是比较慢

聊到vite，很多人都知道他的冷启动和热更新非常快，下文说一下vite热更新原理

热更新的实现原理 创建一个服务端。vite执行r函数，调用ws库创建ws服务端。创建一个ws客户端来接收ws服务端的信息。vite首先会创建一个ws 文件，然后在处理入口文件index.html时，把对ws 文件的引入注入到index.html文件中。当浏览器访问index.html时，就会加载ws 文件并执行，创建一个客户端ws，从而接收ws服务端的信息。服务端监听文件变化，发送消息，通知客户端。服务端调用函数，该函数会根据此次修改文件的类型，通知客户端是要刷新还是重新加载文件。 介绍 什么是

是一个模块打包器。 的主要目标是将 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换()、打包()。

优缺点

侧重于模块的打包

优点

缺点

Vite 为什么比 快

Vite

vite和的区别

构建速度

Vite的构建速度比快得多。Vite使用现代浏览器原生支持的 ES 模块标准，避免了打包和编译的大量时间，而则需要在打包时对所有模块进行解析和编译。

开发模式

Vite支持快速的“即时重载”（ ）功能，当你编辑代码后，浏览器会自动更新页面，更新速度非常快。则需要手动刷新浏览器。

配置

需要通过复杂的配置来管理各种不同的、插件、代码分割和优化设置等等。相比之下，Vite的默认配置非常简单，只需要少量配置即可满足大部分需求。

生态系统和插件支持

由于已经成为主流的前端构建工具，因此有大量的生态系统和社区支持，包括各种、插件、优化工具等等。相比之下，Vite是较新的工具，社区和插件支持还比较有限。

热更新机制不同

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

面试问题 Vite为什么比快？

Vite 相比于 之所以构建快是因为，Vite 借助新版本浏览器可以读懂模块化语法的特点，将项目中的模块化引入统一以一个又一个http请求的方式响应给浏览器，这样做的好处就是省去了 构建过程中递归做依赖收集的耗时步骤，又因为Vite是开发环境的工具，绝大多数情况下我们不用不考虑兼容性，故而相对较快