前言

  相信大家对 Vite 以及 Webpack 都应该有所了解。众所周知,Vite 是新一代的前端构建工具,Webpack 是一个 JavaScript 应用程序的静态模块打包工具。但是两者有着很大的区别,比如 Vite 比 Webpack 快。如下图所示:

  • 图一

一杯咖啡的时间,告诉你 Vite 凭什么比 Webpack 快

  • 图二

一杯咖啡的时间,告诉你 Vite 凭什么比 Webpack 快

  图一是使用 create-react-app 所创建的文件,图二是使用 pnpm create vite 所创建的文件,从这里可以很明显的看出,要快到5到6倍的时间。不仅如此,在启动服务器时,Vite 比 Webpack 要快到6倍时间。


Vite 为什么比 Webpack 快

两者的打包过程以及原理

Webpack

  • Webpack 叫做 bundler ,将所有文件打包成一个文件。
  • Webpack 先识别入口文件,启动服务器后,最后直接给出打包结果。Webpack 做的是分析代码,转换代码,最后形成打包后的代码。

Vite

  • Vite 又叫做 no bundler ,顾名思义,就是不用打包,支持 ES moudle 加载。
  • Vite 启动服务器后,会按需加载,当请求哪个模块时才会对该模块进行编译。按需加载的方式,极大的缩减了编译时间。

 这样的打包过程使得 Webpack 在启动服务器的过程中比 Vite 慢很多。


实现方式

  Webpack 是基于 Node.js 实现的,而 Vite 是使用 Esbuild 预构建依赖,Esbuild 使用 Go 语言编写,比以 Node.js 编写的打包器预构建依赖快 10-100 倍。


总结

  从目前的情况看,Vite 是目前最快捷的工具,但是在如此竞争下相信 Webpack 也会做出改变并进行优化。所有的工具都并不是完美的,开发者们只需根据不同的情况选择不同的开发工具,使得开发变得更加方便即可。