前言

  相信大家对 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 也会做出改变并进行优化。所有的工具都并不是完美的，开发者们只需根据不同的情况选择不同的开发工具，使得开发变得更加方便即可。