vite和webpack

vite和webpack

vite介绍

什么是vite

Vite 是新型前端构建工具。

为什么使用vite

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

• 之前浏览器是不支持ES Modules的，为了在让浏览器能够运行我们写的代码（es6语法、.jsx/.vue文件），我们需要使用打包工具，例如webpack，来实现代码的转换和优化的过程；

• vite 主要对应的场景是开发模式，它只启动一台静态页面的服务器，对文件代码不打包，服务器会根据客户端的请求加载不同的模块处理

vite优缺点

优点

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

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

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

缺点

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

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

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

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

热更新的实现原理

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

webpack介绍

什么是webpack

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

webpack 优缺点

webpack 侧重于模块的打包

优点

• 任何资源都可以作为模块处理
• 社区资源丰富，有很多插件和 loader

缺点

• 配置复杂
• 不适合 node 服务端应用
• 构建速度较慢，需要做很多性能优化

Vite 为什么比 Webpack 快

Webpack

• Webpack 叫做 bundler ，将所有文件打包成一个文件。
• Webpack 先识别入口文件，启动服务器后，最后直接给出打包结果。Webpack 做的是分析代码，转换代码，最后形成打包后的代码。

Vite

• Vite 又叫做 no bundler ，顾名思义，就是不用打包，支持 ES moudle 加载。
• Vite 启动服务器后，会按需加载，当请求哪个模块时才会对该模块进行编译。按需加载的方式，极大的缩减了编译时间。

vite和webpack的区别

1. 构建速度

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

2. 开发模式

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

3. 配置

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

4. 生态系统和插件支持

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

5. 热更新机制不同

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

面试问题

Vite为什么比webpack快？

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