vite与webpack有什么不同？为什么vite比webpack快？_vite和webpack的优缺点-优快云博客

1. 定位

webpack、rollup、esbuild 都是打包工具，对代码进行压缩、合并、转换、分割、打包等操作，都需要打包工具去完成

vue-cli、umi 是基于 webpack 的上层封装，通过简单配置能快速搭建起一个项目（用 webpack 去搭建项目需要配置很多东西

vite 开发环境依赖 esbuild 进行预构建，生产环境依赖 rollup 进行打包，并且充分利用浏览器特性，比如 http2、ES module，是站在众多巨人肩膀上的一个产物

2. 运行原理

webpack 启动项目时，它会根据配置文件 webpack.config.js 中的入口文件 entry，分析项目的依赖关系，然后打包成一个文件 bundle.js，交给浏览器去加载渲染

问题：项目越大，需要打包的东西就越多，启动的时间也就越长

vite 运行项目时，会用 esbuild 进行预构建，将所有模块转换成 es module，不需要对整个项目进行编译打包，而是在浏览器需要加载某个模块时，拦截请求，根据请求进行按需编译，然后再返回给浏览器

绝大多数浏览器已经支持 ES Modules，在 script 标签中添加 type=“module”，就可以使用了

这样一来，首次启动项目（冷启动）时就把 webpack 快很多，并且项目大小对 vite 启动速度的影响很小

Q：什么是 ES Modules？

ES Modules 是个模块化方案，在浏览器端和 node.js 环境中组织和管理代码，有以下特点：

（1）允许将代码分割成多个模块，每个模块可以独立定义自己的作用域和功能，通过使用 import 和 export 语句，来实现模块之间的依赖关系和数据交互

（2）采用静态加载机制，模块的依赖关系在编译时就已经确定了，模块的加载是同步的

3. 构建方式

webpack 是基于 node.js 运行的，但 js 只能单线程运行，无法利用多核 CPU 的优势

vite 预构建和按需编译过程，都是使用 esbuild 完成的

esbuild 是用 go 语言编写的，可以充分利用多核 CPU 的优势

Q：什么是预构建依赖？

在项目启动或构建之前，对项目所需的依赖进行预先的处理或构建

好处：在实际运行时，直接使用已经构建好的依赖，提高运行速度

4. http2

http1 的时候，浏览器对同一个域名的请求有并发限制，一般为 6 个，超过 6 个就会造成阻塞，所以要减少打包数量，减少并发请求，来提高速度

http2 就可以并发发送多个请求，没有并发限制，将打包产物分为多个小模块，并行去加载，反而更快

vite 充分利用 http2 可以并发请求的优势，对项目进行合理拆分，访问时同时加载多个模块，来提高速度

5. 热更新 HMR

热更新 HMR：在程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面

每次修改文件，webpack 都会对整个项目进行重新打包，对大项目来说很不友好。即使有缓存机制，也不能根本解决问题

vite 项目中，监听到文件变更后，会用 websocket 通知浏览器，重新发送新的请求，只对该模块进行重新编译，然后进行替换

并且基于 es module 的特性，vite 利用浏览器的缓存机制，针对源码模块进行协商缓存，针对依赖模块进行强缓存，这样访问速度更快了

6. 生产环境

vite 生产环境下用 rollup 打包，它是一款 ES module 打包器，与 webpack 相比，rollup 要小巧得多，打包生成的文件更小

esbuild 打包速度要比 rollup 快，但 vite 目前的插件 API 与使用 esbuild 作为打包器并不兼容，用 rollup 打包更加稳定，所以使用 vite 可能存在开发环境和生产环境打包结果不一致的问题

7. 优缺点

webpack：

优点：可以更灵活地配置优化项目；拥有庞大的插件生态，适用于复杂项目

缺点：构建速度较慢；配置复杂

vite：

优点：极快的开发构建速度；零配置启动；原生 ES 模块启动，适合小型项目和快速原型开发

缺点：插件生态较小；不适合复杂项目