一文读懂Vite和Webpack的区别？

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、webpack是什么？

webpack是一个基于打包器的构建工具，同一个入口文件的代码会打包成一个Bundle文件
webpack长期以来的一个痛点就是对于大规模应用的应用启动和热更新的速度很慢

当文件发生变动时，整个js Bundle文件会被webpack重新构建，这也就是为什么使用webpack的大规模应用启动时和热更新时速度慢的原因，造成了用户很差的体验

二、webpack如何工作？

webpack的打包过程：

• 从一个入口文件开始，基于代码中的所有的import，export，require构建依赖树
• 编译JS/CSS等相关模块
• 使用算法排序、重写、连接代码
• 优化

开发环境的webpack：

• 打包所有的代码
• 启动webpack-dev-server托管打包好的代码
• 启动wbesocket处理热更新HMR

注意：应用规模越大，启动和热更新的代码越慢，即使启动了热更新，每次当代码更新时也需要生产Bundle文件

三、Vite是什么？

vite是旨在提升开发者体验的下一大JavaScript构建工具，核心借助了浏览器的原生ES Modules和esbuild，这样的将代码编译成native code的打包工具

Vite主要由两方面组成：

1. 一个开发服务器，基于ESM提供丰富的内建能力，比如速度快到惊人的模块热更新HMR
2. 一套构建指令，使用rollup进行代码的打包，且零配置即可输出用于生产环境的高度优化的静态代码

---

Vite和Webpack的区别？

• webpack服务器启动速度比vite慢，由于vite启动的时候不需要打包，也就无需分析模块依赖、编译，所以启动速度非常快。当浏览器请求需要的模块时，再对模块进行编译，这种按需动态编译的模式，极大缩短了编译时间，当项目越大，文件越多时，vite的开发时优势越明显
• vite热更新比webpack快
• vite在·HRM·方面，当某个模块内容改变时，让浏览器去重新请求该模块即可，而不是像webpack重新将该模块的所有依赖重新编译,
• vite使用esbuild(Go 编) 预构建依赖，而webpack基于nodejs,比node快 10-100 倍