Vue生态系统中有一个新的构建工具Vite，其开发服务器比VueCLI快10-100倍。这是否意味着VueCLI已死？在本文中，我将比较这两种构建工具并解释它们的优缺点，以便您可以决定哪一种适合您的下一个项目。VueCLI概述正如大多数Vue开发人员所知，VueCLI是使用标准构建工具和最佳实践配置快速设置基于Vue的项目的不可或缺的工具。它的主要特性包括：工程脚手架具有热模块重载的开发服务器插件系统用户界面在本次讨论中需要注意的是，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毫秒的恒定速率为同一个项目服务。这分明就是开发体验的差异化和game-changer，Vite是怎么做到的呢？Webpack开发服务器架构Webpack的工作方式是将整个应用程序构建成一个基于JavaScript的捆绑器，并在运行时转换文件（例如Sass、TypeScript、SFC）。这都是在服务器端完成的，依赖项的数量与更改后构建/重建的时间之间大致呈线性关系。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的开发。时间会告诉Snowpack：https://www.snowpack.dev/原文：https://vuejsdevelopers.com/2020/12/07/vite-vue-cli/作者：AnthonyGore本文转载自微信公众号“前端全栈开发者”可以通过以下二维码关注。转载本文请联系前端全栈开发公众号。
