轻量迅捷时代，Vite 与Webpack 谁赢谁输

你知道维特和吗？可能很多“程序员”都非常熟悉。

它是一个应用程序的静态模块打包工具，它为整个应用程序构建依赖关系图。这也导致了一个不可避免的情况，即使用启动应用程序的服务器需要很长时间——一些大型应用程序可能需要 10 分钟以上。

这时候，你可能已经很抓狂了，为什么这么费时间？那么让我们来看看整个基于包的工作流程。

基于包的工作流程

当我们保存文件时，整个包将被重建，即使启用了 HMR，我们的修改也可能需要长达 10 秒才能在浏览器中呈现。在更复杂的环境中，反馈如此缓慢，会给开发者带来极大的不便。

之后，让我们向您介绍 Vite。

维特

Vite 是新一代的构建工具，旨在改善开发者在构建应用程序时的体验。

Vite 基于生态系统最近的两项改进为开发人员提供了更强大的支持——浏览器中 ES 模块的可用性，以及编译这些原生捆绑工具的能力。

Vite的核心理念是无捆绑开发建设。

浏览器中 ES 模块的可用性允许您在浏览器上运行应用程序，而无需将它们捆绑在一起。

Vite 的核心思想很简单：当浏览器请求时，使用 ES 模块转换并提供一段应用程序代码。

Vite 开始开发后，首先会将模块分为两类：依赖模块和应用模块。

依赖模块是从文件夹中导入的模块。这些模块将使用 Go 编写的 进行处理和绑定，执行速度比 .

应用程序模块是为应用程序编写的模块，通常涉及特定于库的扩展，例如：jsx/vue 或 scss 文件。

虽然基于捆绑器的工作流（如 ）必须在单个浏览器请求之前处理整个模块，但 Vite 仅在单个浏览器请求之前处理依赖模块。

必要时，Vite 会转换我们的整个应用程序模块。

为了方便大家理解，下面介绍基于Vite的完整工作流程。

基于 Vite 的工作流程

这张图可以很清楚的让大家明白为什么 Vite 可以比 .

如果我们用通俗的方式来比较这两者，就好像我们去餐厅吃饭，后厨一口气把所有的饭菜都做好了，然后给你一个一个上菜；而Vite的厨师机智，快速完成一道菜只是一道菜。

使用 Vite，处理开发构建的时间随着应用程序的增长而缓慢增加。

Vite 的捆绑构建

虽然现在所有主流浏览器都支持原生 ES 模块，但发布包含树形、延迟加载和通用块拆分等性能优化技术的捆绑应用仍然会给开发人员带来比不捆绑应用更好的用户体验，并且整体性能更高。

出于这个原因，Vite 有一个内置的构建配置命令，它使用捆绑的应用程序；我们可以根据我们的具体需求自由配置它们。

Vite 入门

使用 Vite 构建应用程序很容易。vite build 创建一个预配置的应用程序，支持 React、Vue 等主流前端框架。

创建应用程序所需的命令：

$ npm init @vitejs/app

或者

终端中的提示将指导您创建正确的应用程序，然后运行 ​​npm

启动开发服务器

npm run dev

除此之外，还可以创建 Vite+React 应用程序。React 的起始页与 React App 的默认模板非常相似，只是做了一些修改：

此外，Vite 用于本地预览应用，支持多种官方模板，包括 .

综上所述

从目前的使用情况来看，Vite无疑是新一代建工工具中速度最快的，但面对竞争，部分内容也进行了优化。作为一款经典的老工具，其用户群本身就非常庞大，其实力依旧不容小觑。看，它仍然是许多流行应用程序（如 Next）的默认构建工具。

但随着时间的推移，Vite 周边的生态力逐渐追赶上来，再加上自身的快速优势，后面追赶上去也很明显。

作为开发者，我当然不会硬说一定要用哪一个，根据不同的场景选择不同的工具。预计这些工具在未来可以进一步助力开发，让开发更加便捷。

延伸阅读

如果你对 Vue 感兴趣，不妨跟着实战教程，搭建一个基于 Vue3 的表格编辑系统。

原文链接：