vite和webpack的区别

区别"/>

vite和webpack的区别

项目的构建是我们前端逃不开的话题。
自从我们进入了前端框架时代，构建是我们逃不开的问题，因为前端应用越来越复杂。
最近公司在从webpack过渡到vite.以下是我对他们的认识：

what:

• webpack是一个JavaScript应用程序的静态模块打包工具，它会对整个应用程序进行依赖关系图构建。
• vite是构建工具的高阶封装，使用简单，快（开发的时候感觉没有编译过程），便于扩展。而他集成的esbuild(Go 编写) 预构建依赖，比node快 10-100 倍。

和webpack的区别：

1. 关注层级不同

vite关注的层级更高：vite是 high level api，关注的是如何快速方便的搭建项目，相比webpack，减少了很多配置量。

webpack关注的层级更低：webpack是low level api，因为webpack更关注的是各种功能的实现，重点放在构建上。

2. vite自己不包含编译能力。

它本身并不参与编译，它的编译能力只是集成了rollup和ESbuild的功能.

3. 启动项目vite更快，可以说是超级快。

对比webpack在dev-serve的时候，会提交所有编译的文件，而vite在dev-serve的时候利用了浏览器的native ES module功能，在浏览器请求对应的url时才提供文件，实现了根据路由的懒加载，所以启动的时候是超快的。

4. vite的热更新更快。

对比webpack的热更新，热更新时，把改动过模块的相关依赖模块全部编译一次。而vite热更新时，仅让浏览器重新请求改动过的模块。

现在公司项目从webpack过渡到vite,还在不断摸索爬坑中，虽然目前vite的生态不如webpack丰富，且实用的开发者也不及webpack。
但是不可否认的是，相比于webpack, vite非常适合项目的开发，webpack适合工具的开发。

• vite为构建项目而生
• webpack为构建工具而生