Webpack vs Vite

2024年10月4日 · 阅读需 6 分钟

前端糕手

比较Webpack,Vite的差异比较Webpack,Vite的差异

前言

在比较两者的差异，首先得简单介绍两者的基本信息。

Webpack作为打包工具里流行时间最长的工具，其功能和生态可以称之为目前最完善的。
Webpack通过loader和plugin的机制，可以对各种资源进行转换和处理，比如将ES6代码转换为ES5代码，压缩JS代码，压缩CSS代码，压缩图片，加载图片，加载字体等。
Webpack的配置相对复杂，需要编写大量的配置项，并且需要对其中的每一项都有深刻的理解。但它能够高度精细化的控制打包过程，可以满足各种复杂的需求。
Webpack的最主要的任务就是打包，无论是开发环境还是生产环境，Webpack的首要任务都是根据我们的配置将代码打包成我们所需的样子。
Webpack的打包工作都是交给Node.js完成的，不过也因此受限于JS语言的性能。

Vite作为下一代前端开发工具，其诞生于2021年，由Vue官方团队推出。
Vite高度依赖于ESModule，它直接输出ES模块，交给浏览器自身去处理，因此可以获得更快的启动速度。
Vite不同模式下执行的任务也不同，开发模式下，Vite会启动一个开发服务器，监听文件变化，并实时编译代码，输出到浏览器。而生产模式下，它会使用RollUp去打包代码。
Vite的配置相对简单，只需要指定入口文件和输出路径即可，不需要编写复杂的配置项。
Vite在开发模式下，依赖ESM的特性实现按需加载，使用ESBuild去转换所加载的模块，将其转换为浏览器可以直接运行的模块。以此实现更快的启动速度。

Webpack的打包速度慢，主要是因为Webpack需要依赖Node.js去执行打包任务，而Node.js的性能瓶颈主要在于JS语言的执行效率。
而Vite的打包速度快，主要是因为Vite使用ESM的特性，直接输出ES模块，在开发环境下使用GoLang编写的ESBuild转换模块成浏览器可以直接运行的模块，以此实现更快的启动速度。而生产环境下使用对ESM支持更好的RollUp去打包代码，以此实现更快的打包速度。

Webpack的开发模式需要手动配置开发服务器，且开发环境下，也是通过Webpack进行静态解析构建完整个项目再运行。
Vite的开发模式不需要手动配置开发服务器，通过ESM特性实现按需加载，开发环境下，Vite会启动一个开发服务器，监听文件变化拦截模块加载，并通过ESBuild转换模块实时编译代码，输出到浏览器。

Webpack的配置相对复杂，需要编写大量的配置项，并且需要对其中的每一项都有深刻的理解。但它能够高度精细化的控制打包过程，可以满足各种复杂的需求。

而Vite的配置相对简单，只需要指定入口文件和输出路径即可，不需要编写复杂的配置项。

Webpack的生态相对完善，有丰富的loader和plugin，并且社区活跃，有大量的第三方插件可以帮助我们解决各种问题。

而Vite的生态相对较小，目前只有官方插件，生态相对较小。

两者各有优缺点，Webpack更适合大型项目，需要高度自定义的场景；而Vite更适合快速开发，适合于中小型项目，快速启动，快速迭代。