webpack和vite的区别,为什么vite启动速度比webpack快?

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣

一.webpack和vite的区别

1.构建速度不同

Webpack: Webpack的构建速度相对较慢,尤其在大型项目中,因为它需要分析整个依赖图,进行多次文件扫描和转译。

Vite: Vite以开发模式下的极速构建著称。它利用ES模块的特性,只有在真正需要时才编译文,而不是整个项目。这使得它在开发环境下几乎是即时的。

2.开发模式不同

Webpack: Webpack通常使用热模块替换(HMR)来实现快速开发模式,但配置相对复杂。
Vite: 采用了基于ES Module的开发服务器,只有在需要时才会编译对应的模块,大幅度提升了开发环境的响应速度。

3.配置复杂度不同

Webpack: Webpack的配置相对复杂,特别是在处理不同类型的资源和加载器时。
Vite: Vite在设计上更注重开箱即用,大部分场景下用户无需自己写配置文件,但同时也支持自定义配置,使其适用于复杂项目。

4.插件生态不同

Webpack: Webpack拥有庞大的插件生态系统,适用于各种不同的需求。
Vite: Vite也有相当数量的插件,但相对较小,因为它的开发模式和构建方式减少了对一些传统插件的需求。

5.编译方式不同

Webpack: webpack在编译过程中,会将所有模块打包为一个bundle.js文件,然后再运行这个文件。
Vite: 没有打包的步骤,它利用了浏览器的ES Module Imports特性,只有在真正需要时才编译文件。

6.应用场景不同

Webpack: 适用于复杂的大型项目,特别是需要大量自定义配置和复杂构建管道的项目。
Vite: 更适用于小到中型项目,或者需要快速开发原型和小型应用的场景。

二.为什么vite启动速度比webpack快?

1、开发模式的差异

在开发环境中,Webpack 是先打包再启动开发服务器,而 Vite 则是直接启动,然后再按需编译依赖文件。(大家可以启动项目后检查源码 Sources 那里看到)

这意味着,当使用 Webpack 时,所有的模块都需要在开发前进行打包,这会增加启动时间和构建时间。

而 Vite 则采用了不同的策略,它会在请求模块时再进行实时编译,这种按需动态编译的模式极大地缩短了编译时间,特别是在大型项目中,文件数量众多,Vite 的优势更为明显。

Webpack启动

 Vite启动

2、对ES Modules的支持

现代浏览器本身就支持 ES Modules,会主动发起请求去获取所需文件。Vite充分利用了这一点,将开发环境下的模块文件直接作为浏览器要执行的文件,而不是像 Webpack 那样先打包,再交给浏览器执行。这种方式减少了中间环节,提高了效率。

什么是ES Modules?

通过使用 exportimport 语句,ES Modules 允许在浏览器端导入和导出模块。

当使用 ES Modules 进行开发时,开发者实际上是在构建一个依赖关系图,不同依赖项之间通过导入语句进行关联。

主流浏览器(除IE外)均支持ES Modules,并且可以通过在 script 标签中设置 type="module"来加载模块。默认情况下,模块会延迟加载,执行时机在文档解析之后,触发DOMContentLoaded事件前。

3、底层语言的差异

Webpack 是基于 Node.js 构建的,而 Vite 则是基于 esbuild 进行预构建依赖。esbuild 是采用 Go 语言编写的,Go 语言是纳秒级别的,而 Node.js 是毫秒级别的。因此,Vite 在打包速度上相比Webpack 有 10-100 倍的提升。

什么是预构建依赖?

预构建依赖通常指的是在项目启动或构建之前,对项目中所需的依赖项进行预先的处理或构建。这样做的好处在于,当项目实际运行时,可以直接使用这些已经预构建好的依赖,而无需再进行实时的编译或构建,从而提高了应用程序的运行速度和效率。

4、热更新的处理

在 Webpack 中,当一个模块或其依赖的模块内容改变时,需要重新编译这些模块。

而在 Vite 中,当某个模块内容改变时,只需要让浏览器重新请求该模块即可,这大大减少了热更新的时间。

总结

总的来说,Vite 之所以比 Webpack 快,主要是因为它采用了不同的开发模式充分利用了现代浏览器的 ES Modules 支持使用了更高效的底层语言并优化了热更新的处理。这些特点使得 Vite在大型项目中具有显著的优势,能够快速启动和构建,提高开发效率。

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。