今天这篇我们来学习和了解“Vite和Vue CLI对比用，哪种方法合适”，下文的讲解详细，步骤过程清晰，对大家进一步学习和理解“Vite和Vue CLI对比用，哪种方法合适”有一定的帮助。有这方面学习需要的朋友就继续往下看吧！

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

这是否意味着 Vue CLI 已经过时了?在本文中，我将比较这两种构建工具，并说明它们的优缺点，以便你可以决定哪一种适合你的下一个项目。

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 开发服务器架构

Webpack 的工作方式是，它通过解析应用程序中的每一个 import 和 require ，将整个应用程序构建成一个基于 JavaScript 的捆绑包，并在运行时转换文件（例如 Sass、TypeScript、SFC）。

这都是在服务器端完成的，依赖的数量和改变后构建/重新构建的时间之间有一个大致的线性关系。

Vite 开发服务器架构

Vite 不捆绑应用服务器端。相反，它依赖于浏览器对 JavaScript 模块的原生支持（也就是 ES 模块，是一个比较新的功能）。

浏览器将在需要时通过 HTTP 请求任何 JS 模块，并在运行时进行处理。Vite 开发服务器将按需转换任何文件（如 Sass、TypeScript、SFC）。

这种架构避免了服务器端对整个应用的捆绑，并利用浏览器高效的模块处理，提供了一个明显更快的开发服务器。

提示：当你对应用程序进行 code-split 和 tree-shake 动时，Vite 的速度会更快，因为它只加载它需要的模块，即使是在开发阶段。这与 Webpack 不同，在 Webpack 中，代码拆分只对生产包有利。

Vite 的缺点

你可能已经明白了，Vite 的主要特点是它的开发服务器快得离谱。

如果没有这个功能，可能就不会再讨论了，因为与 Vue CLI 相比，它确实没有其他的功能，而且确实有一些缺点。

由于 Vite 使用了 JavaScript 模块，所以最好让依赖关系也使用 JavaScript 模块。虽然大多数现代 JS 包都提供了这一点，但一些老的包可能只提供 CommonJS 模块。

Vite 可以将 CommonJS 转换为 JavaSript 模块，但在一些边缘情况下它可能无法做到。当然，它还需要支持 JavaScript 模块的浏览器。

与 Webpack/Vue CLI 不同，Vite 无法创建针对旧版浏览器、web components 等的捆绑包。

而且，与 Vue CLI 不同，开发服务器和构建工具是不同的系统，导致在生产与开发中可能出现不一致的行为。

Vue CLI vs Vite 总结

Vue CLI 优点	Vue CLI 缺点
经历过战斗考验，可靠	开发服务器速度与依赖数量成反比
与 Vue 2 兼容
可以捆绑任何类型的依赖关系
插件生态系统
可以针对不同的目标进行构建

Vite 优点	Vite 缺点
开发服务器比 Webpack 快 10-100 倍	只能针对现代浏览器（ES2015+）
将 code-splitting 作为优先事项	与 CommonJS 模块不完全兼容
	处于测试阶段，仅支持 Vue 3
	最小的脚手架不包括 Vuex、路由器等
	不同的开发服务器与构建工具

Vite 的未来

虽然上面的比较主要集中在 Vite 和 Vue CLI 的现状上，但仍有几点需要考虑：

• 仅当浏览器中的 JavaScript 模块支持得到改善时，Vite 才会有所改善。
• 随着 JS 生态系统的追赶，更多的软件包将支持 JavaScript 模块，减少 Vite 无法处理的边缘情况。
• Vite 仍处于测试阶段�C功能可能会有变化。
• 有可能 Vue CLI 最终会结合 Vite，这样你就不用再使用其中一个了。
  

值得注意的是，Vite 并不是唯一一个利用浏览器中 JavaScript 模块的开发服务器项目。还有更著名的Snowpack，甚至可能会挤掉 Vite 的发展。时间会证明这一点

以上就是关于“Vite和Vue CLI对比用，哪种方法合适”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue框架中怎么制作跑马灯并实现控制开始和停止

  这篇文章主要为大家详细介绍了Vues实现跑马灯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• vue项目中判断安卓或IOS环境的方法及代码是什么

  目录vue判断安卓还是IOS最近工作上遇到这样一个需求所以我们需要进行一个判断H5端判断安卓跟ios显示不同的背景图vue判断安卓还是IOS最近工作上遇到这样一个需求vue写的页面，需要同时跟安卓和ios进行交互；若是安卓，执行代码：android.finishActivity();若是IOS，执行代码：try {  

• 链表的定义、作用、实现是什么，与数组对比如何

  这篇文章主要为大家介绍了链表的定义、作用、实现，以及与数组的比较，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 基于JS怎样实现密码框的常见功能

  学前端最基本的登录页面肯定要会写，那登录页面里面的密码框的功能设计就需要好好打磨，主要功能有显示密码明文，密码检测信息提示等等，那么本篇博客将写写这些功能结合js怎么做，很简单，看一下就会了。

• JS和jQuery对象的转换怎样实现，方法是什么？

  这篇文章给大家分享的是实现JS和jQuery对象的转换的方法。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。