Vite和Vue CLI的优劣

Vue生态系统中有一个名为Vite的新构建工具，它的开发服务器比Vue CLI快10-100倍。

Vue CLI概述

大多数Vue开发人员都知道，Vue CLI是使用标准构建工具和最佳实践配置快速建立基于Vue的项目的不可或缺的工具。

其主要功能包括：

• 工程脚手架

• 带热模块重载的开发服务器

• 插件系统

• 用户界面

在本讨论中需要注意的是，Vue CLI是构建在Webpack之上的，因此开发服务器和构建功能和性能都将是Webpack的超集。

Vite概述

与Vue CLI类似，Vite也是一个提供基本项目脚手架和开发服务器的构建工具。

然而，Vite并不是基于Webpack的，它有自己的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了好几个数量级。Vite采用Rollup进行构建，速度也更快。

Vite目前还处于测试阶段，看来Vite项目的目的并不是像Vue CLI那样的一体化工具，而是专注于提供一个快速的开发服务器和基本的构建工具。

Vite怎么这么快？

Vite开发服务器至少会比Webpack快10倍左右。对于一个基本的项目来说，与2.5秒相比，开发构建/重新构建的时间相差250ms。

在一个较大的项目中，这种差异会变得更加明显。Webpack开发服务器在构建/重新构建时可能会慢到25-30秒，有时甚至更慢。与此同时，Vite开发服务器可能会以恒定的250ms的速度为同一个项目提供服务。

这显然是开发经验和游戏规则改变的差异，Vite是如何做到这一点的？

Webpack开发服务