如果能重来，你要选 Vite 还是 Webpack ？ _Vite

文章插图

Webpack 的第一次发布是在 2013 年发布，长久以来是主流的前端打包工具。Vite 的第一次发布是在 2021 年，是近两年来前端打包工具中的后起之秀，重点解决 Webpack 在开发阶段的开发痛点。截止 2022.6 ， Webpack 的 Github Star 数 61.2k ， Vite 的 Github Star 数是 42.7k 。虽然 Vite 刚刚发布 2 年，但是热度可见一斑。
下面我们来对 Webpack 和 Vite 的不同点进行比较，并且解释 Vite 之于 Webpack 性能优势来源于哪里？
一、WebpackWebpack 是一个基于打包器的构建工具，同一个入口文件的代码会打包成一个 Bundle 文件。Webpack 长期来的一个痛点是对于大规模应用的应用启动和热更新速度很慢。

文章插图

当文件发生变动时，整个 JAVAScript Bundle 文件会被 Webpack 重新构建，这也是为什么使用 Webpack 的大规模应用在应用启动和热更新时速度很慢的原因。这给进行大规模 JavaScript 应用的开发者造成了很差的开发体验。
Webpack 如何工作？
Webpack 打包过程：

从一个入口文件开始，基于代码文件中的所有 import ， export ， require 构建依赖树；
编译 JS/css 等模块；
使用算法排序、重写、连接代码；
优化。

开发环境的 Webpack：

打包所有代码；
启动 webpack-dev-server 托管打包好的代码；
启动 websocket 处理热更新 HMR 。

应用规模越大，启动和热更新代码越慢。及时启动了热更新，每次代码变更也需要重新生产 Bundle 文件。
二、ViteVite 是旨在提升开发者体验的下一代 JavaScript 构建工具，核心借助了浏览器的原生 ES Modules 和像 esbuild 这样的将代码编译成 native code 的打包工具。
Vite 主要有两方面组成：

一个开发服务器，基于 ESM 提供丰富的内建能力，比如速度快到惊人的模块热更新（HMR）；
一套构建指令，使用 rollup 进行代码打包，且零配置即可输出用于生产环境的高度优化的静态代码。

Vite 的核心能力和 webpack + webpack-dev-server 相似，但是在开发者体验上有一些提升：

无论项目大小有多大，启动应用都只需更少的时间；
无论项目大小有多大， HMR（Hot Module Replacing）热更新都可以做到及时响应；
按需编译；
零配置，开箱即用；
Esbuild 能力带来的 Typescript/jsx 的原生支持。

大型的 JavaScript 项目在开发和生产环境有比较差的性能表现，往往是因为我们使用的构建工具没有充分做到并行处理、内存优化和缓存。
2.1 核心理念：Bundless 开发环境构建
【如果能重来，你要选 Vite 还是 Webpack ？】浏览器的原生 ES Modules 能力允许在不将代码打包到一起的情况下运行 JavaScript 应用。Vite 的核心理念很简单，就是借助浏览器原生 ES Modules 能力，当浏览器发出请求时，为浏览器按需提供 ES Module 文件，浏览器获取 ES Module 文件会直接执行。
2.2 应用启动
Vite 将应用中的模块分为依赖和源码两类，分别进行服务器启动时间的优化。

依赖模块，开发过程中基本不会变化。Vite 对依赖采用了 esbuild 预构建的方式， esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍；
源码模块，是用户自己开发的代码，会经常变动。

Vite 在浏览器请求时按需转换并以原生 ESM 方式提供源码，让浏览器接管了打包程序的部分工作。
2.3 Vite 如何工作？
Vite 通过原生 ES Modules 托管源代码，本质上是让浏览器来接管部分打包器的工作。Vite 只会在浏览器请求发生时，按需将源码转成 ES Modules 格式返回给浏览器，由浏览器加载并执行 ES Modules 文件。