Vue生态系统中有一个新的构建工具Vite，其开发服务器比VueCLI快10-100倍。这是否意味着VueCLI已死？在本文中，我将比较这两种构建工具并解释它们的优缺点，以便您可以决定哪一种适合您的下一个项目。VueCLI概述正如大多数Vue开发人员所知，VueCLI是使用标准构建工具和最佳实践配置快速设置基于Vue的项目的不可或缺的工具。它的主要特性包括：工程脚手架开发服务器插件系统UI模块热重载在此讨论中需要注意的是，VueCLI构建在Webpack之上，因此开发服务器和构建功能和性能都将是Webpack的超集.Vite概述与VueCLI类似，Vite也是一个提供基本项目脚手架和开发服务器的构建工具。然而，Vite并不基于Webpack，它有自己的开发服务器，利用浏览器中的原生ES模块。这种架构使得Vite比Webpack的开发服务器快了几个数量级。Vite使用Rollup构建，速度也更快。Vite仍处于测试阶段。看来Vite项目的目的并不是像VueCLI那样做一个一体化的工具，而是专注于提供一个快速的开发服务器和基础的构建工具。为什么Vite这么快？Vite开发服务器将至少比Webpack快10倍。对于基本项目，开发构建/重建时间为250毫秒，而之前为2.5秒。在更大的项目中，这种差异会变得更加明显。webpack开发服务器在构建/重建时可能会慢到25-30秒，有时甚至更慢。同时，Vite开发服务器可能以250毫秒的恒定速率为同一个项目服务。这分明就是开发体验和游戏规则的不同，Vite是怎么做到的呢？WebpackDevServerArchitectureWebpack的工作方式是通过在运行时解析应用程序中的每个import和require并转译文件（例如Sass、TypeScript、SFC），将整个应用程序构建成一个基于JavaScript的包。这都是在服务器端完成的，依赖项的数量与更改后构建/重建的时间之间大致呈线性关系。Vite开发服务器架构Vite不捆绑应用服务器。相反，它依赖于浏览器对JavaScript模块（又名ES模块，这是一个相对较新的功能）的原生支持。浏览器会在需要时通过HTTP请求任何JS模块，并在运行时处理它们。Vite开发服务器将按需转换任何文件（例如Sass、TypeScript、SFC）。这种架构避免了整个应用程序的服务器端捆绑，并利用浏览器的高效模块处理，提供了一个显着更快的开发服务器。提示：当您对应用程序进行代码拆分和树摇动时，Vite速度更快，因为它只加载它需要的模块，即使在开发期间也是如此。这与Webpack不同，在Webpack中，代码拆分只对生产包有利。Vite的缺点您可能已经知道，Vite的主要特点是其开发服务器速度快得离谱。如果没有此功能，可能不会进行讨论，因为与VueCLI相比，它确实没有太多其他功能，而且它确实有一些缺点。由于Vite使用JavaScript模块，因此最好让依赖项也使用JavaScript模块。虽然大多数现代JS包都提供此功能，但一些较旧的包可能只提供CommonJS模块。Vite可以将CommonJS转换为JavaScript模块，但在某些边缘情况下可能无法这样做。当然，还需要支持JavaScript模块的浏览器。与Webpack/VueCLI不同，Vite无法创建针对旧版浏览器、Web组件等的捆绑包。此外，与VueCLI不同，开发服务器和构建工具是独立的系统，导致生产与开发中的行为可能不一致。VueCLIvsVite总结VueCLI优点VueCLI缺点久经考验且可靠开发服务器速度与依赖项数量成反比与Vue2兼容可以捆绑任何类型的依赖项可以为不同目标构建插件生态系统Vite优点Vite缺点开发服务器比Webpack快10-100倍可以只针对现代浏览器（ES2015+）代码拆分是一个优先事项与CommonJS模块不完全兼容在测试版中，仅支持Vue3最小脚手架不包括Vuex、路由器等开发服务器与构建工具那么结论是什么？对于有经验的Vue开发，Vite是一个很好的选择，因为它的开发服务器快得离谱，让Webpack看起来像史前时代。然而，对于喜欢动手的新Vue开发人员，或者对于使用遗留模块并需要复杂构建的大型项目，VueCLI可能目前仍然是必不可少的。Vite的未来虽然上面的比较集中在Vite和VueCLI的当前状态，但仍有一些事情需要考虑：只有当浏览器中的JavaScript模块支持得到改善时，Vite才会改进。随着JS生态系统的发展，更多的包将支持JavaScript模块，减少Vite无法处理的边缘情况。Vite仍处于测试阶段-功能可能会发生变化。VueCLI最终可能会与Vite集成，因此您不必使用其中之一。值得注意的是，Vite并不是唯一在浏览器中利用JavaScript模块的开发服务器项目。还有更有名的Snowpack，它甚至可能会排挤Vite的发展。时间会证明一切。参考Vite和VitePress，EvanYou，VueConfToronto2020Vite-GitHubVueCLI-GitHub原文：https://vuejsdevelopers.com/2...作者：AnthonyGore
